Quezz is a sleek, interactive quiz app built with the latest web technologies—Next.js 14+ App Router, TypeScript, Tailwind CSS, shadcn/ui, and Framer Motion—powered by the Open Trivia DB API.
Test your knowledge, challenge your friends, and enjoy a buttery-smooth quiz experience—whether you're online or offline.
- 🚀 Blazing-fast & Modern: Built with Next.js 14+ App Router & TypeScript
- 🎨 Beautiful UI: Tailwind CSS + shadcn/ui components with polished styling
- 🎞️ Framer Motion Animations: Smooth transitions & engaging micro-interactions
- 🧩 Dynamic Quizzes: Pulls questions in real-time from Open Trivia DB
- ⚙️ Fallback/Offline Mode: Works even when the API fails (offline-first experience)
- ♿ Accessible by Design: Keyboard navigation, focus rings, screen-reader friendly
- 🧠 Categories, Difficulty, Types: Customize your quiz just the way you like it
- 📊 Scoreboard: See how you did after each round
Add screenshots or a GIF here to showcase UI (e.g.,
/public/screenshots/homepage.png)
| Tech | Role |
|---|---|
| Next.js 14+ | App Router, SSR/SSG/ISR |
| TypeScript | Type safety & dev UX |
| Tailwind CSS | Utility-first styling |
| shadcn/ui | Accessible UI components |
| Framer Motion | Animations & transitions |
| Open Trivia API | Live question fetching |
System architecture of Quezz — including API integration, fallback handling, and component structure.
flowchart TD
User[User]
Browser[Browser]
App[Nextjs App Router]
UI[UI Components]
Motion[Framer Motion]
Logic[Quiz Logic State]
API[Open Trivia API]
Fallback[Local JSON Fallback]
User --> Browser
Browser --> App
App --> UI
App --> Motion
App --> Logic
Logic --> API
Logic --> Fallback
UI --> Logic
Logic --> UI
_Generated with mermaid,
git clone https://github.com/Arknight007/quezz.git
cd quezz
pnpm install # or npm / yarn
pnpm dev # run locallyOpen http://localhost:3000 to start using the app.
Try the Live Demo or run locally using the steps above.
Customize quiz settings and hit "Start Quiz" to experience the magic.
quezz/
├── app/ # Next.js App Router pages/layouts
├── components/ # Reusable UI components (Buttons, Card, Timer, etc.)
├── lib/ # Utility functions (e.g., shuffle, fetch logic)
├── public/ # Static assets (images, fallback.json, diagrams)
├── styles/ # Global styles (tailwind.config, etc.)
├── types/ # TypeScript interfaces/types
└── ...
All questions are fetched from Open Trivia DB. You can filter by:
- Category (e.g., Science, History, Tech)
- Difficulty (
easy,medium,hard) - Type (
multiple,boolean)
If the API is unavailable, a fallback set of questions is used from a local JSON file (/lib/data/fallback.json) ensuring the quiz experience remains uninterrupted.
Pull requests are welcome! If you'd like to:
- Add more question sources (e.g., custom APIs)
- Improve animations or accessibility
- Add new game modes (timed quiz, multiplayer, etc.)
...just fork the repo and go wild! 😄
This project is licensed under the MIT License.
“Knowledge is power. But a good quiz makes it fun!”