Country lookup app built with React, TypeScript and React Router

Hi! It's been a while since my last solution since I got busy with job hunting, but now I'm back.

I used TypeScript for this solution to get better at it (motivated by a previously flunked job assessment that required TS). At first I was unsure of the benefits of the extra code, but later on I've come to love the type hints that VS Code gives when hovering over a variable or function. Less guesswork = more predictable code.

I also used React Router, specifically the new v6.4 data APIs, which required a bit of departure from the usual React way of using useState and useEffect for data storing and fetching. In fact, I'm currently using the sample data.json provided in the starter files while I'm trying to figure out the best way to integrate API calls with React Router loaders. I'm currently looking into React Query, but any thoughts on how to go about this are most welcome.

That said, I have already set up a data structure via a Country class that can consume the response data from REST Countries API and send it as props to various components.

As for styling, I used a combination of CUBE CSS for the overall methodology and Tailwind for utility classes and implementing dark mode.

Alright, that's all for now. Cheers! ☺️