QuizForge

AI-powered quiz generator that turns any text or PDF into smart quizzes, flashcards and exams in seconds.

Comment

QuizForge — Beyond Tomorrow Summit 2026

Inspiration

As students ourselves, we lived the same frustrating reality every semester: hours spent manually creating flashcards, struggling to identify what was truly important in a 200-page textbook, and losing motivation after the first week of studying. Traditional study methods haven't evolved in decades — they're passive, repetitive, and deeply inefficient.

The spark for QuizForge came during a late-night study session before a Calculus II exam. We had 80 pages of notes and only 3 hours left. We thought: "What if an AI could read this and immediately test us on what matters most?" That question became our obsession.

We were also inspired by the gamification revolution in apps like Duolingo — the proof that learning becomes exponentially more effective when it feels like a game. We wanted to bring that same energy to any subject, for any student, anywhere in the world.

What it does

QuizForge is a full-stack AI-powered study platform that transforms any text, notes or PDF into a complete learning experience in seconds. Here's what it offers:

🧠 AI Quiz Generator Paste any text or upload a PDF and Groq's LLaMA 3.3 70B instantly generates multiple choice questions, True/False statements, or interactive flashcards — calibrated to the desired difficulty level.

📄 PDF Study Assistant Upload any academic PDF and receive a structured smart summary, 10 study flashcards, and 8 exam-style questions — all extracted and synthesized by AI without any manual work.

🤖 Rex — AI Tutor An ultra-fast AI tutor powered by Groq that answers any academic question in real time. Math, science, history, coding, languages — Rex explains it all, and can even read your uploaded PDFs to answer specific questions about them.

🎮 Multiplayer 1v1 Battles Students challenge AI bots in real-time knowledge battles across Math, Science, and Random categories. Every match earns diamonds and XP.

⚡ Daily Challenge A new Calculus I & II challenge every day with a 3-minute timer, 10 questions, and a reward system. Designed to build mathematical intuition through consistent practice.

🔥 Streak & XP System A full gamification engine with daily check-ins, 6 leveling tiers (Beginner to Legend), freeze shields, and milestone achievements that reward consistency.

💎 Diamond Economy A virtual currency system where students earn diamonds through quizzes, streaks, and challenges — then spend them in the Diamond Store on themes, mascot skins, power-ups, and exclusive badges.

🐶 Bo — Interactive Mascot Bo is a fully animated dog mascot that reacts to quiz performance, delivers motivational phrases, and celebrates milestones — making studying feel less lonely.

🔔 Real-time Notifications A complete notification system with bell icon, unread badge, sliding banners, and contextual alerts for diamonds earned, streaks, level-ups and daily reminders.

How we built it

We made a deliberate decision to build QuizForge as a pure vanilla HTML/CSS/JavaScript application — no heavy frameworks, no build tools, no unnecessary complexity. This choice allowed us to ship faster, debug easier, and keep the codebase accessible to any developer.

Frontend Architecture:

  • Vanilla JS with modular files (api.js, ui.js, main.js, quiz.js) — each with a single clear responsibility
  • CSS custom properties (variables) for theming — enabling dark mode, Galaxy theme, and Sakura theme with zero JavaScript
  • Intersection Observer API for scroll-triggered reveal animations
  • PDF.js (Mozilla) for client-side PDF text extraction — no file ever leaves the user's browser

AI Layer:

  • Groq API with LLaMA 3.3 70B for all AI features — chosen for its exceptional speed (typically under 1 second for quiz generation)
  • Carefully engineered JSON-mode prompts that guarantee structured output for questions, flashcards, summaries and exam questions
  • Rex tutor maintains full conversation history for contextual multi-turn dialogue

Backend & Database:

  • Supabase for authentication (email/password with RLS), user profiles, quiz results, diamonds, streaks, owned items and preferences
  • Row Level Security on every table — users can only access their own data
  • Auto-trigger on signup that initializes all user data (3,000 welcome diamonds, streak, preferences)

Deployment:

  • Vercel with automatic deployments on every GitHub push
  • Environment variables for all API keys — zero secrets in the codebase

Modules built: diamonds.js · streak.js · store.js · preferences.js · notifications.js · mascot.js · ui.js · api.js · main.js · quiz.js — 10 independent, composable modules

Challenges we ran into

1. GitHub Secret Scanning Three times during development, GitHub's secret scanning blocked our pushes because API keys accidentally ended up in committed files. We had to use git filter-branch to rewrite the entire commit history. This was painful but taught us the importance of a proper secrets management workflow from day one.

2. PDF Text Extraction Quality Not all PDFs are created equal. Scanned PDFs (image-based) return no extractable text — only OCR could solve that. We had to build clear user feedback for this case and limit support to text-based PDFs. We also discovered that PDF.js's worker must be loaded asynchronously, which caused race conditions we had to carefully handle.

