Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/offensive-vk/reactquizapp
A Simple React JS Based Quiz Application with No Backend.
https://github.com/offensive-vk/reactquizapp
bootstrap jsx react react-dom
Last synced: about 1 month ago
JSON representation
A Simple React JS Based Quiz Application with No Backend.
- Host: GitHub
- URL: https://github.com/offensive-vk/reactquizapp
- Owner: offensive-vk
- License: mit
- Created: 2024-11-26T16:42:36.000Z (about 1 month ago)
- Default Branch: master
- Last Pushed: 2024-11-26T17:34:01.000Z (about 1 month ago)
- Last Synced: 2024-11-26T18:32:05.598Z (about 1 month ago)
- Topics: bootstrap, jsx, react, react-dom
- Language: JavaScript
- Homepage: https://reactjsquiz.pages.dev/
- Size: 46.9 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: license
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# 🌟 React JS Quiz App
## 🚀 Overview
The **React JS Quiz App** is a web application designed to test the knowledge of Full Stack, Frontend, Backend, and Web Developers. Built using **ReactJS** and **Vite**, this application provides a seamless and interactive quiz experience. The app features a **start page**, a **quiz interface**, and a **results page**, all styled with **Bootstrap** for a modern look.
## ✨ Features
- 📝 **Interactive Quiz**: Users can answer multiple-choice questions about React.js.
- ✅ **Real-time Feedback**: Immediate feedback on selected answers with visual indicators.
- 📊 **Score Calculation**: Users receive a score based on their performance.
- 📱 **Responsive Design**: The app is fully responsive and works on various devices.
## 🛠 Core Languages & Technologies
This app leverages the power of the following core languages and technologies:
- 🌐 **HTML**: Structure and layout of the application.
- 🎨 **CSS**: Styling, including Bootstrap for responsiveness and custom styles for uniqueness.
- ⚙️ **JavaScript**: Logic and interactivity for the quiz features.
- 🗂 **JSON**: Data format for storing quiz questions and answers.
Additionally, the app integrates these technologies:
- ⚛️ **React**: A JavaScript library for building user interfaces.
- 🌟 **Vite**: A blazing-fast development environment.
- 🖌 **Bootstrap**: A popular CSS framework for a cohesive design.
- 🔗 **React Bootstrap**: React components built with Bootstrap.
## 📂 Project Structure
- **📦 Components**: The app is divided into reusable components like `Start`, `Quiz`, and `Result`.
- **📚 Context API**: Utilizes React's Context API for seamless state management.
- **🎨 Styling**: Styled with Bootstrap and custom CSS for a polished look.
## 🔑 Key Dependencies:
- ⚛️ **React**: JavaScript library for building user interfaces.
- 🏗 **React DOM**: DOM-specific methods for React.
- 🌟 **Bootstrap**: CSS framework for responsive design.
- 🔗 **React Bootstrap**: React components built with Bootstrap.
- ⚡ **Vite**: Provides a fast and efficient development environment.
- 🚀 **pnpm**: The performant Node Package Manager for dependency management.
## 🛠 Development Dependencies:
- 🛡 **ESLint**: For identifying and fixing problems in JavaScript code.
- 🔌 **@vitejs/plugin-react**: Vite plugin for React support.
- 📘 **@types/react** and **@types/react-dom**: TypeScript definitions for React.
## ⚙️ Installation
To set up the project locally, follow these steps:
1. **Clone the repository**:
```bash
$ git clone https://github.com/offensive-vk/ReactQuizApp.git
```
2. **Navigate to the project directory**:
```bash
$ cd ReactQuizApp
```
3. **Install dependencies**:
```bash
$ pnpm i
```
4. **Run the development server**:
```bash
$ pnpm run dev
```
## 🎮 Usage
- 🟢 **Start the Quiz**: Click the "Start Quiz" button on the homepage.
- ❓ **Answer Questions**: Select an answer for each question and proceed to the next.
- 📜 **View Results**: After completing the quiz, view your score and restart if desired.
## 🖼 Crucial Files
Here are the files critical for the application's functionality:
- **📋 package.json**: Lists all dependencies and scripts.
- **⚙️ vite.config.js**: Configuration for Vite.
- **📂 src/context/dataContext.js**: Manages the state and logic for the quiz.
- **🗂 public/quiz.json**: Contains the quiz questions and answers.
## 🧑💻 Authors
This project was developed by **Mahak & Vedansh** as part of their BCA-V Semester (Full Stack) *minor project* for Software Project Management. 🌟
## 🪪 License
This project is licensed under the MIT License. See the [LICENSE](./license) file for details.
## 🌐 Get in Touch 📬
Feel free to connect if you have any questions or just want to chat about web development.
© Vedansh & Mahak 2024 - Present
Licensed under MIT
Thanks for visiting 😊