https://github.com/gonferreyra/country-quiz

https://github.com/gonferreyra/country-quiz

context-api reactjs redux-toolkit tanstack-query typescript zustand

Last synced: about 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/gonferreyra/country-quiz
• Owner: gonferreyra
• Created: 2024-08-03T21:02:46.000Z (5 months ago)
• Default Branch: main
• Last Pushed: 2024-08-12T14:47:07.000Z (5 months ago)
• Last Synced: 2024-11-24T06:14:15.620Z (about 2 months ago)
• Topics: context-api, reactjs, redux-toolkit, tanstack-query, typescript, zustand
• Language: TypeScript
• Homepage:
• Size: 188 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Country Quiz Game

## Challenge

Most of the time, API is optimized for displaying a set of data, but other times, we need to modify the data and use it for our purpose. In this challenge, you will work with country API and build a country quiz app.

User Stories:

- Create a country quiz that matches the given design.

- By default, generate 10 questions about countries with the given API.

- In each question, users should see 4 options.

- When users select an answer, they should get the correct answer immediately with according indicators in the design.

- User can navigate to any questions.

- When users answer all 10 questions, they should see a congratulations page with the result and choose to play again.

- Deploy the solution and submit Repository URL and Demo URL.

## Table of Contents

- [Country Quiz Game](#country-quiz-game)

  - [Challenge](#challenge)

  - [Table of Contents](#table-of-contents)

  - [Solution](#solution)

    - [Demo](#demo)

    - [Build With](#build-with)

  - [How To Use](#how-to-use)

## Solution

### Demo

The site is hosted [here](***) - Work in progress-

### Build With

The technologies used for this application were React with Typescript. Tailwind was used for styling. React-Query to retrieve data from the API with caching.

Global states are managed through ContextApi in the first version, Zustand in the second -Work in progress-, and Redux in the third. -Work in progress- (separated into different branches)

## How To Use

To clone and run this application, you'll need [Git](https://git-scm.com) and [yarn](https://yarnpkg.com/). From your command line:

```bash

# Clone this repository

$ git clone https://github.com/gonferreyra/country-quiz.git

# Install dependencies

$ npm install

# Run the app

$ npm run dev

```