A modern, responsive React quiz application with a beautiful UI and excellent user experience.
- Responsive Design: Works perfectly on desktop, tablet, and mobile devices
- Timer Functionality: 10-minute countdown timer with automatic quiz completion
- Progress Tracking: Visual progress bar and question counter
- Interactive UI: Smooth animations and hover effects
- Score Calculation: Instant results with percentage and performance feedback
- Component Architecture: Well-organized, reusable components
- Modern Styling: Beautiful gradient backgrounds and card-based design
- Node.js (version 14 or higher)
- npm or yarn
-
Clone the repository or navigate to the project directory
-
Install dependencies:
npm install
-
Start the development server:
npm run dev
-
Open your browser and visit
http://localhost:5173
src/
├── components/
│ ├── WelcomeScreen.jsx # Welcome/landing page component
│ ├── QuizQuestion.jsx # Individual question component
│ └── QuizResults.jsx # Results display component
├── App.jsx # Main application component
├── index.css # Global styles (Tailwind CSS)
└── main.jsx # Application entry point
- Displays quiz information (number of questions, time limit)
- Beautiful gradient background with modern card design
- Start button with hover animations
- Header: Shows current question number, timer, and progress
- Progress Bar: Visual indication of quiz completion
- Question Display: Clean, readable question format
- Answer Options: Interactive radio buttons with hover effects
- Navigation: Previous/Next buttons with proper state management
- Score Display: Large percentage with color-coded feedback
- Performance Stats: Correct vs incorrect answers
- Motivational Messages: Different messages based on performance
- Restart Option: Easy way to take the quiz again
- Mobile First: Optimized for mobile devices
- Flexible Layout: Adapts to different screen sizes
- Touch Friendly: Large touch targets for mobile users
- Gradient Backgrounds: Beautiful color transitions
- Card-based Layout: Clean, modern card design
- Smooth Animations: Hover effects and transitions
- Color Coding: Intuitive color scheme for different states
- Keyboard Navigation: Full keyboard support
- Screen Reader Friendly: Proper ARIA labels and semantic HTML
- High Contrast: Readable text and color combinations
Edit the quizData
array in App.jsx
:
{
id: 6,
question: "Your question here?",
options: [
{ id: "A", text: "Option A" },
{ id: "B", text: "Option B" },
{ id: "C", text: "Option C" },
{ id: "D", text: "Option D" }
],
correctAnswer: "B"
}
The app uses Tailwind CSS for styling. You can customize:
- Colors in the gradient backgrounds
- Card designs and shadows
- Button styles and animations
- Typography and spacing
Modify the timer duration by changing the timeLeft
state initialization:
const [timeLeft, setTimeLeft] = useState(600); // 10 minutes in seconds
- React 18: Modern React with hooks
- Tailwind CSS: Utility-first CSS framework
- Vite: Fast build tool and development server
- ES6+: Modern JavaScript features
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- Mobile browsers (iOS Safari, Chrome Mobile)
npm run build
- Install Vercel CLI:
npm i -g vercel
- Run:
vercel
- Build the project:
npm run build
- Upload the
dist
folder to Netlify
- 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.
- Built with React and Tailwind CSS
- Icons from Heroicons
- Inspired by modern web design principles