A full-stack quiz application built with React frontend and Node.js backend, featuring user authentication, quiz management, and real-time quiz taking.
- User registration and login
- JWT-based authentication with secure cookies
- Password hashing with bcrypt
- Protected routes and API endpoints
- Create custom quizzes with multiple choice questions
- Edit existing quizzes (only by quiz creator)
- Public and private quizzes (with PIN protection)
- Delete quizzes
- View quiz statistics
- Take quizzes with real-time progress tracking
- Multiple choice questions with radio button selection
- Submit answers and get instant results
- Score calculation and feedback
- User dashboard with quiz statistics
- Profile management with avatar display
- View quiz history and attempts
- Edit profile information
- Node.js with Express.js framework
- MongoDB with Mongoose ODM
- JWT for authentication
- bcrypt for password hashing
- CORS for cross-origin requests
- cookie-parser for cookie handling
- React with Vite build tool
- React Router DOM for navigation
- Native Fetch API for HTTP requests
- CSS3 with responsive design
- Component-based architecture
Quiz-app/
├── backend/
│ ├── index.js # Main server file
│ ├── package.json # Backend dependencies
│ ├── config/
│ │ └── db.js # Database configuration
│ ├── controllers/
│ │ ├── authcontroller.js # Authentication logic
│ │ ├── quizcontrol.js # Quiz CRUD operations
│ │ ├── attemptcontroller.js # Quiz attempt handling
│ │ └── usercontroller.js # User management
│ ├── models/
│ │ ├── user.js # User schema
│ │ ├── quiz.js # Quiz schema
│ │ └── attempt.js # Attempt schema
│ └── routes/
│ ├── quizroutes.js # Quiz API routes
│ ├── attemptroutes.js # Attempt API routes
│ └── userroutes.js # User API routes
└── frontend/
├── package.json # Frontend dependencies
├── vite.config.js # Vite configuration
├── index.html # HTML template
├── src/
│ ├── App.jsx # Main React component
│ ├── App.css # Global styles
│ ├── main.jsx # React entry point
│ ├── components/
│ │ └── Navbar.jsx # Navigation component
│ └── pages/
│ ├── Home.jsx # Landing page
│ ├── Login.jsx # Login form
│ ├── Register.jsx # Registration form
│ ├── Dashboard.jsx # User dashboard
│ ├── QuizList.jsx # Browse quizzes
│ ├── QuizCreate.jsx # Create new quiz
│ ├── QuizEdit.jsx # Edit existing quiz
│ ├── QuizTake.jsx # Take quiz interface
│ └── Profile.jsx # User profile
└── public/
└── vite.svg # App icon
- Node.js (v14 or higher)
- MongoDB (local installation or MongoDB Atlas)
- npm or yarn package manager
- Navigate to the backend directory:
cd backend- Install dependencies:
npm install- Create a
.envfile in the backend directory:
MONGODB_URI=mongodb://127.0.0.1:27017/quizapp
JWT_SECRET=your_jwt_secret_key_here
PORT=3451- Start the backend server:
npm startThe backend will run on http://localhost:3451
- Navigate to the frontend directory:
cd frontend- Install dependencies:
npm install- Start the development server:
npm run devThe frontend will run on http://localhost:5173
Make sure MongoDB is running on your system. The application will automatically create the quizapp database and required collections.
POST /register- User registrationPOST /login- User loginPOST /logout- User logout
GET /quizzes- Get all public quizzesGET /quizzes/:id- Get specific quizPOST /quizzes- Create new quiz (authenticated)PUT /quizzes/:id- Update quiz (authenticated, owner only)DELETE /quizzes/:id- Delete quiz (authenticated, owner only)POST /quizzes/:id/access- Access private quiz with PIN
POST /attempts/submit- Submit quiz attemptGET /attempts/user/:userId- Get user's attemptsGET /attempts/quiz/:quizId- Get quiz attempts (owner only)
GET /users/profile- Get user profilePUT /users/profile- Update user profile
- Register/Login to your account
- Navigate to "Create Quiz" from the dashboard
- Fill in quiz details (title, description)
- Add questions with multiple choice options
- Mark the correct answer for each question
- Optionally make the quiz private with a PIN
- Submit to create the quiz
- Browse available quizzes from "Browse Quizzes"
- Click "Take Quiz" on any quiz
- If private, enter the required PIN
- Answer all questions (progress bar shows completion)
- Submit to see your results
- View your created quizzes from the dashboard
- Edit or delete quizzes you've created
- View attempt statistics for your quizzes
- Monitor quiz performance and user engagement
- Secure JWT tokens stored in httpOnly cookies
- Password hashing using bcrypt with salt rounds
- Automatic token refresh and session management
- Protected routes for authenticated users only
- Dynamic question addition/removal
- Multiple choice options (4 per question)
- Radio button selection for correct answers
- Form validation for required fields
- Private quiz PIN protection
- Real-time progress tracking
- Question navigation
- Answer persistence during session
- Submit button enabled only when all questions answered
- Instant score calculation and feedback
- Mobile-first CSS approach
- Flexible grid layouts
- Touch-friendly interface elements
- Cross-device compatibility
- Backend runs on port 3451 (changed from 5000 due to macOS AirPlay conflict)
- Frontend runs on port 5173 (Vite default)
- MongoDB runs on default port 27017
- Comprehensive error messages for API failures
- Form validation with user-friendly feedback
- Network error handling with retry mechanisms
- MongoDB connection error handling
- CORS configuration for cross-origin requests
- JWT secret key for token signing
- Password hashing before database storage
- httpOnly cookies to prevent XSS attacks
- Fork the repository
- Create a feature branch
- Make your changes
- Test thoroughly
- Submit a pull request
This project is open source and available under the MIT License.
For issues, questions, or contributions, please open an issue in the repository or contact the development team.