Build an Interactive Quiz App in React with Scoring System

Building a quiz app is one of the most exciting beginner projects to learn React. It covers essential React concepts such as state management, conditional rendering, handling user input, and building dynamic components.

In this step-by-step tutorial, you’ll learn how to build a quiz app from scratch using React. The app will display one question at a time with multiple options, track the score, and show the final result.

🎯 Features of the App

Multiple-choice questions
Option selection
Score calculation
Restart functionality
Responsive and clean design

🛠️ Step-by-Step Guide to Building the Quiz App

📁 Step 1: Set Up React App

Use the following command to create a new React app:

npx create-react-app react-quiz-app
cd react-quiz-app

Then, replace the content inside App.js or create a new component like QuizApp.js and import it into App.js.

Step 2: Prepare Quiz Data

Start by defining your quiz data. It’s an array of question objects with question, options, and answer.

const quizData = [
  {
    question: 'What is the capital of France?',
    options: ['Berlin', 'Madrid', 'Paris', 'Lisbon'],
    answer: 'Paris'
  },
  {
    question: 'Which language is used for web apps?',
    options: ['PHP', 'Python', 'JavaScript', 'All'],
    answer: 'All'
  },
  {
    question: 'Who is the founder of Microsoft?',
    options: ['Steve Jobs', 'Bill Gates', 'Mark Zuckerberg', 'Larry Page'],
    answer: 'Bill Gates'
  },
];

Step 3: Manage State with useState Hook

We'll use useState to track:

Current question index
Current score
Whether to show the final score

const [currentQuestion, setCurrentQuestion] = useState(0);
const [score, setScore] = useState(0);
const [showScore, setShowScore] = useState(false);

✅ Step 4: Handle Option Clicks

When a user clicks an option, check if it’s correct and update the score accordingly. Then move to the next question or end the quiz.

const handleAnswerOptionClick = (option) => {
  if (option === quizData[currentQuestion].answer) {
    setScore(score + 1);
  }
  const nextQuestion = currentQuestion + 1;
  if (nextQuestion < quizData.length) {
    setCurrentQuestion(nextQuestion);
  } else {
    setShowScore(true);
  }
};

Step 5: Add a Restart Function

Allow the user to reset the quiz after completing it.

const resetQuiz = () => {
  setCurrentQuestion(0);
  setScore(0);
  setShowScore(false);
};

Step 6: Build the UI with Tailwind CSS

We use Tailwind CSS for a neat and responsive layout.

Here's a breakdown:

showScore is used to conditionally render the score or the question.
Buttons are styled with hover effects.
Questions and options are dynamically rendered from the quizData array.

🧩 Complete Code (QuizApp.js)

The complete code is provided in the attached file named Quiz App React. You can import and use this component in your main App.js like this:

import React from 'react';
import QuizApp from './QuizApp';

function App() {
  return (
    <div className="App">
      <QuizApp />
    </div>
  );
}

export default App;

Final Output

When you run the app using:

npm start

You’ll get a user-friendly quiz with:

Clean layout
Interactive buttons
Instant scoring
Restart functionality

📦 Optional Enhancements

To take your app further, you can add:

Timer for each question
Difficulty levels
Fetch questions from an API
Save scores to localStorage

👩‍💻 Final Thoughts

This project is perfect for beginners looking to understand how React manages state and UI updates dynamically. By building this quiz app, you practiced key concepts including:

React components
useState hook
Conditional rendering
Event handling
Dynamic data display

It’s a practical and fun way to improve your React skills.