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.

Improvements

Here is a list of the improvements i have made to the site.

• Typescript
• 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.

Screenshot

Hope you check it out!