A modern, feature-rich quiz application built with Next.js, TypeScript, and TailwindCSS that allows users to take timed quizzes and track their progress.
- Multiple Question Types
- Multiple choice questions with instant feedback
- Integer-based questions with numerical validation
- Timer-based Questions
- 30 seconds per question
- Visual timer with color transitions (blue → yellow → red)
- Auto-submission when time expires
- Multiple Attempts
- Unlimited quiz attempts
- Complete attempt history tracking
- View detailed results of past attempts
- Instant Feedback
- Real-time feedback on answer selection
- Color-coded responses (green for correct, red for incorrect)
- Visual indicators with animations
- Display of correct answers for wrong responses
- Progress Tracking
- Current question indicator
- Time remaining visualization
- Score calculation and percentage
- Detailed performance analytics
- Comprehensive Scoreboard
- Total score and percentage
- Time taken per question
- Question-by-question breakdown
- Performance grade with feedback
- History Tracking
- All attempts saved locally
- Date and time of attempts
- Score comparison across attempts
- Detailed review of past answers
- Data Persistence
- IndexedDB implementation for offline storage
- Automatic saving of quiz attempts
- No server required
- Responsive Design
- Mobile-friendly interface
- Smooth animations and transitions
- Accessible on all devices
- Modern UI/UX
- Clean and intuitive interface
- Visual feedback and animations
- Progress indicators
- Color-coded states
- Node.js 18+ installed
- npm or yarn package manager
-
Clone the repository:
git clone <repository-url> cd quiz-platform
-
Install dependencies:
npm install # or yarn install -
Run the development server:
npm run dev # or yarn dev -
Open http://localhost:3000 in your browser to start the quiz.
🛠️ Technologies Used
< 75E3 a id="user-content-️-technologies-used" class="anchor" aria-label="Permalink: 🛠️ Technologies Used" href="#️-technologies-used">- Next.js 14 - React framework for production
- TypeScript - Static type checking
- TailwindCSS - Utility-first CSS framework
- DaisyUI - Component library for Tailwind
- IndexedDB - Browser-based storage
- Heroicons - Beautiful icons
- UUID - Unique identifier generation
The application is deployed on Vercel and can be accessed at: Quiz Platform
To deploy your own instance:
- Fork this repository
- Create a new project on Vercel
- Connect your forked repository
- Deploy with default settings
-
Quiz Creation & Management
- ✅ Display list of questions
- ✅ Support multiple attempts
- ✅ Show attempt history
-
User Interaction
- ✅ Instant feedback on answers
- ✅ Timer-based questions (30 seconds each)
- ✅ Visual progress tracking
-
Progress Tracking
- ✅ Detailed scoreboard
- ✅ Time tracking per question
- ✅ Performance analytics
-
Bonus Features
- ✅ IndexedDB implementation
- ✅ Responsive design
- ✅ Modern UI/UX
- ✅ Offline functionality
-
Code Quality
- ✅ Modular component structure
- ✅ Clean and maintainable code
- ✅ TypeScript type safety
- ✅ Proper error handling
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
The application uses a carefully selected color palette:
- Primary (Blue): For main actions and UI elements
- Success (Green): For correct answers and positive feedback
- Error (Red): For incorrect answers and warnings
- Warning (Yellow): For time-sensitive notifications
- Neutral: For background and text
- Local state for quiz progress
- IndexedDB for attempt history
- Real-time timer management
- Answer validation and scoring
- User authentication
- Custom quiz creation
- Social sharing
- Performance analytics
- Leaderboards