StanZer

StanZer turns any album into a fast, competitive music quiz with five-second clips, synced multiplayer rooms, live rankings, and unlockable achievements.

Comment

Inspiration

Growing up, I loved Eminem and Juice WRLD. I watched music challenge videos where people had to identify songs from short clips, finish lyrics, or prove how well they knew an artist.

I always wanted to feel like I was their number one fan, but there was never really a place where I could prove it.

That made me think: what if those YouTube music challenges were turned into a real game?

That idea became StanZer, a competitive music quiz platform built for people who believe they truly know their favourite artists and albums.

What it does

StanZer turns albums into fast-paced music challenges.

Players hear a five-second audio clip and have ten seconds to identify the correct track. Faster correct answers earn more points.

Players can:

  • Search for almost any album
  • Play solo quizzes
  • Challenge another player in a synchronized Duel
  • Compete in Group Lobbies
  • Host Party Mode games where one device plays the audio and everyone else answers from their phones
  • Create public or private rooms
  • Join using a room code or shareable link
  • Rematch without leaving the lobby
  • Track accuracy, speed, streaks, scores, and total points
  • Earn unique achievement badges
  • Climb album, artist, accuracy, and global leaderboards
  • Build a public profile and progress through competitive ranks

The goal is simple: prove you’re a superfan.

How I built it

StanZer was built using React, TypeScript, Vite, Supabase, PostgreSQL, and Vercel.

Supabase handles:

  • User authentication
  • Profiles and usernames
  • Quiz results
  • Player rankings
  • Achievement tracking
  • Multiplayer rooms
  • Private invitation codes
  • Shared game state
  • Live player progress
  • Row-level security
  • Room cleanup and reconnect behaviour

The iTunes Search and Lookup APIs provide album information, artwork, track lists, and available audio previews.

For multiplayer, the host creates one shared question set that is saved to the room. Every device receives the same tracks, options, correct answers, clip positions, and start timestamps.

Rather than allowing each browser to run its own independent timer, clients calculate their state from the shared room clock. This keeps the countdown, audio phase, answer phase, reveal, scoring, and question transitions synchronized across phones and laptops.

Challenges I faced

The most difficult part was building reliable multiplayer synchronization.

Early versions had several problems:

  • One player could start before another
  • Timers could drift between devices
  • Audio sometimes played for thirty seconds instead of five
  • Browsers could block autoplay
  • Players could remain inside stale rooms after refreshing
  • Rematches sometimes required another player to reload
  • A room could incorrectly show as full
  • Hosts could lose access to their own active rooms

I redesigned the multiplayer flow around shared timestamps, reusable room state, automatic reconnection, active-room detection, rematch resets, host transfer, forfeits, and stale-room cleanup.

Browser audio restrictions were another major challenge. StanZer now detects when audio cannot play and handles the question without trapping the player or breaking synchronization.

Designing Party Mode also required a different approach. Only the host device should play the song, while every other participant receives the same countdown and answer options, similar to Kahoot.

Accomplishments that I’m proud of

I am proud that StanZer became much more than a simple quiz.

It now includes:

  • A polished Single Player experience
  • Synchronized multiplayer across phones and laptops
  • Live head-to-head score progression
  • Group Lobby rankings
  • Host-controlled Party Mode
  • Public and private multiplayer rooms
  • Shareable invitation links and codes
  • Rematches and album changes without leaving the room
  • Account rankings and progression
  • Cloud-saved statistics
  • Global and album-specific leaderboards
  • More than twenty unique achievement badges
  • Responsive desktop and mobile interfaces

One of my favourite moments was testing a Duel using my laptop and phone. Both devices played the same question, showed the same options, followed the same countdown, and updated each player’s score live.

That was the moment StanZer started to feel like a real game.

How I used Codex and GPT-5.6

I used Codex as an engineering collaborator throughout development.

Codex helped me:

  • Review and understand the existing codebase
  • Build new React and TypeScript features
  • Create and debug Supabase migrations
  • Resolve row-level security issues
  • Improve multiplayer synchronization
  • Build reconnect and room cleanup logic
  • Redesign responsive interfaces
  • Test production builds
  • Identify regressions before deployment

GPT-5.6 was used during the final engineering and product review. It helped pressure-test the multiplayer architecture, refine synchronization behaviour, identify user experience problems, and prepare the project for production and submission.

I made the main creative and product decisions, including the original music challenge concept, album-based gameplay, scoring system, multiplayer modes, Party Mode rules, ranking system, achievement goals, visual direction, and the StanZer brand.

What I learned

I learned that creating a multiplayer game involves much more than displaying the same page on two devices.

Every important action needs a shared source of truth:

  • When the game starts
  • Which song is playing
  • When the answer timer begins
  • When a question ends
  • When results are revealed
  • When the next round begins
  • What happens when someone leaves or reconnects

I also learned how important small details are to the player experience. A delayed animation, blocked audio clip, unclear button, stale lobby, or poorly sized layout can make a technically working feature feel broken.

Most importantly, I learned how to turn a personal idea into a complete product with users, accounts, progression, multiplayer systems, and a clear identity.

What’s next for StanZer

The next stage is turning StanZer into a real music gaming community.

Planned features include:

  • Friend requests and direct challenges
  • Competitive matchmaking
  • Seasonal ranks
  • Artist-specific leagues
  • Championship brackets
  • Daily and weekly challenges
  • Community tournaments
  • Creator-hosted music events
  • Better moderation and reporting
  • Improved music discovery
  • More achievement categories
  • Native mobile apps
  • Licensed music partnerships

My long-term vision is for StanZer to become the place where music fans compete, discover albums, represent their favourite artists, and finally prove who the real superfan is.

Built With

Share this project:

Updates