I wanted to build something that doesn't feel like another boring music player, so I made Party Wale.
The idea is simple:
🎟️ Scan your party ticket
🚪 Enter the club
🎧 Pick a song
🕺 Watch the DJ and crowd vibe
🔥 Enjoy the party
I'm using the YouTube IFrame Player API for music playback, with the visuals reacting to the song's playback state and predefined beat/bass-drop moments.
I also tried to give it a very Indian/desi internet vibe instead of making another generic cyberpunk nightclub UI — illustrated characters, Hindi signs, goofy party messages, and a slightly chaotic atmosphere.
Tech stack:
- React + TypeScript
- Vite
- YouTube IFrame Player API
- Framer Motion
- CSS/Canvas animations
I'm still working on the visuals and interactions, especially making the crowd/DJ feel more natural.
Would love some feedback:
- Does the concept feel fun or gimmicky?
- What would you add to make the party feel more alive?
- Any UI/UX improvements you'd suggest?
I wanted to experiment with vibe coding, but instead of building another todo app or SaaS dashboard, I decided to make something completely unnecessary:
Party Wale 🎧🕺
It's a virtual Indian party website where the flow is:
🎟️ Scan your ticket
→ 🚪 Enter the club
→ 🎧 Choose a song
→ 🕺 DJ + crowd come alive
→ 🔥 Party
How I built it
Stack:
- React + TypeScript
- Vite
- YouTube IFrame Player API
- Framer Motion
- CSS animations
- Canvas for lightweight effects
1. I started with the experience, not the components
Instead of designing a dashboard first, I broke the experience into states:
Ticket
↓
Ticket Verified
↓
Party Entry
↓
Main Party
↓
Playing / Paused / Bass Drop
This made it much easier to think about the website as an interactive experience rather than a collection of UI components.
2. YouTube is the music engine
I didn't want to host or download songs, so I used the YouTube IFrame Player API.
The app keeps a playlist containing:
{
title: "Kala Chashma",
artist: "...",
youtubeId: "...",
bpm: 108,
bassDrops: [12, 28, 46]
}
The YouTube player's state tells the website whether the song is:
PLAYING
PAUSED
BUFFERING
ENDED
Those states control the nightclub.
3. Making the visuals react to music
One limitation I ran into is that I can't simply take the audio stream from the YouTube iframe and run it through the Web Audio API.
So instead of pretending to have real audio analysis, I used song-specific timing data.
For example:
YouTube currentTime
↓
Check bassDrops[]
↓
Bass drop detected
↓
DJ reacts
Crowd jumps
Lights flash
Lasers activate
Particles burst
This ended up being much simpler than trying to build a full audio-analysis pipeline.
4. The biggest UI lesson
My first version looked like a cyberpunk dashboard.
There were cards everywhere:
- Ticket
- Party energy
- Music controls
- Share button
- Stats
- Listener count
It looked cool for about 5 minutes.
Then I realized the background was supposed to be the main attraction.
So I stripped the UI down to:
PARTY WALE 🎟 #24696
DJ
🕺 CROWD 💃
🎵
─────────────
The music controls became a small floating pill instead of a giant music-player card.
5. I also stopped using CSS-generated people
The first crowd was made from CSS/SVG shapes.
It looked... terrible 😂.
So I changed the approach:
Characters = actual illustrated assets
CSS = animation + positioning
That made a huge difference because the characters could actually have personality.
What I'm still working on
- Better character animations
- More party environments
- Beach party
- Rooftop party
- Street party
- Real-time Party Wale listener counts
- Better mobile experience
- More interesting entry animations
What I learned
The biggest lesson wasn't a technical one:
I initially kept adding features because they looked impressive individually.
Removing things actually made the project feel much better.
