arrow_back Back to Projects
Featured May 2026

BrainQuestor — Gamified Learning Platform

A dungeon-crawler RPG where users learn tech by completing missions and defeating bosses. Built with Astro 6, React 19, Tailwind CSS 4, and Supabase.

Astro React TypeScript Supabase Tailwind CSS Gamification
## What I Built BrainQuestor transforms reading tech articles into a dungeon-crawler RPG adventure. Each article is a "mission" in a linear dungeon. Users progress by reading, passing quizzes, and ultimately facing a Final Boss. ## Architecture Decisions - **Astro 6 with React 19 islands**: Static-first with interactive components only where needed (quiz, map, leaderboard). Zero JS on content pages. - **Content Layer API**: All missions stored as Markdown with Zod-validated YAML frontmatter. Quiz questions embedded in the same file. - **Supabase micro-backend**: Leaderboard is the only server-side feature. Public anon key, no auth, trust-based MVP. - **localStorage for progress**: No backend for game state. Single versioned key with TypeScript schema. Graceful degradation if storage is unavailable. ## Key Features - Scroll-gated quiz unlock (IntersectionObserver at 80% scroll depth) - Sequential mission unlock with URL-based access control - Final Boss with stricter quiz threshold (80% vs 67%) - Dungeon map with 5 visual states (completed, current, locked, boss-locked, boss-unlocked) - Real-time leaderboard via Supabase Realtime subscriptions - Multi-user support via "Switch Adventurer" button - Plausible Analytics for KPI tracking