An interactive quiz application built with React and Vite. This project tests your knowledge through a series of multiple-choice questions and showcases core React concepts like complex state management, conditional rendering, and dynamic data handling.
This is a front-end quiz application designed to demonstrate a solid understanding of how to build interactive, stateful experiences in React. The app guides the user through a series of questions, tracks their score, and presents the final result upon completion.
It's a foundational project that highlights the power of React's hooks for managing application flow and UI changes based entirely on user interaction.
- Multiple-Choice Questions: Answer questions from a predefined data set.
- Real-Time Score Tracking: The application keeps track of the user's score as they progress through the quiz.
- Progressive Flow: Users are presented with one question at a time.
- Final Score Screen: After the last question, a results screen displays the total score.
- Restart Functionality: Allows the user to easily restart the quiz from the beginning.
This project is a practical demonstration of several crucial React skills:
- Complex State Management with
useState: The app effectively uses multipleuseStatehooks to manage the current question index, the running score, and the quiz's completion status (to show the final score). - Conditional Rendering: This is the cornerstone of the application's UI. The app conditionally renders either the current question view or the final score view based on the state, providing a seamless user experience.
- Dynamic Data Display: The question text and answer options are dynamically loaded and rendered from a local data array as the user moves from one question to the next.
- Event Handling: Manages user clicks on answer options to trigger the core logic: checking for correctness, updating the score, and advancing to the next question.
- Component-Based Structure: The UI is organized into logical components, promoting reusability and clean code.
This project was built with a focused, modern front-end stack:- React: For building the user interface.
- Vite: As the build tool and development server.
- JavaScript (ES6+): For the application's logic.
- CSS: For all custom styling and layout.
Note: This is a front-end-only application. All quiz data is currently sourced from a local file.
To get a local copy up and running, follow these simple steps.
You need to have Node.js and npm installed on your machine.
- npm
npm install npm@latest -g
- Clone the repository:
git clone [https://github.com/VitorPio7/QuizTest.git](https://github.com/VitorPio7/QuizTest.git)
- Navigate to the project directory:
cd QuizTest - Install the NPM packages:
npm install
To run the app in development mode, use the following command.
npm run devThis will start the development server and open the application in your default browser, usually at http://localhost:5173.
Distributed under the MIT License. See the LICENSE file for more information.
Vitor Pio - GitHub Profile