Step 1: Model the data and show a question

In this project you build a quiz app in React: questions one at a time, instant feedback, a score, a progress bar, a countdown timer, a review screen, and a clean final structure with components and a reducer. The code runs in the result panel (define function App() and it renders; the React hooks are already available).

Start with the data. The quiz is an array of plain objects: a question, the options, and the index of the correct answer. The UI is a function of the data: change the array and the app changes. For now just show the first question.

Run it. Add a fifth question to the array and run again: nothing else had to change. Keeping data separate from components is what makes the app easy to extend.