# Quiz Challenge App

A modern, interactive quiz application built with React and TypeScript. Test your knowledge across various topics with timed questions, track your progress, and compete on the leaderboard!

## Features

### 🎯 Core Functionality
- **Multiple Choice Questions**: 10 engaging questions across different topics
- **Timer System**: 30-second countdown for each question with visual warnings
- **Real-time Scoring**: Instant feedback and score tracking
- **Answer Review**: Detailed explanations for all answers after completion

### 🏆 Competitive Elements
- **Leaderboard**: Local storage-based ranking system
- **Performance Metrics**: Track accuracy percentage and completion time
- **Score Saving**: Save your best scores with custom names
- **Historical Data**: View past performance and compare results

### 🎨 Modern UI/UX
- **Dark Theme**: Sleek dark interface with purple accent colors
- **Responsive Design**: Works seamlessly on all device sizes
- **Smooth Animations**: Fluid transitions and hover effects
- **Visual Feedback**: Color-coded answers and progress indicators
- **Intuitive Navigation**: Easy-to-use interface with clear action buttons

### 📊 Progress Tracking
- **Question Progress**: Visual progress bar showing completion status
- **Time Alerts**: Color-coded timer warnings for urgent situations
- **Answer States**: Clear indication of selected, correct, and incorrect answers
- **Performance Summary**: Comprehensive results with detailed breakdowns

## How to Run

### Prerequisites
- Node.js (version 16 or higher)
- npm or yarn package manager

### Installation & Setup

1. **Clone the repository**
   ```bash
   git clone <repository-url>
   cd quiz-challenge-app
   ```

2. **Install dependencies**
   ```bash
   npm install
   ```

3. **Start the development server**
   ```bash
   npm run dev
   ```

4. **Open your browser**
   Navigate to `http://localhost:8080` to start using the quiz app

### Building for Production

```bash
# Build the application
npm run build

# Preview the production build
npm run preview
```

## Technologies Used

- **React 18** - Component-based UI framework
- **TypeScript** - Type-safe JavaScript development
- **Vite** - Fast build tool and development server
- **Tailwind CSS** - Utility-first CSS framework
- **shadcn/ui** - Modern component library
- **Lucide React** - Beautiful SVG icons
- **Local Storage** - Client-side data persistence

## Project Structure

```
src/
├── components/          # React components
│   ├── QuizApp.tsx     # Main application component
│   ├── QuizQuestion.tsx # Individual question display
│   ├── QuizResults.tsx # Results and review screen
│   └── Leaderboard.tsx # Ranking and scores display
├── data/
│   └── quizData.ts     # Question database
├── pages/
│   └── Index.tsx       # Main page component
└── styles/
    └── index.css       # Global styles and design system
```

## Contributing

Feel free to contribute to this project by:

1. Adding more questions to the quiz database
2. Implementing new features (categories, difficulty levels, etc.)
3. Improving the UI/UX design
4. Optimizing performance
5. Adding new game modes

## License

This project is open source and available under the MIT License.