QuizWiz
An AI quiz platform that turns prompts, PDFs, and images into ready-to-play assessments, with classroom management, gamified achievements, and mastery analytics for teachers and students.
Client / Organisation
University · Web App Development
My Role
UI/UX Designer & Full-Stack Developer
Timeline
2024
Deliverables
Web app, Gemini AI integration, design system
The Brief
QuizWiz set out to take the busywork out of assessment: instead of writing quizzes by hand, a teacher describes what they want, drops in a PDF, or scans an image, and the platform returns a complete, gradeable quiz in seconds. The challenge was to wrap a powerful multi-modal AI in an interface that both educators and students could pick up without a manual.
The product spans the full loop: a marketing landing page, an instructor hub for creating classes and inviting students with shareable codes, an AI creation studio with complexity and target-grade controls, and a student side with classrooms, gamified achievements, and mastery analytics. I designed and built it end to end, from the React frontend to the Node.js backend and the Gemini integration.
The Approach
Problem & Flows
Mapped the two core journeys, teacher and student, and the moments where writing assessments by hand actually hurts, so the AI could slot into the workflow rather than bolt onto it.
Design System
Built a dark-first interface around a single purple accent, consistent cards, and a theme toggle, so the landing site, dashboards, and creation studio all read as one product.
AI Creation Studio
Designed the multi-modal generator: smart prompt, PDF upload, and image scan inputs, plus complexity and target-grade controls, all feeding one Gemini-powered pipeline.
Full-Stack Build
Implemented the React frontend and Node.js backend, wiring class management, invite codes, and analytics to REST APIs and the Gemini API for live quiz generation.
The App — Screen by Screen
The features that best show what QuizWiz does, grouped by who they serve.
AI Quiz Generation
The core engine. Feed the Intelligent Content Processor a prompt, a PDF, or an image and it turns static material into a complete, interactive quiz.
Lecture to Quiz
Drop in a recording and QuizWiz transcribes the audio, then converts a full lecture into a ready-to-play assessment on its own.
STEM-Ready
Native LaTeX rendering means equations and formulas display perfectly, so maths and science quizzes are first-class rather than an afterthought.
Master Question Bank
A searchable, AI-validated library of over 1,200 questions that instructors can browse, edit, and reuse across every class they run.
Adaptive Learning Roadmap
A guided path of modules that unlocks as students progress, showing clearly what is completed, in progress, and still locked.
AI Explanations
Every wrong answer comes with a plain-language explanation of why, plus a link to read deeper on the underlying concept.
Live Quiz Party
Real-time multiplayer quizzes let a whole class compete together, turning revision into a live, social event.
Streaks & Badges
Daily streaks and earned badges turn consistent studying into a habit, with light gamification that keeps learners coming back.
Topic Mastery Heatmap
A real-time, colour-coded map of class-wide knowledge gaps, so teachers can see exactly where students are struggling at a glance.
Integrity Monitor
Built-in proctoring flags tab-switching and checks responses against AI patterns, keeping remote assessments honest.
Real-time Collaboration
Multiple instructors can build a quiz at once, with live editing and viewing presence for large academic departments.
Developer API
A documented REST API exposes classes and quizzes, so QuizWiz slots into existing institutional systems and workflows.
designed and built solo, from the React UI to the Gemini API
Outcomes
A full-stack, multi-modal quiz generator powered by Google Gemini
Three creation modes: smart prompt, PDF upload, and image scan
A complete teacher and student loop: class creation, invite codes, and enrolment
Gamified mastery analytics and achievement badges to keep students engaged
What I Learned
The hard part of an AI feature is not the model, it is the interface that makes its output trustworthy and editable.
Designing and shipping both ends of a product teaches you exactly where the frontend and backend have to meet in the middle.