Building a Modern QCM Quiz Generator with React & TypeScript

Introduction

Quizzes are a powerful tool for education, training, and engagement. In this article, I’ll walk through how I built a QCM (Multiple-Choice Question) Quiz Generator using React, TypeScript, and styled-components, featuring:

✅ Light/Dark Mode Toggle
✅ Interactive Quiz Taking & Review
✅ JSON-Based Quiz Import/Export
✅ Responsive & Accessible Design

Let’s dive into the key features and technical decisions!

🔧 Tech Stack

• React (Functional Components + Hooks)
• TypeScript (Type Safety)
• styled-components (CSS-in-JS Theming)
• LocalStorage (Theme Persistence)
• Google Fonts (Inter + Space Mono)

✨ Key Features

1. Dynamic Theming System

The app supports light/dark mode with a smooth transition effect. I used:

• ThemeProvider from styled-components
• Context API for state management
• LocalStorage to remember user preference

// ThemeContext.tsx  
const toggleTheme = () => {
  setMode((prev) => {
    const newMode = prev === 'light' ? 'dark' : 'light';
    localStorage.setItem('themeMode', newMode);
    return newMode;
  });
};

2. Interactive Quiz Interface

• Real-time answer selection
• Score calculation
• Explanation display in review mode

// Question.tsx  
<OptionItem
  $isCorrect={reviewMode && option.correct}
  $isIncorrect={reviewMode && selectedOption === index && !option.correct}
>
  {option.text}
  {reviewMode && option.explanation && (
    <ExplanationText>{option.explanation}</ExplanationText>
  )}
</OptionItem>

3. JSON-Based Quiz System

Users can upload quizzes via JSON, making it easy to share and reuse question sets.

{
  "title": "JavaScript Basics",
  "questions": [
    {
      "question": "What is closure?",
      "options": [
        { "text": "A function + its lexical scope", "correct": true },
        { "text": "A JavaScript class", "correct": false }
      ]
    }
  ]
}

🚀 Challenges & Solutions

1. Type Safety with TypeScript

Defining strict types for quizzes and themes prevented runtime errors:

interface QuizData {
  title: string;
  questions: {
    id: number;
    question: string;
    options: { text: string; correct: boolean }[];
  }[];
}

2. Smooth Theme Switching

Using CSS transitions and theme-aware components ensured a seamless UI experience.

/* GlobalStyles.ts */
* {
  transition: background-color 0.3s ease, color 0.3s ease;
}

3. Mobile Responsiveness

Flexible layouts with relative units (rem, %) and responsive padding made the app work on all devices.

💡 Lessons Learned

• TypeScript is invaluable for maintaining large-scale React apps.
• CSS-in-JS (styled-components) simplifies theming and dynamic styling.
• LocalStorage is great for simple persistence without external libraries.

🔗 Try It Yourself!

You can check out the full code on GitHub or test the live demo here.

What’s Next?

• User authentication to save quiz results
• Quiz editor for creating quizzes in-app
• More question types (True/False, matching)

Would love to hear your feedback! What features would you add? 🚀

#React #TypeScript #WebDev #Frontend #QuizApp