3. Groq JSON Reliability LLMs don't always return perfectly formatted JSON. We encountered edge cases where the model added markdown code fences, trailing commas, or extra explanation text around the JSON object. We built a robust cleaning pipeline that strips fences, trims whitespace, and falls back gracefully when parsing fails.

4. Supabase RLS Complexity Row Level Security is powerful but subtle. We spent significant time debugging why certain queries returned empty results — the answer was always a missing or incorrectly configured policy. We learned to always test with the anon role before assuming queries work.

5. Duplicate Guest Mode Banners The guest mode banner appeared twice on screen due to the same initialization code existing in both index.html and main.js. We solved it with a window.__guestModeInit guard flag and a single source of truth pattern.

6. Real-time Without WebSockets We wanted real-time feeling without the complexity of WebSockets. We achieved this through a combination of localStorage events, polling patterns, and strategic timeouts that simulate live updates for notifications, diamond balances, and streak data.

Accomplishments that we're proud of

  • Full AI pipeline in under 1 second — from user input to rendered questions, the entire Groq API round-trip typically completes in 800ms or less
  • 10 interconnected modules — built a complete, modular JavaScript architecture without any framework
  • Zero-server PDF processing — PDFs are fully processed client-side using PDF.js, meaning no user data ever touches a third-party server beyond Supabase and Groq
  • Complete gamification loop — diamonds, XP, levels, streaks, achievements and a store all working together in a coherent economy
  • Accessibility-first design — all interactive elements have proper ARIA labels, keyboard navigation works throughout, and the app is fully responsive from 320px to 4K
  • Guest mode — complete access without registration, lowering the barrier to try the product to zero
  • Shipped 15+ pages in a single hackathon — login, register, dashboard, profile, settings, streak, diamonds, store, features, challenge, multiplayer, PDF study, results, and more
  • Infinite marquee testimonials carousel — built from scratch with CSS animations, dual-direction rows, and edge fade effects

What we learned

Technical lessons:

  • Groq's speed advantage over other LLM providers is real and significant — for interactive applications where latency matters, it changes the UX entirely
  • Supabase's auto-generated Row Level Security is production-ready from day one — you don't need a custom backend for most CRUD applications
  • CSS custom properties are underrated for theming — we implemented 4 complete themes (light, dark, galaxy, forest) with zero JavaScript by simply swapping variable values
  • PDF.js is remarkably powerful for client-side document processing — we built the entire PDF pipeline without a single server-side dependency

Product lessons:

  • Gamification mechanics (streaks, daily bonuses, level-ups) dramatically increase the perceived value of a study app — users feel rewarded even before they've gotten academic results
  • Guest mode is not just a nice-to-have — it's a critical conversion funnel. Judges and new users need to experience the core value before committing to registration
  • The mascot (Bo) generates more emotional engagement than any feature. People remember Bo.

Team lessons:

  • Scope aggressively, then cut ruthlessly. We planned 20+ features and shipped the 15 that mattered most
  • Secrets management must be solved on day one, not after your third blocked push
  • Build modular from the start — every time we needed to add a feature, having clean module boundaries made it straightforward

What's next for QuizForge

QuizForge is not a hackathon project — it's the beginning of a real product. Here's our roadmap:

Q3 2026 — Real Multiplayer Replace the AI bot with true peer-to-peer multiplayer using Supabase Realtime subscriptions. Two students, same questions, live score updates, sub-100ms latency.

Q3 2026 — Spaced Repetition Implement the SM-2 algorithm for flashcard scheduling — the scientifically proven method used by Anki. Cards you struggle with appear more frequently; mastered cards appear less often.

Q4 2026 — Voice Mode Integrate Groq's Whisper for voice input and text-to-speech output — enabling completely hands-free study sessions while commuting, exercising, or cooking.

Q4 2026 — Classroom Mode Teachers create a class, share a code, and students join. The teacher sees real-time analytics: class accuracy by question, individual progress, knowledge gaps by topic.

Q1 2027 — Mobile App React Native application with offline support, push notifications, and native haptic feedback for flashcard interactions.

Q1 2027 — LMS Integration Google Classroom and Canvas plugins that let teachers import course materials directly into QuizForge and export results back to the gradebook.

Long-term — Adaptive Learning A personalized learning engine that analyzes each student's performance patterns and dynamically adjusts question difficulty, topic focus, and review frequency — making QuizForge the most effective study companion on the planet.

Built with ❤️ for Beyond Tomorrow Summit 2026 Stack: Groq · Supabase · Vercel · Vanilla JS · PDF.js

Built With

Share this project:

Updates