🌟 React JS Quiz Application

🚀 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:

   $ git clone https://github.com/offensive-vk/ReactQuizApp.git

2. Navigate to the project directory:

   $ cd ReactQuizApp

3. Install dependencies:

   $ pnpm i

4. Run the development server:

   $ 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.

Custom Questions / Answer

You can also use your own quiz questions and answers. Have a look at the Schema.

🧑‍💻 Authors

This project was developed by Mahak & Vedansh as part of their BCA-V Semester (Full Stack) major project for Software Project Management. 🌟

🪪 License

This project is licensed under the MIT License. See the LICENSE file for details.

---

© Vedansh & Mahak 2024 - Present
Licensed under MIT

Thanks for visiting 😊