Quiz Application 🎮

A fun and interactive web-based quiz application built with React, Vite, and Tailwind CSS. Test your knowledge, earn points, and enjoy sound effects and animations as you play!

👉 Live Demo (https://drive.google.com/file/d/1jra0FBXOT30ZBr7OcwRI8i0e3c2iJOXV/view?usp=sharing)

Features ✨

• Dynamic Quiz Questions: Fetch questions from an API and display them in a clean UI.
• Gamification:
  • Earn points for correct answers.
  • Visual feedback for correct (✅) and incorrect (❌) answers.
• Sound Effects:
  • Play a success sound for correct answers.
  • Play a failure sound for wrong answers.
• Timer: Each question has a 10-second timer to keep the game exciting.
• Progress Bar: Track your progress through the quiz.
• Confetti Animation: Celebrate your success with a confetti animation when you finish the quiz.
• Responsive Design: Works seamlessly on all devices.

Screenshots 📸

Technologies Used 🛠️

• React: A JavaScript library for building user interfaces.
• Vite: A fast build tool for modern web development.
• Tailwind CSS: A utility-first CSS framework for rapid UI development.
• use-sound: A React hook for playing sound effects.
• canvas-confetti: A lightweight library for confetti animations.

Installation 🚀

Follow these steps to set up the project locally:

1. Clone the repository:

   git clone https://github.com/your-username/quiz-app.git
   cd quiz-app
   

2. Install dependencies:

   npm install
   

3. Run the development server:

   npm run dev
   

4. Open the app: Visit http://localhost:5173 in your browser.

Usage 🎯

1. Start the quiz by answering the first question.
2. Select an option within the 10-second timer.
3. Earn 10 points for each correct answer.
4. After completing all questions, view your final score and celebrate with confetti! 🎉

Customization 🛠️

• API Endpoint: Replace the apiUrl in the App.jsx file with your own API endpoint.
• Sound Effects: Replace the sound files in the Sounds folder with your own.
• Styling: Modify the Tailwind CSS classes in the components to match your design preferences.

Contributing 🤝

Contributions are welcome! If you'd like to improve this project, please follow these steps:

1. Fork the repository.
2. Create a new branch (git checkout -b feature/YourFeatureName).
3. Commit your changes (git commit -m 'Add some feature').
4. Push to the branch (git push origin feature/YourFeatureName).
5. Open a pull request.

License 📄

This project is licensed under the MIT License. See the LICENSE file for details.

Acknowledgments 🙏

• Thanks to Vite for the blazing-fast development experience.
• Thanks to Tailwind CSS for making styling a breeze.
• Thanks to use-sound and canvas-confetti for adding fun interactions.

Made with ❤️ by Nitin Dwivedi
👉 GitHub Profile

This README is clean, professional, and provides all the necessary information for users and contributors. Let me know if you need further adjustments! 🚀