💀🎵 STUPID SPOTIFY 🎵💀
"What if Spotify was built by a time traveler from 2003 who only knew Comic Sans and lies?"
🚨 WARNING: THIS IS THE STUPIDEST THING WE'VE EVER BUILT 🚨
Welcome to Stupid Spotify - a hilariously cursed Spotify clone that plays random songs, gaslights you with an AI chatbot, and looks like a GeoCities website had a baby with a MySpace page. Built in 5 chaotic hours for a hackathon where stupidity was literally the judging criteria.
🤔 WHY THO???
Because we could. Also because the hackathon judges wanted:
- STUPIDITY - Is it dumb? ✅ YES
- EXECUTION - Is it well-made garbage? ✅ ABSOLUTELY
- CREATIVITY - Is it creative? ✅ UNFORTUNATELY
- CHAOS - Does it cause chaos? ✅ MAXIMUM CHAOS
FEATURES (AKA THE STUPID STUFF)
Real Spotify Playback (The Only Smart Thing Here)
- ACTUAL Spotify integration using OAuth 2.0 and Web Playback SDK
- Click random song button → plays ACTUAL music from a cringe music playlist
- Full playback controls that work (shocking, we know)
- Requires Spotify Premium because we're fancy like that
AI Chatbot That GASLIGHTS You
- Powered by Cohere AI (command-r-08-2024 model)
- Ask it for music recommendations → it roasts you in Gen Z slang
- Temperature set to 1.2 for MAXIMUM UNHINGED ENERGY
- 18 different skibidi toilet jokes programmed in
- Will tell you your music taste is "mid" and "not bussin fr fr"
Stupid Face Matching CAPTCHA
- Uses webcam and face detection (face-api.js)
- User must match their face to a stupid meme image (e.g. thinking monkey, confused Wojak)
- If you don't match, you can't proceed (the dumbest security ever)
- Great for making users feel as dumb as the app
Spinning 3D Skull Background
- Implemented by rotating a 3D model using three.js
- 💀
Billboard Hot 100 (But Make It Stupid)
- Scraped real Billboard chart data with Python
- Songs grouped by fake "cover art colors"
- Click a song → plays a DIFFERENT random song
- Song data not scraped properly were replaced with "Lil Yeet" and "DJ Skibidi"
Early 2000s Aesthetic
- Comic Sans MS everywhere (yes, really)
- Neon lime green, hot pink, and cyan colors
- 3D borders on literally everything
- Slanted buttons with
transform: rotate()andskewX() - Marquee scrolling text (we brought it back!)
- Random sticker images floating around
- Background patterns that hurt your eyes
HOW WE BUILT THIS MONSTROSITY
Tech Stack (Actually Kinda Modern???)
- Next.js 16.0.3 - Because we needed server-side rendering for some reason
- React 18.3.1 - (Downgraded from 19 because Three.js broke everything)
- TypeScript - For type safety in our stupid code
- Tailwind CSS 4 - Used ironically to make ugly things
- Spotify Web API + Web Playback SDK - The only smart part
- Cohere AI - For the gaslighting chatbot
- Python + BeautifulSoup4 - Scraped Billboard Hot 100 data
- Three.js + @react-three/fiber - For the 3D skull model
- face-api.js + react-webcam - For the stupid face matching CAPTCHA
The Build Process (5 Hours of Chaos)
Hour 1: "Let's make it bad on purpose"
- Set up Next.js project
- Scraped Billboard Hot 100 with Python
- Made the ugliest UI possible with Comic Sans
Hour 2: "We need more stupid features"
- Added Cohere AI chatbot
- Programmed it to gaslight users
- Added 18 skibidi toilet roasts
Hour 3: "SPINNING SKULL TIME"
- Implemented a 3D skull model with Three.js and @react-three/fiber
- Skull rotates and glows with neon pink
- Fallback to CSS spinning emoji if 3D fails
Hour 4: "Wait, we should add REAL Spotify"
- Built complete OAuth 2.0 flow in Next.js API routes
- Struggled with localhost vs 127.0.0.1 cookie issues for 30 mins
- Token persistence with httpOnly cookies
- Web Playback SDK integration
- IT ACTUALLY WORKS???
Hour 5: "MAKE IT STUPIDER"
- Slanted the player controls with CSS transforms
- Added fake visualizer bars
- Marquee scrolling track names
- Random scattered images
- Neon glows EVERYWHERE
- Built face-matching CAPTCHA with webcam + face detection
- Implemented stupid meme face library (thinking monkey, ec.)
- Submitted at 3:59 PM
Log in or sign up for Devpost to join the conversation.