Basic Requirements for a Quiz App

Before we dive into coding the Quiz App, it's essential to make sure your development environment is ready and that you understand the core technologies powering the project. This module will guide you through the tools you need, along with the tech stack that makes the app work.

Basic Requirements

To successfully build and run the React Quiz App, make sure the following tools and software are installed and ready to use on your machine:

1. Node.js and npm: Node.js is the JavaScript runtime environment used to run JavaScript code outside the browser. Alongside Node.js, npm (Node Package Manager) is used to install and manage project dependencies such as React.
   To check if they are installed correctly, open your terminal or command prompt and run:

node -v

npm -v

1. Visual Studio Code (VS Code): This is a lightweight, beginner-friendly code editor used to write and manage your project files. It comes with built-in terminal support and extensions for React development.
   You can download it from https://code.visualstudio.com
2. Modern Web Browser: You’ll need a modern browser like Chrome, Firefox, or Edge to test and run your application locally. These browsers support the latest JavaScript features and tools used in this app.
3. Git (Optional): Git is a version control system that helps track changes in your code and lets you push it to GitHub. Although optional, it’s very useful when it comes to deployment and collaboration.
   To check if Git is installed, use the following command in your terminal:
   git --version
4. Netlify Account: You’ll use Netlify to deploy your quiz app online once it’s complete. It offers free hosting and an easy drag-and-drop deployment process.
   Visit https://www.netlify.com and sign up for a free account.

Once everything above is installed and ready, you’ll be fully equipped to begin building the app.

Tech Stack Used

This Quiz App is built using a modern and widely-used tech stack. Here’s an overview of the technologies and why they’re used:

• ReactJS (with Vite): React is a JavaScript library that allows us to create interactive user interfaces using reusable components. Vite is used for fast development builds and runs much faster than traditional tools like Create React App.
• JavaScript (ES6+): All the logic of the app is written in modern JavaScript using features like arrow functions, destructuring, template literals, and the fetch API.
• HTML and CSS: HTML provides the structure of the app’s content, while CSS is used to style the user interface. Custom fonts, layouts, and animations are applied using CSS to give a better user experience.
• Open Trivia DB API: This API provides the quiz questions for the app. Based on the category selected by the user, it returns 10 random questions with multiple-choice answers in JSON format.
• Node.js and npm: These are used to run the app locally and to install all necessary dependencies like React, Vite, and external libraries.
• Netlify: After the app is built, it’s deployed to the web using Netlify. This platform allows free and fast deployment with minimal configuration.

Input

The app takes input in two stages:

1. Category Selection: At the start, the user selects a quiz category (e.g., General Knowledge, Science, Computers). This selection determines which set of questions will be fetched from the trivia API.

1. Answer Selection: For each question displayed, the user chooses one answer out of four options. Each choice is tracked using React's useState hook and is validated against the correct answer for scoring.

Output

The output of the app includes both immediate feedback and a final result after the quiz:

• The quiz questions are displayed one by one, and after the final question, the user is taken to the results screen.
• The score is calculated based on correct answers and displayed along with the number of incorrect ones.
• A message is shown based on performance, and encouraging messages or prompts appear briefly during the quiz.
• A question counter keeps track of the user’s progress (e.g., Question 5 of 10).

Everything is rendered dynamically using React, and styled with custom CSS for a clean and responsive layout.