This is a submission for the DEV Weekend Challenge: Community
The Community
Adult piano learners are a surprisingly large and quietly frustrated community. We're not children being marched to the piano by parents. We chose this. We pay for lessons, we have the instrument, we genuinely want to play — and yet, week after week, we sit down to practice and feel... nothing. A list of tasks. Bars 12 to 20, hands separate. C major scale, two octaves. Again.
The problem isn't motivation in the grand sense. We love music. The problem is that practice, stripped of narrative, feels like admin. And admin is easy to skip.
I've been learning piano as an adult for a while now. My teacher gives me a list of tasks each week. They're good tasks. I just rarely feel excited to open the list. There's no story. No stakes. No sense that anything meaningful is happening between one Tuesday and the next.
I built Practice Quest for this community: adult learners who are technically capable of practicing but emotionally a bit resistant to it.
What I Built
Practice Quest is a web app that transforms your weekly piano practice tasks into a fantasy quest narrative, powered by AI.
You open the app, type in your practice tasks for the week (whatever your teacher assigned, or whatever you're working on) and hit "Begin the Journey." The app sends each task to OpenAI, which writes a unique atmospheric quest description for it: a location, a title, a 2-3 sentence story that frames the task as something meaningful and adventurous.
Your scales become a trial at The Crystal Cavern. Your sight-reading becomes an ancient manuscript discovered in The Mossy Archive. Bars 12-20 of your piece become the key to unlocking The Amber Gate.
You work through the quests one at a time. Each completion triggers a small sparkle animation and unlocks the next. When you finish everything, the journey is complete and the realm is at peace.
It's a small reframe. But that reframe is the whole point, practice should feel like progress, not admin.
Demo
Code
Practice Quest 🧭
Transform your piano practice into a fantasy adventure.
Practice Quest takes your weekly piano tasks and weaves them into an atmospheric quest narrative — powered by OpenAI. Each task becomes a location, a trial, a story. Completing practice feels like progressing through a world, not ticking a checkbox.
Built for adult piano learners who know the struggle of making themselves sit down and practice.
Deploy to Vercel
1. Clone this repo
git clone https://github.com/yourusername/practice-quest
cd practice-quest
2. Install Vercel CLI
npm install -g vercel
3. Deploy
vercel
Follow the prompts — select "no" for existing project, accept defaults.
4. Add your OpenAI API key
In the Vercel dashboard → your project → Settings → Environment Variables:
OPENAI_API_KEY = sk-...your key here
Then redeploy:
vercel --prod
That's it. Your app is live.
Project Structure
practice-quest/
├── index.html # The entire frontend
├── api/
│ └── narrate.js # VercelThe project is deliberately minimal: one HTML file for the entire frontend, one Vercel serverless function to proxy the OpenAI call, and a vercel.json. No framework, no build step, no database.
How I Built It
The stack is intentionally small:
- Vanilla HTML/CSS/JS for the frontend, single file, no framework. The parchment aesthetic, animations, and quest card layout are all hand-written CSS.
- OpenAI gpt-4.1-mini for the narration. Each task gets its own API call with a system prompt that instructs the model to write atmospheric, encouraging quest text referencing the fantasy location, ending with a sense of anticipation, and making the practice feel heroic rather than tedious.
-
Vercel serverless function (
/api/narrate.js) as a thin proxy, this exists entirely to keep the OpenAI API key off the client. The frontend calls/api/narrate, the function calls OpenAI, the key never touches the browser. - Graceful fallback, if the API call fails for any reason, the app silently falls back to template-generated flavour text. Nothing breaks for the user.
The loading screen (an animated quill writing, with per-task progress indicators) is probably my favourite part. It gives the AI generation a sense of ritual like a scribe is actually composing your adventure.
On the design: I wanted it to feel like a parchment map, not an app. Crimson Text for the serif, Quicksand for UI labels, a warm parchment background with subtle noise texture, gold as the primary accent. The quest cards animate in on a slight delay when the journey loads. Completing a quest triggers gold sparkles from the button.
Why this community specifically: I'm in it. I know the exact moment of friction, opening the practice notebook, seeing a list of technical tasks, feeling the fun drain out before you've played a single note. The hypothesis Practice Quest tests is whether reframing that list as a quest changes how the session feels. For me, this week at least, it did.
Top comments (2)
"Practice feels like admin" is such an underrated insight. I'm learning piano as an adult too, and the gap between loving music and loving practice is real. The narrative reframe is clever and changes the emotional texture of the task without changing the task itself.
Have you noticed it actually changes your consistency over time, or does the novelty wears off? Either way, the core idea that motivation is a UX problem, not a willpower problem is spot on.
So glad it resonates Mei, you've articulated the idea better than I did! 'Motivation is a UX problem' is exactly the frame I was reaching for.
Honestly, I don't know yet. I'm in the middle of relearning technique from scratch, so my practice feels more regression than progress right now. And staying consistent becomes harder and harder. The narrative reframe helps me show up in this novelty phase, but I'm still experimenting with the idea.
Maybe that's the next thing worth building. Something that evolves with you so the story doesn't go stale. For now I'm just glad it makes Tuesday practice feel less like filling out a form.