Quiz App

Overview

This is a web-based quiz application with gamification , designed to provide an interactive quiz experience. The application fetches quiz data from the provided API endpoint and presents multiple-choice questions to the user. Upon completion, a summary of results, including total points scored, is displayed.I used react framework for the developement and I access the API data using axios if axios could not get the data i gave an mock data to the app to be fail free.

Features

• Start Quiz: Users can begin the quiz with a click.
• Multiple-Choice Questions: Each question presents multiple answer options.
• Real-Time Score Calculation: Points are awarded based on correct answers.
• Summary Screen: Displays total points scored at the end.
• Gamification Elements: Timers and animations.
• Responsive Design: The quiz app can support Laptop and mobiles.

Technologies Used

• Frontend Framework: React.js
• Styling: CSS
• Data Fetching: Fetch API/Axios

API Integration

The quiz questions are fetched from the following endpoint:

https://api.jsonserve.com/Uw5CrX

Error Handling

• Handles API errors gracefully with fallback messages.
• Displays loading indicators while fetching data.
• If the Data cannot be fetched then it use an mock data copied from the given URL.

Installation and Setup

Prerequisites

• Node.js and npm/yarn installed

Steps to Run the Project

1. Clone the repository:

   git clone https://github.com/Bala-kumaran-S/Quiz-app

2. Navigate to the project folder:

   cd quiz-app

3. Install dependencies:

   npm install  # or yarn install

4. Start the development server:

   npm start 

5. Open the browser and go to:

   http://localhost:3000
   

Screenshots & Demo

React.App.-.Google.Chrome.2025-02-01.16-59-32.mp4

License

This project is licensed under the MIT License.