JUNK FM - 2026 SITE UPDATE

React + TypeScript + Vite
Mantine v6 + Emotion + React Router v7

I am a big dumbass giraffe dumptruck poop wagon, but I can still update this list when we add new toys. Please do the same. ✨ Also: if you add a library, update this line. We are classy around here, dammit.

BUILD STUFF (NETLIFY MAGIC)

Live preview: junkfm.netlify.app
Main site (eventually): junkfm.com

You can work on main, but please consider a feature branch (I'll do the same if Tyler or other contributors pop up). 💡 Pushing changes to main will trigger a Netlify build and update the preview URL after a few minutes.

QUICK START (VITE VROOM VROOM)

RUN IT:

npm install
npm run dev

If you're in VSCode, you can also use the shortcut:

1. Hold CONTROL + OPTION + COMMAND + r + t (opens command palette with the 🚀Dev workflow selected)
2. Press ENTER (runs the app)

STOP IT:

1. In VSCode, run CONTROL + OPTION + COMMAND + k (kills all pertinent processes)
2. Or just COMMAND + c in the terminal like a normal nerd

SCRIPTS (THE USUAL SUSPECTS)

npm run dev      # local dev server
npm run build    # typecheck + build
npm run preview  # preview production build
npm run lint     # eslint

BORING CRAP (BUT PLEASE READ ANYWAY)

PROJECT DEV NOTES

• Bandsintown: Hit Mo up for a VITE_BANDSINTOWN_API_KEY or go grab one from the service. You'll need this in environment variables.
• PageHelmet: Wraps meta tags and social preview. Provider lives in src/main.tsx, component in src/Globals/PageHelmet.tsx. Use <PageHelmet title="Page" /> in routes for clean titles.
• Barrel exports: We use index.ts files everywhere. Prefer importing from @junkfm instead of deep paths (see src/index.ts).
• Structure: src/routes = pages, src/components = reusable chunks, src/Globals = theme + global styles + utilities, src/hooks = reusable logic, src/assets = images.

PROJECT STYLE NOTES

• Fonts: Google fonts won’t load here, so it falls back to system fonts. Header above is Impact (if you have that onboard), but please stick to Oswald (see global text styles) in lieu of Impact for the sake of originality in this project. Poppins is main body font. Tilt Neon used for menu and other "neon sign" effects.
• Text styles: src/Globals/useGlobalStyles.ts defines h1–h6 + p sizing/weights. Use those before inventing new ones.
• Colors: Avoid hex - use imports from src/Globals/useGlobalStyles.ts

TODO / LOUD IDEAS

1. Add site context for global state availability (route-aware goodies).
2. Expand and randomize the silent hero video clips (10 to 20 short, 3-to-5-second clips) so nobody gets the same opener series twice.
3. Make playlist data editable via a simple external source (JSON, Google Sheets, or something equally lazy).
4. MORE EASTER EGGS.
5. Update color scheme globals and eradicate rogue hex usage (imports only).

I will add more automation later. Steal at will, but leave snacks