QuizMaster Pro
Tech Stack
Overview
QuizMaster Pro is an interactive quiz application built with vanilla JavaScript — no frameworks, no build tools, just clean HTML/CSS/JS. The app supports multiple question types (multiple choice, true/false, and fill-in-the-blank), timed questions with a visual countdown, score tracking with a persistent high-score leaderboard using localStorage, and end-of-quiz summary with correct/incorrect breakdowns. The questions are organized by category and difficulty, with randomization to prevent repeat quizzes. The UI is fully responsive and features smooth CSS transitions for question changes, a progress bar, and animated score reveals. Deployed on Netlify with continuous deployment from the GitHub repo. This project demonstrates that you can build polished, interactive web experiences without any JavaScript framework.
Challenges
- •Managing complex quiz state (current question, score, timer, answer history) without a state management library or framework
- •Implementing smooth transitions between questions without React-style virtual DOM diffing — direct DOM manipulation needs careful handling to avoid flicker
Solutions
- •Designed a simple state machine pattern with a central quiz state object and render functions that read from it, effectively implementing a lightweight reactive pattern in vanilla JS
- •Used CSS opacity and transform transitions with requestAnimationFrame timing to create smooth question fade-out/fade-in effects, with DOM updates happening during the opacity:0 phase to prevent visual flicker
Results
Interactive quiz app deployed on Netlify