Brainstorm Quiz App

A modern quiz application built with React, TypeScript, and Vite, featuring an elegant UI powered by shadcn/ui components.

🔗 Live Demo

Visit the live application: [https://ayokanmi-adejola-brainstorm-quiz.netlify.app/]

✨ Features

• 🎯 Interactive quiz interface with real-time feedback
• 📱 Fully responsive design for all devices
• 🎨 Modern UI with smooth animations using Framer Motion
• 📊 Real-time progress tracking and scoring
• 📈 Detailed results summary with performance analytics
• 🌗 Theme support (light/dark mode)
• ⚡ Fast performance with Vite
• 🎮 Multiple quiz categories
• 🔄 Instant feedback on answers
• 📱 Mobile-first design approach

🛠️ Tech Stack

• Frontend Framework: React 18
• Language: TypeScript
• Build Tool: Vite
• Styling: TailwindCSS
• UI Components: shadcn/ui
• Animations: Framer Motion
• Routing: React Router DOM
• State Management: React Query
• Form Handling: React Hook Form
• Validation: Zod
• UI Primitives: Radix UI

🚀 Getting Started

Prerequisites

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

Installation

1. Clone the repository:

git clone https://github.com/yourusername/brainstorm-quiz.git
cd brainstorm-quiz

2. Install dependencies:

npm install
# or
yarn

3. Start the development server:

npm run dev
# or
yarn dev

The application will be available at http://localhost:8080

📦 Build

Create a production build:

npm run build
# or
yarn build

📁 Project Structure

src/
├── components/     # Reusable UI components
│   ├── ui/        # shadcn/ui components
│   └── ...
├── hooks/         # Custom React hooks
├── lib/           # Utility functions
├── pages/         # Route components
│   ├── Index.tsx  # Home page
│   ├── Quiz.tsx   # Quiz page
│   └── Results.tsx # Results page
└── main.tsx       # Application entry point

📝 Available Scripts

• npm run dev - Start development server
• npm run build - Create production build
• npm run build:dev - Create development build
• npm run preview - Preview production build
• npm run lint - Run ESLint

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

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

📄 License

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

👨‍💻 Author

Ayokanmi Adejola

• Portfolio: [https://ayokanmi-adejola-portfolio.netlify.app/]
• LinkedIn: [https://www.linkedin.com/in/ayokanmiadejola/]

🙏 Acknowledgments

• shadcn/ui for the beautiful UI components
• Framer Motion for animations
• Netlify for hosting