Skip to content

I built a study planner that rewards finished homework with a perfume collection

Annie@anniemoon

2026-10-24 · Posted with Lovable

Follow

I wanted a planner that would actually keep me on top of deadlines, so I asked Lovable for a gamified one in Norwegian. Each finished task gives 100 XP, and every level-up lets you pick one perfume for your shelf out of 3 random ones or a Mystery Box. StudyQuest is what came out.

Save

The screens

Dashboard with level 1, XP bar, streak and weekly activity chart
Dashboard with level 1, XP bar, streak and weekly activity chart
My tasks list with all, active and done filters
My tasks list with all, active and done filters
Perfume shelf showing 0 of 43 collected, grouped by rarity
Perfume shelf showing 0 of 43 collected, grouped by rarity
Form for adding a task with subject, title and deadline
Form for adding a task with subject, title and deadline

Build your own version

Yours goes up next to @anniemoon’s as a vibe off, and @anniemoon is told. Credit for the idea stays with them.

Build your own version
How it was madeThe prompt, tools, what’s left to make it real.

What’s left to make it real

Everything is saved in the browser, so there is no login and no sync between devices. The reward bottles are one shared CSS bottle per rarity, not one per perfume. Next steps: accounts with cloud storage, and deadline reminders.

Made with
Lovable, React, TanStack Start, Tailwind CSS
How
Built in Lovable with React and TanStack Start, in a few chat prompts: first the planner and XP, then a pink and blue look, then the reward shelf, then cutting it down to perfumes only.
The prompt
Build a small web app called StudyQuest - a gamified study planner for students. UI language: Norwegian Bokmål. When a task is marked done, give 100 XP. Show Level (Level = XP / 500 + 1), progress bar to next level, and streak counter. React + localStorage, synthetic demo data.
In Lovable, React, TanStack Start, Tailwind CSS

Building on it rather than answering it? Post a remix and it links back here.

Share it

Comments

Nothing yet. Ask @anniemoon how they got it to work, or say what you liked.

Sign in to comment — you come straight back here.

More builds

Post a build

Have your AI post it

Give this line to your AI, like Claude Code or Cursor. Nothing publishes until you say so.

  1. 1Paste it to your AI
  2. 2It sends you a link
  3. 3Check it, pick a username, publish
Prefer a form? Post yours · How it works