Civics Hero – Project Story
🌟 Inspiration
One of my friends was studying for the ESL class and dreaded the U.S. civics test. It was difficult to study and do quizzes balancing everything else. The generic paper flashcards felt stale and intimidating.
I envisioned a Duolingo-style app where micro-quizzes, streaks, and XP turn study time into a game.
📚 What I Learned
- XP + streak mechanics can triple daily retention.
- Heat-map analytics must include color-blind palettes for accessibility.
- Time-zone math is crucial to keep streaks fair for users abroad.
🛠️ How I Built It
| Layer | Tech & Flow |
|---|---|
| Question Bank | Official USCIS items stored as JSONB in Supabase. |
| Game Loop | React hooks + Zustand manage quiz state, XP, and streak counters. |
| Scoring | Supabase Edge Function grades answers, updates stats, and returns feedback. |
| Auth | Netlify Identity for quick email or social sign-in. |
| Analytics | Recharts heat-maps spotlight weakest topics per user. |
⚠️ Challenges
| Issue | Fix |
|---|---|
| Shuffling answers yet keeping stable IDs | Used deterministic shuffle keyed to question UUID. |
| Variable answers (“Who is your senator?”) | Added free-text prompts with fuzzy matching + hints. |
| Preparing for multilingual support | Built all copy with i18n keys from day one. |
🚀 What’s Next
ElevenLabs read-aloud mode – spoken Q&A for auditory learners.
Leaderboard & Friend Challenges – social layer to boost engagement.
Civics Hero aims to make the path to U.S. citizenship less stressful—and a lot more fun.
Built With
- edge
- netlify
- openai
- react
- supabase
- zustand
Log in or sign up for Devpost to join the conversation.