Country quiz
Solution for a challenge from Devchallenges.io.
Table of Contents
Overview
First, choose a region. You will be asked 10 quizzes about the countries belonging to the region you selected.
There are two types of quizzes as follows
- Questions about capital cities
- Questions about the name of the country from its flag
Built With
Base
- Node.js：20.8.0
- TypeScript：5.2.2
- React：18.2.0
- Next.js：13.5.4
Other major libraries
※Regarding the REST COUNTRIES API, the assignment guide said it was https://restcountries.eu/, but I heard that it has become a subscription API, so I used the open source version, https://restcountries.com/.
Features
This application/site was created as a submission to a DevChallenges challenge. The challenge was to build an application to complete the given user stories.
- [x] User story: I can see at least 2 types of questions: a city is the capital of.. or a flag belong to country..
- [x] User story: I can see select an answer
- [x] User story: I can see if my answer is correct or incorrect
- [x] User story: When I answer correctly, I can move on to the next question
- [x] User story: When I answer incorrectly, I can see my results and try again
- [x] User story: I can try again
How To Use
To clone and run this application, you'll need Git and Node.js (which comes with npm) installed on your computer. From your command line:
# Clone this repository
git clone git@github.com:h-yoshikawa44/country-quiz.git
or
git clone https://github.com/h-yoshikawa44/country-quiz.git
# Install dependencies
npm install
# Run the app
npm run devlearned/improved
- How to use ReturnType to get the function's return type.
- How to combine useContext and custom hooks.
- Basic usage of the REST COUNTRIES API.
Acknowledgements
- TypeScriptで関数の返り値を型に変換する(ReturnTypeを使う)
- useContextとuseStateで状態をグローバルに共有する
- React Hooks: 子コンポーネントから親の状態をレンダー時に変えたら叱られた ー Warning: Cannot update a component while rendering a different component
Contact
- Website：h-yoshikawa44.com
- GitHub：@h-yoshikawa44
- Twitter：@yoshi44_lion