QuizzyBee is a fun and interactive quiz application built using React and Vite. It allows users to test their knowledge through multiple-choice questions with instant feedback. This project demonstrates React component-based design, state management with hooks, and modern UI styling.
✅ Multiple-Choice Questions – Dynamic quiz with options.
✅ Answer Validation – Highlights correct and wrong answers.
✅ Score Tracking – Keeps track of user’s performance.
✅ Reset & Retry – Restart quiz anytime.
✅ Responsive UI – Works smoothly on desktop and mobile.
✅ Animated Background – Pleasant gradient with smoke-like effect.
- React – Frontend library
- Vite – Fast build tool
- CSS3 – Styling & animations
- JavaScript (ES6+) – Logic and interactivity
- Clone the repository:
git clone https://github.com/ravi-kumar-chinta/QuizzyBee.gitcd QuizzyBee- Install dependencies:
npm install- Run the app in development mode:
npm run dev- The application should now be running locally, usually accessible at
http://localhost:5173/(the exact port may vary).
This project follows a component-based architecture typical of React applications.
.
├── node_modules/ # Automatically generated folder for installed dependencies
├── public/ # Static assets that are copied directly to the build folder
├── src/ # Main application source code
│ ├── assets/ # General assets (images, fonts, etc.)
│ │ └── data.js # Holds the quiz question data
│ ├── Components/ # Reusable UI components
│ │ └── Quiz/ # Contains files for the main Quiz component
│ │ ├── Quiz.css
│ │ └── Quiz.jsx
│ ├── App.jsx # Main application component
│ ├── index.css # Global styles
│ └── main.jsx # Entry point for the React application (where the App is mounted)
├── .gitignore # Specifies files/folders to be ignored by Git
├── index.html # The main HTML file where the React app is injected
├── package-lock.json # Locks dependency versions
├── package.json # Project dependencies and scripts
└── vite.config.js # Configuration file for the Vite bundler- Read the question carefully.
- Click on the correct option.
- Your score updates automatically.
- Click Next to go to the next question.
- At the end, view your total score.
- Use Reset to restart the quiz.
- Each question has 4 options, only one is correct.
- Selected answer gets highlighted (
Greenforcorrect,Redforwrong) - Score increases for each correct answer.
- Final score is displayed at the end of the quiz.
- Here’s how the app looks:
- Built a fully functional quiz app using React + Vite.
- Implemented state management, conditional rendering, and scoring system.
- Designed with a beautiful animated background to enhance UX.
Thank you for checking out QuizzyBee 🐝. Test your knowledge, challenge your friends, and have fun learning! 🚀