Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cosmoart/quiz-game
🎯 Quiz/trivia game with AI generated questions, made with tailwind and the Cohere API in NextJS.
https://github.com/cosmoart/quiz-game
cohere nextjs quiz-app quiz-game trivia trivia-game web-game
Last synced: 3 days ago
JSON representation
🎯 Quiz/trivia game with AI generated questions, made with tailwind and the Cohere API in NextJS.
- Host: GitHub
- URL: https://github.com/cosmoart/quiz-game
- Owner: cosmoart
- License: mit
- Created: 2023-01-25T23:27:58.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-02-09T02:16:43.000Z (12 months ago)
- Last Synced: 2025-01-16T19:42:36.622Z (11 days ago)
- Topics: cohere, nextjs, quiz-app, quiz-game, trivia, trivia-game, web-game
- Language: JavaScript
- Homepage: https://quizi.vercel.app
- Size: 1.98 MB
- Stars: 60
- Watchers: 4
- Forks: 23
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🟥🟦 Quizi 🟨🟩
A quiz/trivia game with different modes and categories that you can select, as well as wildcards to help you. The questions are generated by artificial intelligence using the [Cohere API](https://dashboard.cohere.ai/welcome/register).
Table of contents
- [About The Project](#about-the-project)
- [Screenshots](#screenshots)
- [Built With](#built-with)
- [Getting Started](#getting-started)
- [License](#license)
- [Roadmap](#roadmap)
- [Contact](#contact)
## About The Project
Quizi is a quiz/trivia game made with with [Cohere](https://cohere.ai). You can select different game modes and topics, you also have wildcards. Cohere's AI will generate the questions and answers for you.
> **Note:** Due to Cohere's policy change (from 100 to 5 free calls) now only some questions are generated by Cohere. The rest are pre-generated.
## Screenshots
### Built With
List of the frameworks, libraries and tools used to build the project.
* [Next.js](https://nextjs.org/)
* [React.js](https://reactjs.org/)
* [Zustand](https://github.com/pmndrs/zustand) For state management
* [Cohere](https://dashboard.cohere.ai/welcome/register) For the generation of questions
* [Vercel](https://vercel.com/) For hosting
* [Tailwind CSS](https://tailwindcss.com/) For styling
* [AnimatiSS](https://xsgames.co/animatiss/) For animations (title hover, correct and wrong answer)
* [Patternpad](https://patternpad.com/editor.html) For the home background pattern
* [Figma](https://www.figma.com/) For the design
* [React icons](https://react-icons.github.io/react-icons/) For icons
* [Iconify](https://iconify.design) For the answers letters icons
* [Tabler Icons](https://tablericons.com) For the categories icons
* [Canvas confetti](https://www.npmjs.com/package/canvas-confetti) For the confetti animation
* [Vector Halftone Maker](https://halftone.xoihazard.com) For the halftone effect
## Getting Started
1. Clone or fork the repo
```sh
git clone https://github.com/cosmoart/quiz-game
```
2. Change directory to `source_code`
```sh
cd source_code
```
3. Install NPM packages
```sh
npm install
```
4. Run the project
```sh
npm run dev
```
If you are in development environment all the questions are pre-generated, if you want to use the Cohere API you have to create a `.env.local` file with the Cohere API key at `source_code` and comment the `if` in `source_code/src/helpers/getQuestions.js`. You can get one Cohere Api key [here](https://dashboard.cohere.ai/welcome/register).
The `.env.local` file should look like this:
```
COHERE_API_KEY=XXXXXXXXXXXXXXXXXX
```
## License
Distributed under the MIT License. See [`LICENSE.txt`](https://github.com/cosmoart/quiz-game/blob/main/LICENCE) for more information.
## Roadmap
- [ ] ~~Circle wipe transition~~
- [x] Add offline mode
- [x] Buttons sounds
- [x] Win and Lose sounds
- [ ] ~~Multi-language Support~~
- [ ] ~~PWA~~
- [x] Personalize the game over screen for infinite mode
- [ ] ~~Personalize error page for API limit exceeded~~
## Contact
- My website - [cosmoart.vercel.app](https://cosmoart.vercel.app)
- Twitter - [@CosmoArt0](https://twitter.com/cosmoart0)
- Instagram - [@cosmo_art0](https://www.instagram.com/cosmo_art0/)