Country Quiz Revamp
Published Aug 1, 2023
Hi out there. This week i became tired of looking at my country-quiz game. Therefore i decided to give at new coat of paint.
This is not a small update. Most of the code has been rewritten. The site is now using React and Typescript. I have also added a new design and some animations.
The site is still hosted on the same domain name and can be found at country.koldskl.xyz.
About the game
The game is a simple quiz game. The user is presented with a flag and has to type in the name of the country.
This list of countries is fetched from the rest countries API. The API has a lot of information about each country, which i am not using.
Since it is not trivial to get the latest list of all countries. This list is cached for up to a week in the local storage.
Over 200 countries to be guessed and a (very) simple points system.
Here is a list of the improvements i have made to the site.
- Upgraded Rest Countries API to v3.1
- New design
- Animations (Framer motion)
- Vite (Quicker deployment)
- Caching of countries list to reduce API calls (Local storage)
Why React and Typescript?
Even though i love svelte and svelte kit, i quite like packages like framer-motion for creating satisfysing animations. Therefore i stuck with react for this project.
Svelte kit has a lot of similar features built-in, which i would like to explore further in the future.
Also, since this is a true single page app, there is no need for complex routing or server side rendering.
Hope you check it out!See ya. 🦉