Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rakibul58/quiz-master
https://github.com/rakibul58/quiz-master
Last synced: 3 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/rakibul58/quiz-master
- Owner: rakibul58
- Created: 2022-11-29T12:41:35.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-11-27T13:47:47.000Z (about 1 month ago)
- Last Synced: 2024-11-27T14:43:35.134Z (about 1 month ago)
- Language: JavaScript
- Homepage: https://quizzmaster.netlify.app/
- Size: 2.85 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Quiz Master
## Live Site
Check out the live site: [Quiz Master](https://quizzmaster.netlify.app/)
---
## 📖 Project Description
**Quiz Master** is a dynamic quiz application that provides users with interactive quizzes. The app dynamically loads quiz topics and questions from an API, offering a seamless and engaging experience for users.
### Key Features
- **Dynamic Topic Loading**
Quiz topics are fetched dynamically from the API to provide fresh content.
- **Dynamic Quiz Pages**
Individual quizzes are loaded dynamically through unique links for each topic.
- **Real-Time Answer Feedback**
Users get instant feedback on whether their answer is correct or incorrect via toast notifications.
- **Reveal Correct Answers**
A handy eye icon allows users to reveal the correct answer for each question.
- **Custom 404 Page**
A user-friendly 404 error page ensures a better experience for invalid URLs like [https://quizzmaster.netlify.app/blogggs](https://quizzmaster.netlify.app/blogggs).
---
## 🛠️ Technologies Used
- **Frontend**: React.js
- **Styling**: Tailwind CSS
- **API Integration**: Dynamic API loading for quizzes and topics
- **Notifications**: React Toast for answer feedback
- **Routing**: React Router for dynamic and nested routes
---
## 🚀 Getting Started
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
### Prerequisites
Before you begin, ensure you have the following installed on your machine:
- Node.js (v14 or later)
- npm (v6 or later)
### Installation
1. Clone the repository:
```bash
git clone https://github.com/rakibul58/quiz-master.git
```
2. Navigate to the project directory:
```bash
cd quiz-master
```
3. Install dependencies:
```bash
npm install
```
4. Start the development server:
```bash
npm start
```
The app will run locally at [http://localhost:3000](http://localhost:3000).
---
## 🧪 Features Overview
### 🔹 Dynamic Topic Loading
The app fetches topics dynamically from a REST API, ensuring fresh and updated quiz content for users.
### 🔹 Dynamic Quiz Pages
Each quiz is accessible through a dynamic link, allowing the app to handle quizzes uniquely for every topic.
### 🔹 Real-Time Feedback
Using React Toast, users receive immediate feedback about their answers, enhancing interactivity.
### 🔹 Correct Answer Reveal
Click the eye icon to reveal the correct answer to any question, aiding in learning and self-assessment.
### 🔹 Custom 404 Page
An engaging 404 page is designed for invalid routes, ensuring users don’t encounter generic error pages.
---
## 🧑💻 Development
To contribute to this project:
1. Fork the repository.
2. Create a new branch:
```bash
git checkout -b feature/your-feature-name
```
3. Make your changes and commit them:
```bash
git commit -m "Add your message here"
```
4. Push to the branch:
```bash
git push origin feature/your-feature-name
```
5. Create a pull request.
---
## 📜 License
This project is open-source and available under the MIT License.