A modern, brutalist-style quiz game built with React, Vite, and TailwindCSS. Challenge yourself with questions from various categories powered by the Open Trivia Database API.
- 🎨 Bold Neubrutalism Design - Thick borders, offset shadows, vibrant colors
- 🌙 Dark Mode by Default - Easy on the eyes, always
- 📚 25+ Quiz Categories - From General Knowledge to Science & Computers
- 🎯 10 Questions Per Quiz - Perfect length for a quick challenge
- 📊 Real-time Score Tracking - Watch your score update as you play
- 🏆 Persistent Highscore - Your best score saves across sessions
- ♿ Fully Accessible - Keyboard navigation, ARIA labels, screen reader support
- 📱 Responsive Design - Works beautifully on desktop and mobile
- 🚀 Fast & Lightweight - Built with Vite for instant loading
- Node.js 18+
- npm or yarn
# Clone the repository
git clone https://github.com/yourusername/quizzy.git
cd quizzy
# Install dependencies
npm install
# Start development server
npm run devVisit http://localhost:5173 to start playing!
npm run build
npm run preview- Pick Your Battle - Choose from 25+ quiz categories
- Answer Questions - 10 multiple-choice questions per quiz
- Track Your Score - See your score update in real-time
- Beat Your Record - Your highscore persists across sessions
- Play Again - Start a new quiz anytime!
- Tab - Navigate between answer options
- Enter or Space - Select an answer
- Tab + Enter - Navigate and select
- Framework: React 18+ with TypeScript
- Build Tool: Vite 5+
- Styling: TailwindCSS with custom Neubrutalism theme
- Icons: Lucide React
- API: Open Trivia Database
- State Management: React Hooks (useState, useEffect)
- Storage: Browser LocalStorage
quizzy/
├── src/
│ ├── components/ # React components
│ │ ├── App.tsx # Main app with routing
│ │ ├── Category.tsx # Category selection
│ │ ├── QuestionCard.tsx # Question display
│ │ ├── Scoreboard.tsx # Score & results
│ │ ├── Loader.tsx # Loading state
│ │ └── ErrorBoundary.tsx # Error handling
│ ├── hooks/ # Custom React hooks
│ │ └── useQuiz.ts # Quiz state management
│ ├── services/ # External services
│ │ └── api.ts # Open Trivia DB API
│ ├── utils/ # Utility functions
│ │ ├── helpers.ts # HTML decode, shuffle
│ │ └── localStorage.ts # Highscore persistence
│ ├── types/ # TypeScript types
│ │ └── index.ts
│ ├── index.css # Global styles + Neubrutalism
│ └── main.tsx # App entry point
├── public/ # Static assets
├── specs/ # Feature specifications
└── package.json
Quizzy uses a Neubrutalism design pattern characterized by:
- Bold Borders: 3-6px solid black borders everywhere
- Offset Shadows: Box shadows that translate without blur
- Vibrant Colors: Red, Cyan, Yellow, Mint for answer options
- Flat Design: No gradients, pure solid colors
- High Contrast: Black text on bright backgrounds
- Geometric Shapes: Square corners, no border radius
- Primary: Bright Green (
#00FF88) - Secondary: Purple (
#C77DFF) - Accent: Hot Pink (
#FF006E) - Destructive: Red (
#FF1744) - Background: Dark Gray (
#141414) - Foreground: White (
#FAFAFA)
Quizzy is built with accessibility in mind:
- ✅ WCAG 2.1 AA Compliant
- ✅ Keyboard Navigation - Full app navigation without mouse
- ✅ Screen Reader Support - ARIA labels and semantic HTML
- ✅ Focus Indicators - Clear visual focus states
- ✅ High Contrast - Readable text at all sizes
- ✅ Responsive Text - Scales appropriately
- ✅ Category selection with card-based UI
- ✅ 10 random questions per quiz
- ✅ One question at a time with 4 options
- ✅ Real-time score tracking
- ✅ Correct/incorrect answer highlighting
- ✅ Final results with percentage
- ✅ Play Again functionality
- ✅ Persistent highscore (localStorage)
- ✅ Loading states
- ✅ Error handling with retry
- ✅ Keyboard navigation
- ✅ ARIA labels & semantic HTML
- ✅ Responsive design
- ⏱️ Per-question timer
- 🌞 Light/Dark theme toggle
- 🎵 Sound effects
- 📈 Statistics & history
- 🎨 More themes
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Quiz questions powered by Open Trivia Database
- Icons from Lucide
- Font: Onest by Google Fonts
Created by @NiranjanPatil07
Made with ❤️ and ⚡ by the Quizzy team