Study Leveling

STUDY_LEVELING

Inspiration

We grew up with video games. The dopamine hit of levelling up, the drive to climb a leaderboard, the satisfaction of completing a quest, none of that exists in a traditional LMS. We asked: what if studying felt like that? The average student checks their university portal once a day. They check their game stats ten times. Study Leveling bridges that gap.

What We Learned

Building a real-time gamification system taught us that motivation is mathematical. A player stays engaged when the reward curve feels achievable but never trivial. We modelled XP thresholds using a simple linear progression:

$$\text{Level} = \left\lfloor \frac{\text{XP}}{500} \right\rfloor + 1$$

This keeps early levels fast and satisfying while naturally slowing as students advance, mirroring how academic difficulty scales across a degree.

How We Built It

Frontend: React 18 + TypeScript, Tailwind CSS v4, shadcn/ui
Backend: Supabase (Postgres, Realtime, Auth)
AI: Anthropic Claude API powering four social chat personas and the Moodle integration demo
Animation: Framer Motion for character walk-offs and podium reveals

Challenges

The hardest problem was making the leaderboard feel live without hammering the database. Supabase Realtime solved the subscription layer, but we had to carefully manage optimistic UI updates so XP changes felt instant locally while syncing reliably in the background.

Designing the AI friends in the social chat was also trickier than expected. Getting four distinct personalities to feel like real classmates, not chatbots, required careful system prompt engineering for each persona.