FankeePlayground

Fan engagement, gamified: pick a track, complete missions, climb the leaderboard. Built for the FANKEE interview challenge.

/development

Music gamification app where fans pick a track, complete AI-generated missions, and climb leaderboards. Built end-to-end for the FANKEE coding challenge: a Next.js frontend, a FastAPI backend on MySQL, and Hugging Face-powered mission generation consolidated into a single service for easier debugging and tracing.

/stack

Next.js
TypeScript
FastAPI
MySQL
Hugging Face
shadcn/ui

/ux design

Designed the whole FANKEE Playground flow in Figma before writing code: a playful onboarding that handles taken usernames with suggested alternatives, a gallery-style track picker, and expandable mission cards with clear completion feedback — all on a high-contrast dark UI with monospaced type, micro-interactions, and minimal choice overload.

/tools & methods

Figma
User flows
Dark UI
Micro-interactions
Hi-fi prototype

/the flow

FANKEE Playground — Welcome to the Playground — 01 — Welcome to the Playground

FANKEE Playground — Pick your player name — 02 — Pick your player name

FANKEE Playground — Name taken — suggested alternatives — 03 — Name taken — suggested alternatives

FANKEE Playground — You are playing as... — 04 — You are playing as...

FANKEE Playground — Choose your track — 05 — Choose your track

FANKEE Playground — Missions for the track — 06 — Missions for the track

FANKEE Playground — Mission detail & completion — 07 — Mission detail & completion

Open GitHub Back to the garage