Giuseppe De Marco

/the garage — 04 / 09

Fankee Interview Challenge

FankeePlayground

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

FANKEE Playground — cover

/overview

Built end-to-end for the FANKEE interview challenge: a dark, gamified Playground where fans pick a track, complete AI-generated missions, and climb a leaderboard.

/approach

01

Onboarding

Designed a playful sign-up that handles taken usernames with suggested alternatives instead of a bare error.

02

Frontend

Built the Playground UI in Next.js and TypeScript with shadcn/ui, styled in high-contrast dark mode with monospaced accents.

03

Backend

Stood up a FastAPI service on MySQL, consolidating mission generation and game logic into one traceable service.

04

AI missions

Wired Hugging Face into the backend to generate missions per track, keeping generation and delivery on the same debug path.

/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.
  • Next.js
  • TypeScript
  • FastAPI
  • MySQL
  • Hugging Face
  • shadcn/ui
FANKEE — mission detail & completion

/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.
  • Figma
  • User flows
  • Dark UI
  • Micro-interactions
  • Hi-fi prototype
FANKEE — pick your player name

/the flow

FANKEE Playground — Welcome to the Playground
01 — Welcome to the Playground
FANKEE Playground — Name taken — suggested alternatives
02 — Name taken — suggested alternatives
FANKEE Playground — You are playing as...
03 — You are playing as...
FANKEE Playground — Choose your track
04 — Choose your track
FANKEE Playground — Missions for the track
05 — Missions for the track
Open GitHubBack to the garage