https://github.com/rahul-chakradhari/devquest

https://github.com/rahul-chakradhari/devquest

Last synced: 4 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/rahul-chakradhari/devquest
• Owner: rahul-chakradhari
• Created: 2025-02-23T12:54:50.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2025-02-23T13:50:55.000Z (4 months ago)
• Last Synced: 2025-02-23T14:31:56.785Z (4 months ago)
• Language: JavaScript
• Size: 0 Bytes
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        

## ReportResources 

##

# DevQuest Quiz Master

## Theme

**Theme 2: ExamEase – Interactive Quiz & Assessment System**

## Sections as per Requirement

### Home

![Image](https://github.com/user-attachments/assets/b52eff32-c7f1-4618-a509-231956e25a8a)

### About

![Image](https://github.com/user-attachments/assets/3d27f312-f93b-4bbe-8c9d-9338fa693715)

### Quiz

![Image](https://github.com/user-attachments/assets/08efba8a-55b3-4570-bf67-9b535da01816)

### Resources

![Image](https://github.com/user-attachments/assets/5a8162a8-c274-4744-ac14-0d743a548167)

- **Added video lectures** to enhance learning.

- **Integrated external resources** such as study materials and practice questions.

- **Search and filter functionality** to quickly find relevant learning materials.

### Rewards (Updated in Round 2)

![Image](https://github.com/user-attachments/assets/913377b7-fdc9-44f7-be3e-70c62a955f31)

- **New achievement system:** Users earn badges based on performance.

- **Leaderboard integration:** Displays top scorers.

- **Bonus rewards:** Extra points for consistent participation.

- **Certificate generation:** Auto-generates certificates for top performers.

## Features Implemented

- Dynamic quiz with multiple-choice questions.

- Real-time progress tracking with a progress bar.

- Countdown timer for each question.

- Navigation between previous and next questions.

- Score calculation and final performance analysis.

- User feedback based on quiz results.

- Responsive UI for different screen sizes.

- Easy restart option after quiz completion.

- **(Round 2) Enhanced Rewards System** with leaderboards and certificates.

- **(Round 2) Advanced Resources Section** with video lectures and study materials.

## Design Approach

The application was designed using the **MERN stack (MongoDB, Express.js, React, Node.js)**. The frontend is built using **React.js** with components for better modularity, while styling is handled using **Tailwind CSS** for a modern look. The quiz logic is implemented using **React state hooks**, ensuring a seamless user experience.

### Key Design Considerations

- Minimalistic UI for user-friendly interaction.

- Efficient state management using React hooks.

- Optimized component structure for scalability.

- Responsive design for mobile and desktop compatibility.

## How to Run the Project

### Prerequisites

- Install **Node.js** and **npm (Node Package Manager)**.

### Steps to Run

1. Clone the repository from GitHub:

   ```sh

   git clone https://github.com/rahul-chakradhari/devquest.git

   cd devquest

   ```

2. Install dependencies:

   ```sh

   npm install

   ```

3. Start the development server:

   ```sh

   npm start

   ```

4. Open the project in your browser:

   ```

   http://localhost:3000

   ```

## Challenges Faced

- **Progress Bar Issues:** Ensuring real-time updates.

- **Performance Analysis:** Correctly categorizing user strengths & weaknesses.

- **State Management:** Handling quiz navigation efficiently.

- **(Round 2) Integrating Video Lectures & Study Materials:** Organizing resources for better accessibility.

- **(Round 2) Implementing a Rewards System:** Managing leaderboard updates and achievement tracking.