Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/sonalisingh30/react-quiz-app

The "React Quiz App" is a dynamic and engaging web application built with React.js. This project offers a variety of features, including a complete responsive design for seamless use on different devices, a clean and intuitive user interface
https://github.com/sonalisingh30/react-quiz-app

api useeffect

Last synced: about 1 month ago
JSON representation

The "React Quiz App" is a dynamic and engaging web application built with React.js. This project offers a variety of features, including a complete responsive design for seamless use on different devices, a clean and intuitive user interface

Awesome Lists containing this project

README

        

# 🚀 React Quiz App

The "React Quiz App" is a dynamic and engaging web application built with React.js. This project offers a variety of features, including a complete responsive design for seamless use on different devices, a clean and intuitive user interface, and a timed quiz with a progress bar to track your progress.

As you answer questions, the app instantly updates your score and provides a comprehensive scorecard once the quiz is completed. The quiz also includes an automatic submission feature when the timer runs out.

# Demo

[WEBSITE-Demo](https://sonali-react-quiz-app.netlify.app)

## 🛠️Technology Used

- [React.js](https://reactjs.org/)

## 📋Project Features

- 🌐 Complete Responsive Website: This quiz app is designed to work seamlessly on various devices and screen sizes.
- 🎨 Clean and Simple User Interface: A user-friendly design for an enjoyable quiz experience.
- ⏲️ Timer for Quiz: Each quiz question is timed, adding an element of challenge and excitement.
- 📊 Progress Bar: Keep track of your quiz progress in real-time.
- 📈 Score Update: Instant feedback on your score after answering each question.
- 📜 Score Card: Get a comprehensive scorecard with your quiz results.
- ⏱️ Auto-Submission: The quiz automatically submits when the time is up.

## 📚Learning Points

- 📡 Creating a Fake API: Learn how to create and deploy a mock API and integrate it into project.
- ⚙️ State Management: Explore state management techniques using the `useReducer` hook to efficiently handle application state.
- 🔄 Fetching Data with `useEffect()`: Utilize the `useEffect` hook for fetching API data and managing timers.

## 📱Responsiveness
![ScreenShots](ScreenShots/React_Quiz_App_Responsivness.png)