Skip to content
Submitted 26 days ago

Countries Explorer with Color Theme Switcher - Vue, TS and Bootstrap

bootstrap, vue, pinia, typescript
LVL 3
@nodegreecode
A solution to the REST Countries API with color theme switcher challenge

Solution retrospective


What are you most proud of, and what would you do differently next time?

I’m really happy to have finished this Countries Explorer app, which fetches data from the REST Countries API. This is my first larger project built with TypeScript, and it helped me understand how real-world applications are structured.

Using the REST Countries Typed API package was one of the biggest challenges for me. At first, working with strict types, interfaces, and API responses felt overwhelming, especially when handling optional fields and nested data. However, by reading the documentation carefully, experimenting, and debugging step by step, I was able to overcome these difficulties and make the data handling more reliable and type-safe.

Through this project, I improved my understanding of TypeScript, API integration, and state management, as well as writing cleaner and more maintainable code. I also learned how to better organize components, manage asynchronous data fetching, and handle loading and error states.

Overall, this project boosted my confidence and showed me that even complex challenges can be solved with persistence and practice. It motivates me to continue building larger projects and further improve my skills in TypeScript and modern frontend development.

What challenges did you encounter, and how did you overcome them?

Using the REST Countries Typed API package was challenging, especially at the beginning, because working with strict TypeScript types and complex API responses required more attention and planning. In addition to that, making the application run smoothly pushed me to learn and apply data prefetching techniques so that country data could be loaded in advance and the user experience would feel faster and more responsive.

Another challenge was fetching data for individual countries. Handling dynamic requests, passing the correct parameters, and ensuring that each country’s data was fetched efficiently and displayed correctly took time to understand. Managing these asynchronous operations while keeping everything type-safe in TypeScript required careful debugging and testing.

Code
Loading...

Please log in to post a comment

Log in

Community feedback

No feedback yet. Be the first to give feedback on nodegreecode’s solution.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord