AstroQuiz: AI-Powered Interactive Astronomy Quiz

AstroQuiz makes learning about the cosmos fun and dynamic—AI generates new astronomy questions, adapts to difficulty in real-time, and fuels friendly competition with a live global leaderboard.

Comment 1

About the project

Inspiration

After running multiple stargazing meetups, we watched learners struggle to retain facts about constellations, planets, and missions. We dreamed of a quiz app that not only tests knowledge, but continuously evolves—generating fresh questions, adapting difficulty, and even chatting like a tutor. AstroQuiz sprang from that need for a more dynamic, personalized way to learn the universe.

What it does

  • Dynamic Quiz Generation: Hit “Generate Questions” in the admin UI and your Supabase Edge Function (generate-questions) calls an LLM to seed new multiple-choice astronomy questions and distractors into your questions & choices tables.
  • Timed Challenges & Adaptive Difficulty: Each question has a 30-second timer. After you answer, the front-end sends { userId, questionId, correct, responseTime } to the detect-cheating and choose-next-question functions. The AI chooses “easy/medium/hard” for your next question, keeping the quiz challenging but fair.
  • Instant Feedback & Streak Tracking: Correct or incorrect answers highlight instantly in the UI, and your score + streak update live.
  • Global Realtime Leaderboard: When you finish, the submit-score function upserts your high score into user_scores, and the React <Leaderboard /> subscribes via Supabase Realtime to display the top 10 scores.
  • AI Tutor Chatbot: A floating <Chatbot /> widget streams back LLM-generated hints or answers when you ask “What causes a lunar eclipse?”—powered by the ai-tutor-chat Edge Function.
  • Multilanguage & PWA Support: The translate-text function lets you toggle between English and other languages. Offline-first with the usePWA hook, you can quiz even when you lose connectivity.

How we built it

  1. Data & Auth:
  • Supabase Auth for sign-in (email/password & magic link)
  • PostgreSQL tables provisioned via migrations (20250617005013_quiet_bread.sql, …_warm_scene.sql) for profiles, questions, choices, and user_scores

  • Row-Level Security policies guard reads/writes.

    1. Serverless Logic:

  • Five TypeScript Edge Functions under supabase/functions/:

    • generate-questions/index.ts
    • detect-cheating/index.ts
    • choose-next-question/index.ts
    • translate-text/index.ts
    • ai-tutor-chat/index.ts

  • Each function calls either OpenAI GPT-4 or the Hugging Face Inference API (swappable via your .env) and writes back to the database.

    1. Frontend:

  • Vite + React (TypeScript) with Tailwind CSS for styling

  • Key hooks in src/hooks/: useAuth.ts (wraps Supabase client), usePWA.ts (handles service-worker registration and offline mode)

  • Components in src/: <QuizScreen />, <ScoreDisplay />, <ResultModal />, <Leaderboard />, <Chatbot />, and an optional <AdminPanel /> under src/lib/

  • React Router for navigation and lucide-react for crisp SVG icons.

Challenges we ran into

  • Streaming LLM Replies: Integrating the streaming API from ai-tutor-chat without janky UI updates required a custom React hook to buffer incoming chunks.
  • Crafting RLS Policies: Balancing security (no one can overwrite another user’s score) with realtime leaderboard reads took many iterations of Supabase policy tests.
  • Adaptive-difficulty Prompt-Tuning: Teaching the LLM to reliably return "difficulty": "medium" (and not something else) for choose-next-question involved careful prompt-engineering.

Accomplishments that we’re proud of

  • Full AI-powered content pipeline—from question generation all the way through translation and chat hints—built entirely as modular Edge Functions.
  • Offline-first capabilities, so learners can quiz under dark sky conditions without dropping progress.
  • Realtime leaderboard that updates instantly across all connected clients, fueled by Supabase’s live subscriptions.

What we learned

  • Best practices for structuring Supabase Edge Functions in TypeScript.
  • How to secure a learning app with Row-Level Security and one-time upserts.
  • Techniques for streaming AI responses into React UIs.
  • Simple PWA patterns using a custom usePWA hook to cache static assets and quiz data.

What’s next for AstroQuiz: AI-Powered Interactive Astronomy Quiz

  • Mobile PWA enhancements: add push notifications for daily quiz challenges.
  • Voice Interface: integrate Whisper for speech-to-text Q&A.
  • Community features: user profiles, badges, and group study rooms.

Built with

  • Languages & Frameworks: React (Vite), TypeScript
  • Styling & Animations: Tailwind CSS, Framer Motion
  • State & Routing: React Router DOM, custom hooks (useAuth, usePWA)
  • Icons: lucide-react
  • Backend & Database: Supabase (Auth, PostgreSQL, Realtime, Storage, Edge Functions)
  • Serverless Functions: TypeScript functions under supabase/functions/ calling OpenAI or Hugging Face APIs
  • AI & LLM APIs: OpenAI GPT-4 & Hugging Face Inference (swappable via .env)
  • Deployment: Vercel (frontend), Supabase CLI for Edge Functions and database migrations
  • PWA Support: Service-worker and offline caching utilities in src/utils/pwaUtils.ts

Built With

Share this project:

Updates