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