MathQuest

Inspiration

Engineering mathematics is one of the most challenging subjects for students worldwide. Textbooks are dense, lectures move fast, and most online resources are either too theoretical or too boring to stick with. We were inspired by platforms like Duolingo that make language learning feel like a game — and asked: why can't math feel the same way? MathQuest was born from the idea that if learning is engaging, rewarding, and structured, students will actually want to study.

What it does

MathQuest is a gamified engineering mathematics learning platform. It covers 10+ major topics — Foundation Math, Calculus, Linear Algebra, Trigonometry, Differential Equations, Probability & Statistics, Complex Numbers, Logarithms, Transforms, and Numerical Methods.

For each concept, it provides simple explanations, real-life examples, structured learning notes with formulas, and quizzes with shuffled questions and options. Users earn XP points and badges for completing quizzes, unlock topics progressively, and track their progress per topic. All progress is saved to the cloud so users can continue from any device.

How we built it

Frontend: React + TypeScript + Vite for a fast, modern UI Styling: Tailwind CSS v4 with custom glassmorphism design system Animations: Framer Motion for smooth page transitions, card hovers, and micro-interactions Authentication: Supabase Auth with email/password and Google OAuth Database: Supabase PostgreSQL — stores per-user progress with row-level security Email notifications: EmailJS for login alerts Deployment: Vercel with automatic GitHub CI/CD Design: Dark glassmorphism UI with floating animated math symbols, gradient text, and gamification elements

Challenges we ran into

Progress race condition: The save effect was firing before the load completed, overwriting saved data with empty progress. Fixed with a progressLoaded flag and 800ms debounce. Google OAuth with Vercel: Google Console requires a top-level domain for authorized domains, but vercel.app is a shared subdomain. Resolved by routing OAuth through Supabase's callback URL instead. Quiz fairness: Shuffling only questions wasn't enough — answer options also needed shuffling with correct answer index recalculation to prevent pattern memorization. Session persistence: Ensuring Supabase session tokens survive page refreshes and that onAuthStateChange correctly restores user state on every load. Build failures on Vercel: A leftover GEMINI_API_KEY reference in vite.config.ts caused silent build failures. Cleaned up the config to only include necessary environment variables.

Accomplishments that we're proud of

Built a fully functional gamified learning platform with real cloud persistence Designed a premium dark UI that feels modern and engaging without any UI component library Implemented per-user isolated progress — each user's data is completely separate Covered 10 major engineering math topics with 500+ quiz questions, all with notes and real-life examples Achieved smooth animations and page transitions that make the learning experience feel polished Successfully deployed a production-ready app with Google OAuth, Supabase backend, and Vercel hosting

What we learned

How to design and implement a race-condition-free data sync pattern between React state and a remote database The importance of debouncing database writes to avoid overwriting freshly loaded data How Supabase Row Level Security works and why it matters for user data isolation That gamification elements (XP, badges, progress bars, unlock animations) genuinely increase engagement How to structure a large content-heavy React app without it becoming unmaintainable The full deployment pipeline from local development to GitHub to Vercel with environment variable management

What's next for MathQuest

AI Tutor: Integrate an AI assistant that explains concepts in real time and answers student questions Leaderboard: Global and friend-based rankings to add competitive motivation Streak system: Daily login streaks with bonus XP to build study habits Video lessons: Short animated video explanations for each concept Mobile app: React Native version for offline learning on iOS and Android More topics: Expand to cover advanced engineering subjects — Signal Processing, Control Systems, Thermodynamics Teacher dashboard: Allow educators to assign topics, track student progress, and create custom quizzes Certificates: Downloadable completion certificates for each topic and the full course

Built With

• emailjs
• framer-motion
• github
• google-oauth
• lucide
• node.js
• postgresql
• react
• supabase
• tailwind-css
• typescript
• vercel
• vite