{"id":26035806,"url":"https://github.com/ryomendev/quizo-quizapp","last_synced_at":"2026-04-07T22:31:04.296Z","repository":{"id":280457746,"uuid":"942051426","full_name":"RyomenDev/Quizo-QuizApp","owner":"RyomenDev","description":"An online quiz platform built with React.js, featuring quiz creation, timed multiple-choice questions, result analysis, and authentication with Node.js, Express, and MongoDB. It ensures a responsive UI, secure authentication using JWT, and state management via Redux. 🚀","archived":false,"fork":false,"pushed_at":"2025-03-05T05:43:36.000Z","size":6379,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-05T06:27:43.887Z","etag":null,"topics":["express","jsonwebtoken","mongodb","reactjs","tailwindcss"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/RyomenDev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-03-03T13:49:53.000Z","updated_at":"2025-03-05T05:43:39.000Z","dependencies_parsed_at":"2025-03-05T06:38:25.865Z","dependency_job_id":null,"html_url":"https://github.com/RyomenDev/Quizo-QuizApp","commit_stats":null,"previous_names":["ryomendev/quizapp","ryomendev/quizo-quizapp"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RyomenDev%2FQuizo-QuizApp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RyomenDev%2FQuizo-QuizApp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RyomenDev%2FQuizo-QuizApp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RyomenDev%2FQuizo-QuizApp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RyomenDev","download_url":"https://codeload.github.com/RyomenDev/Quizo-QuizApp/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242338992,"owners_count":20111502,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["express","jsonwebtoken","mongodb","reactjs","tailwindcss"],"created_at":"2025-03-07T05:56:40.338Z","updated_at":"2026-04-07T22:31:04.267Z","avatar_url":"https://github.com/RyomenDev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🚀 \u003cu\u003eQuizo: Online Quiz Platform\u003c/u\u003e\n## Overview\n\nThe **Online Quiz Platform** is a full-stack web application designed for quiz creation, taking, and scoring. The platform provides a seamless user experience with **authentication, real-time timers, result analysis, and a practice mode**. Built using **React.js, Node.js, Express, and MongoDB**, the application ensures high performance, security, and scalability.\n\n![Image](https://github.com/user-attachments/assets/cb1bebb5-3a9c-4d5e-bcd0-71d3cb1a30bf)\n\n# Features\n\n### **Functionality**\n\n- **User Authentication**: Registration, login, and password reset functionality using JWT authentication.\n- **Quiz Management**:\n  - Create quizzes with multiple-choice questions.\n  - Add a timer to each question.\n  - Provide correct answers and explanations after the quiz.\n- **Practice Mode**: A dedicated practice page where users can attempt quizzes with real exam-like conditions.\n- **Scoring \u0026 Analysis**:\n  - Show correct and incorrect answers after quiz completion.\n  - Display final scores and performance insights.\n- **State Management**: Uses **Redux** for global state management to ensure smooth user interactions.\n\n### Authorization \u0026 Authentication\n\n- **User Registration (registerUser):** Registers users with email \u0026 password.\n- **Login with Email (loginUserWithEmail):** Allows users to log in using email \u0026 password.\n- **Password Reset (resetPassword):** Allows users to reset their password.\n- **Hashed password** before saving using **bcryptjs**\n- Ensured **strong validation** for security\n\n- optimized **JWT authentication middleware** for your application:\n\n**How It Works**\n\n- Checks if the Authorization header exists and follows `Bearer \u003ctoken\u003e` format\n- Extracts the JWT token from the header\n- Verifies the token.\n- Attaches the decoded user data to req.user for further use\n- Handles errors gracefully with appropriate status codes\n\n#### ✨ Features:\n\n- ✅ JWT verification for protected routes\n- ✅ Proper error handling\n- ✅ Modular structure\n- ✅ Timer for each question (30 seconds per question).\n- ✅ Multiple-choice selection with answer tracking.\n- ✅ Final score calculation with correct and wrong answers displayed.\n- ✅ Navigation between questions (Next/Submit button).\n- ✅ Displays number of questions and time per question.\n\n### **UI/UX Design**\n\n- **Modern and Intuitive Interface**: A clean, user-friendly interface designed with **Tailwind CSS**.\n- **Interactive Feedback**: Real-time feedback on user selections and results.\n- **Glassmorphism \u0026 Wooden Themes**: Stylish UI elements with background blur effects and custom textures.\n- **Better Shimmer Effect:** smooth skeleton while loading for visually appealing! .\n\n#### ✨ Features:\n\n- ✅ Background Image Slider\n- ✅ Dynamic Sliding Questions\n- ✅ Smooth Animations with Framer Motion\n- ✅ Beautiful Gradient \u0026 Glassmorphism UI\n- ✅ Responsive Design for All Devices\n\n### **Responsiveness**\n\n- **Mobile \u0026 Desktop Compatible**: Fully responsive design using **Tailwind CSS**.\n- **Adaptive Layouts**: Supports different screen sizes and resolutions.\n- **Optimized Performance**: Lazy loading and efficient rendering techniques to enhance user experience.\n\n### **Security Measures**\n\n- **JWT Authentication**: Secure authentication with access tokens.\n- **Input Validation**:\n\n  - **Client-side Validation**: Ensures correct data entry before sending requests.\n  - **Server-side Validation**: Prevents malicious input from being processed.\n  - **Schema-level Validation**: Enforces strict data integrity within the database.\n\n- **Error Handling**:\n  - Proper error messages and HTTP status codes.\n  - Prevents API misuse and unauthorized access.\n  \u003c!-- - **Rate Limiting \u0026 Encryption**:\n  - Rate limiting to protect against brute-force attacks.\n  - Encrypted passwords stored securely in the database. --\u003e\n\n#### ✨ Features:\n\n- ✅ Ensure proper validation before database Call.\n- ✅ Standardized lowercase email storage\n- ✅ Returned useful user details (excluding password)\n- ✅ Better error handling \u0026 debugging logs\n- ✅ Ensured password is not returned when fetching user details\n\n### ✨ Added Security Features (server):\n\n- ✅ helmet: Adds essential security headers automatically..\n- ✅ hsts (Strict Transport Security): Ensures HTTPS-only connections.\n- ✅ x-powered-by disabled: Hides Express framework info.\n- ✅ x-content-type-options: Prevents MIME-sniffing attacks.\n- ✅ x-xss-protection: Enables browser-based XSS protection.\n- ✅ referrer-policy: Restricts referrer data sharing, to limit referrer leakage.\n\n### **Code Quality**\n\n- **Modular Architecture**: Clean and maintainable codebase following best practices.\n- **Reusable Components**: Well-structured React components with PropTypes validation.\n- **Optimized API Calls**: Efficient backend handling to minimize load times.\n- **Logging \u0026 Debugging**: Console logs for debugging, structured error messages.\n\n#### ✨ Features:\n\n- ✅ prop-types validation in every component\n- ✅ Ensures correct data types and structure\n- ✅ Prevents potential runtime errors\n- ✅ Improves maintainability and debugging\n\n### **Tech Stack**\n\n- **Frontend**: React.js, Redux (State Management), Tailwind CSS\n- **Backend**: Node.js, Express.js, JSON Web Tokens\n- **Database**: MongoDB\n- **Authentication**: JWT (JSON Web Tokens), Bcrypt for Password Hashing\n\n## Installation \u0026 Setup\n\n### **Prerequisites**\n\n- Node.js installed\n- MongoDB instance running\n\n### **Steps to Run Locally**\n\n1. **Clone the Repository**:\n   ```bash\n   git clone https://github.com/RyomenDev/Quizo-QuizApp.git\n   cd Quizo-QuizApp\n   ```\n2. **Install Dependencies**:\n   ```bash\n   cd server\n   npm install  # Install backend dependencies\n   cd client\n   npm install  # Install frontend dependencies\n   ```\n3. **Configure Environment Variables**:\n   Create a `.env` file in the root and add (use .env.sample):\n   ```env\n   MONGO_URI=your-mongodb-uri\n   JWT_SECRET=your-secret-key\n   PORT=\"\"\n   ```\n4. **Run the Application**:\n   ```bash\n   cd server\n   npm run dev   # Start backend\n   cd client\n   npm run dev     # Start frontend\n   ```\n\n## Deployment\n\n- **Frontend**: Deployed on Vercel\n- **Backend**: Deployed on Vercel\n- **Database**: Hosted on MongoDB Atlas\n\n## License\n\nMIT License\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryomendev%2Fquizo-quizapp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fryomendev%2Fquizo-quizapp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryomendev%2Fquizo-quizapp/lists"}