Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/debski-patrick/quiz-game
🎴 Quizi is a quiz/trivia game made with with Cohere AI. You can select different game modes and topics, you also have wildcards.
https://github.com/debski-patrick/quiz-game
animatecss cohere figma frontend-mentor nextjs react-icons reactjs tailwindcss vercel zustand
Last synced: 18 days ago
JSON representation
🎴 Quizi is a quiz/trivia game made with with Cohere AI. You can select different game modes and topics, you also have wildcards.
- Host: GitHub
- URL: https://github.com/debski-patrick/quiz-game
- Owner: debski-patrick
- License: mit
- Created: 2024-03-30T04:43:47.000Z (11 months ago)
- Default Branch: master
- Last Pushed: 2024-03-30T04:47:18.000Z (11 months ago)
- Last Synced: 2025-01-09T06:43:40.584Z (about 1 month ago)
- Topics: animatecss, cohere, figma, frontend-mentor, nextjs, react-icons, reactjs, tailwindcss, vercel, zustand
- Language: JavaScript
- Homepage: https://quizi.vercel.app
- Size: 1.11 MB
- Stars: 2
- Watchers: 2
- Forks: 1
- 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/spatz-pearl/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/spatz-pearl/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~~