🟥🟦 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.

View Demo · Report Bug · Request Feature

About The Project

Quizi is a quiz/trivia game made with with Cohere. 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.

⬆️ Back to top

Screenshots

⬆️ Back to top

Built With

List of the frameworks, libraries and tools used to build the project.

• Next.js
• React.js
• Zustand For state management
• Cohere For the generation of questions
• Vercel For hosting
• Tailwind CSS For styling
• AnimatiSS For animations (title hover, correct and wrong answer)
• Patternpad For the home background pattern
• Figma For the design
• React icons For icons
• Iconify For the answers letters icons
• Tabler Icons For the categories icons
• Canvas confetti For the confetti animation
• Vector Halftone Maker For the halftone effect

⬆️ Back to top

Getting Started

1. Clone or fork the repo

   git clone https://github.com/cosmoart/quiz-game
   

2. Change directory to source_code

   cd source_code
   

3. Install NPM packages

   npm install
   

4. Run the project

   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.

The .env.local file should look like this:

COHERE_API_KEY=XXXXXXXXXXXXXXXXXX

⬆️ Back to top

License

Distributed under the MIT License. See LICENSE.txt for more information.

⬆️ Back to top

Roadmap

• Circle wipe transition
• Add offline mode
• Buttons sounds
• Win and Lose sounds
• Multi-language Support
• PWA
• Personalize the game over screen for infinite mode
• Personalize error page for API limit exceeded

⬆️ Back to top

Contact

• My website - cosmoart.vercel.app
• Twitter - @CosmoArt0
• Instagram - @cosmo_art0

⬆️ Back to top