SPOTLE

(TOP ARTISTS GUESSING GAME)

2025

WORDLE, BUT FOR YOUR SPOTIFY LISTENING HISTORY. LOG IN WITH SPOTIFY AND GUESS YOUR OWN TOP 5 ARTISTS FROM A RANDOMLY CHOSEN PAST MONTH — ACROSS A 5×5 GRID WITH COLOUR-CODED POSITION FEEDBACK AND SEQUENTIAL FLIP ANIMATIONS.

FULL OAUTH 2.0 FLOW WITH A NODE/EXPRESS PROXY BACKEND — CLIENT CREDENTIALS NEVER TOUCH THE BROWSER. EVERY GAME IS UNIQUE: TIME RANGE AND ANSWER ARE RANDOMISED PER SESSION FROM THE USER'S REAL DATA.

SPOTIFY OAUTH + PROXY BACKEND

FULL OAUTH 2.0 AUTHORIZATION CODE FLOW — USER IS REDIRECTED TO SPOTIFY, AUTHENTICATES, AND THE BACKEND EXCHANGES THE CODE FOR ACCESS AND REFRESH TOKENS. THE EXPRESS SERVER PROXIES ALL SPOTIFY API CALLS TO AVOID CLIENT-SIDE CORS ISSUES AND TO KEEP CLIENT CREDENTIALS OUT OF THE BROWSER.

PERSONALISED GAME EACH SESSION

ON LOGIN, THE GAME RANDOMLY PICKS ONE OF THREE SPOTIFY TIME RANGES (LAST 4 WEEKS, LAST 6 MONTHS, LAST YEAR) AND FETCHES THE USER'S TOP 50 ARTISTS FOR THAT PERIOD. THE TOP 5 BECOME THE ANSWER. A MATCHING RANDOM PAST MONTH IS SHOWN AS THE PERIOD HINT — SO EVERY GAME IS UNIQUE TO THAT USER'S ACTUAL LISTENING HISTORY.

WORDLE-STYLE GUESS GRID

5 POSITIONS × 5 ATTEMPTS. EACH SUBMITTED ROW REVEALS ARTIST IMAGES WITH COLOUR-CODED BORDERS: GREEN (CORRECT POSITION), YELLOW (CORRECT ARTIST, WRONG POSITION), GREY (NOT IN TOP 5). CELLS FLIP ONE BY ONE WITH A CSS ROTATEX ANIMATION, REVEALING THE RESULT AT THE MIDPOINT OF EACH 500MS FLIP — TIMED TO MATCH THE WORDLE FEEL EXACTLY.

TYPEAHEAD ARTIST SEARCH

THE GUESS INPUT FILTERS LIVE AGAINST THE USER'S FULL TOP-50 ARTIST POOL AS THEY TYPE (MINIMUM 2 CHARS). EACH SUGGESTION SHOWS THE ARTIST'S THUMBNAIL AND NAME. SELECTING ONE AUTO-ADVANCES THE ACTIVE POSITION SELECTOR TO THE NEXT SLOT — NO NEED TO MANUALLY CLICK EACH POSITION.

SESSION PERSISTENCE + TOKEN REFRESH

TOKENS ARE PERSISTED IN LOCALSTORAGE SO USERS DON'T NEED TO RE-LOGIN ON REVISIT. THE BACKEND EXPOSES A /api/auth/refresh ENDPOINT THAT EXCHANGES THE REFRESH TOKEN FOR A NEW ACCESS TOKEN USING SPOTIFY'S TOKEN ROTATION FLOW — KEEPING SESSIONS ALIVE WITHOUT REQUIRING RE-AUTHENTICATION.

GAME REVEAL + REPLAY

ON GAME OVER (WIN OR 5 FAILED ATTEMPTS), THE FULL CORRECT ARTIST LIST IS SHOWN WITH IMAGES AND RANKINGS. A 'PLAY AGAIN' BUTTON RESETS STATE AND KICKS OFF A NEW initGame() CALL — PICKING A FRESH RANDOM TIME RANGE AND MONTH, SO THE ANSWER CAN DIFFER EVEN WITHIN THE SAME SESSION.