https://github.com/ashwin-s-nambiar/quizzme
QuizzMe! - A quiz taking platform with questions from Open Trivia DB.
https://github.com/ashwin-s-nambiar/quizzme
api css3 html-entities html5 javascript nanoid opentrivia-api opentriviadb quizapp react react-hooks trivia-quiz-game vite
Last synced: 3 months ago
JSON representation
QuizzMe! - A quiz taking platform with questions from Open Trivia DB.
- Host: GitHub
- URL: https://github.com/ashwin-s-nambiar/quizzme
- Owner: Ashwin-S-Nambiar
- License: mit
- Created: 2024-10-16T05:53:33.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-02-08T08:04:36.000Z (4 months ago)
- Last Synced: 2025-02-08T09:19:43.571Z (4 months ago)
- Topics: api, css3, html-entities, html5, javascript, nanoid, opentrivia-api, opentriviadb, quizapp, react, react-hooks, trivia-quiz-game, vite
- Language: JavaScript
- Homepage: https://quizz-me.vercel.app
- Size: 62.3 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# QuizzMe! 💬
A quiz-taking platform that fetches questions from [Open Trivia DB](https://opentdb.com/api_config.php) and allows users to customize their quiz experience.
[Features](#-features) • [Tech Stack](#-tech-stack) • [Installation](#-installation) • [Contributing](#-contributing) • [Screenshots](#-screenshots) • [Live](#-live) • [Author](#-author)
## ✨ Features
- 🏆 **Customizable Quiz Settings** - Select category, difficulty, type, and number of questions.
- ✅ **Answer Validation** - Check answers and receive an instant score.
- 🎉 **Confetti Animation** - Celebrate perfect scores with a visual effect.
- 🌗 **Dark/Light Mode** - Toggle between themes, with preferences stored in `localStorage`.
- 📱 **Fully Responsive** - Adapts to different screen sizes seamlessly.
- 🎨 **Smooth Animations** - Enhanced user experience with fluid animations.
## 🛠 Tech Stack
### Frontend
- **[React](https://reactjs.org/)** - UI component development
- **[Vite](https://vitejs.dev/)** - Fast build tool and development server
- **[Nano ID](https://www.npmjs.com/package/nanoid)** - Unique ID generation
- **[HTML-Entities](https://www.npmjs.com/package/html-entities)** - Decode HTML entities in questions
- **[React-Use](https://www.npmjs.com/package/react-use)** - Custom React hooks
- **[React-Confetti](https://www.npmjs.com/package/react-confetti)** - Celebration animation
## 🚀 Installation
1. **Clone the repository**
```bash
git clone https://github.com/your-username/quizzme.git
cd quizzme
```
2. **Install dependencies**
```bash
npm install
```
3. **Start the development server**
```bash
npm run dev
```
**The application will be accessible at `http://localhost:5173`.**
## 🤝 Contributing
Contributions are welcome! Here's how you can help improve QuizzMe!:
1. Fork the repository
2. Create a feature branch:
```bash
git checkout -b feature/amazing-feature
```
3. Commit your changes:
```bash
git commit -m 'Add some amazing feature'
```
4. Push to the branch:
```bash
git push origin feature/amazing-feature
```
5. Open a Pull Request
## 📸 Screenshots
### **Landing Page**
### **Question Selection**
### **Quiz Questions**
### **Score Reveal**
https://github.com/user-attachments/assets/91fb544e-4143-4b62-b823-b83ab8bb8411
### **Animations**
https://github.com/user-attachments/assets/305f3d04-637e-4fa2-b516-c299e83bf50f
https://github.com/user-attachments/assets/72a4fa99-1771-4c9a-85cd-5e58a33fcc91
https://github.com/user-attachments/assets/3c16d8a6-290a-4e59-a909-abfea60f4e43
https://github.com/user-attachments/assets/4b049b95-7365-490a-a179-0a7770a1947f
https://github.com/user-attachments/assets/a146fc9e-9ac5-4aa0-a59c-83adc645e663
https://github.com/user-attachments/assets/ed5f5990-b43d-475e-a28b-1e82b891f6a1
### **Responsiveness**
#### Mobile S - 320px & Mobile M - 375px
#### Mobile L - 425px
#### Tablet - 768px
#### Laptop - 1024px
#### Laptop L - 1440px
#### 4k - 2560px
## 🌍 Live
[](https://quizz-me.vercel.app/)
## 👤 Author
### Ashwin S Nambiar
- Portfolio: [ashwin-s-nambiar.is-a.dev](https://ashwin-s-nambiar.is-a.dev/)
- GitHub: [@Ashwin-S-Nambiar](https://github.com/Ashwin-S-Nambiar)
---
Made with ❤️ by Ashwin S Nambiar