03 / Selected work / interactive product
FillTheLyrics
A production lyric-reconstruction web game built around public Spotify playlists.
Product idea
Reconstruct a song through progressive reveals
FillTheLyrics is a production lyric-reconstruction web game that I designed and built end-to-end. Players can start a deterministic challenge using a public Spotify playlist URL.
Gameplay system
A small, deterministic interaction loop
- Four synchronized lyric lines form each prompt
- Players receive up to four attempts
- Each attempt progressively reveals more words
- Correct words remain locked between attempts
- Playback is optional and never gates completion
Primary product surface
The public playlist entry is the starting point
The landing screen keeps the product invitation and playlist requirement visible before any challenge begins.
Playlist flow
From a public URL to a challenge setup
The imported-playlist setup screen is a separate, approved capture of the transition into a playable challenge.
Provider boundaries
External providers stay outside the core loop
Repository code integrates Spotify playlist data and synchronized lyrics through LRCLIB. An optional YouTube playback path is isolated from the core challenge, so unavailable playback does not prevent the game from finishing.
Repository surface
Technology Stack
- Next.js
- React
- TypeScript
- Tailwind CSS
- Zod
- Motion
- Vitest
- Playwright
Project actions
Continue with the project
Next project / 04
Sabila Mall ↗Frontend delivery for a live commerce application, from account flows through checkout.