🧠 Quiz Master

A modern, interactive quiz application built with React, Tailwind CSS, and Framer Motion. Test your knowledge with a sleek, animated interface!

✨ Features

• 🎨 Modern UI/UX: Glassmorphism design with a dynamic gradient background.
• ⚡ Smooth Animations: Powered by framer-motion for seamless transitions between questions and results.
• ⏱️ Interactive Timer: Visual countdown timer that changes color based on urgency.
• ✅ Immediate Feedback: Instant visual cues (Green/Red) for correct and incorrect answers.
• 📊 Progress Tracking: Real-time progress bar showing your journey through the quiz.
• 🏆 Score Summary: Detailed result screen with performance-based messages.
• 🔄 Play Again: Easily restart the quiz to improve your score.

🛠️ Tech Stack

• Frontend Framework: React (via Vite)
• Styling: Tailwind CSS
• Animations: Framer Motion
• Icons: Lucide React

Screenshot

🚀 Demo You can try Quiz-App live here:

🚀 Getting Started

Follow these steps to set up the project locally.

Prerequisites

• Node.js (v14 or higher)
• npm or yarn

Installation

1. Clone the repository (or download usage):

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

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

4. Open your browser and navigate to http://localhost:5173.

📂 Project Structure

src/
├── Components/
│   ├── Questions.jsx    # Handles question logic, feedback, and progress
│   ├── Result.jsx       # Displays final score and reset option
│   ├── Timer.jsx        # Animated countdown timer component
│   └── questions.json   # JSON data file containing quiz questions
├── App.jsx              # Main layout container with global providers
├── index.css            # Global styles and Tailwind imports
└── main.jsx             # Entry point

🧩 Customization

Adding More Questions

1. Open src/Components/questions.json.

2. Add a new object to the array following this format:

   {
     "question": "Your Question Here?",
     "options": ["Option A", "Option B", "Option C", "Option D"],
     "answer": "Option A"
   }

Thanks !! ❤️