GeoBorders

I've just completed a front-end coding challenge from @frontendmentor! 🎉.You can see my solution here: https://www.frontendmentor.io/solutions/geoborders-41vKW7Z3Vi. Any suggestions on how I can improve are welcome!

Completing this challenge was no small feat. While the challenge was not complex it helped refresh my frontend skills while still allowing me to interact with real-world APIs which needless to say had a complex data structure. Enough with the intro 😊What does GeoBorders bring along?

Tech Stack

1. Frontend

   1. Next.js

   2. Typescript

   3. TailwindCSS

   4. Shadcn

   5. Lucide React

   6. Millify

2. Maps

   1. GoogleMaps

   2. OpenStreetMaps

3. APIs

   1. Rest Countries API

4. Testing

   1. Postman - API Testing

   2. Lighthouse - Accessibility testing

Features

1. View countries - Users can view a list of all countries in a scrollable screen

2. Search - Users can search countries by their name

3. Filter - Users can filter the list of all countries by their region

4. Maps Integrations - Users can see where each country is located in the globe

   1. GoogleMaps

   2. OpenStreetMaps

   3. Leaflet.js

Take-home

Achievement

I was most excited by the chances to consume a real-life API. Fetching data - with a complex structure and rendering to the user, allowed me to exercise my skills in DOM Manipulation, conditional rendering and array manipulation.

Challenges

I had an issue with theme switching. Theme switching being a client-side concept threw me into the rabbit hole of hydration. The system (on the server side) could not understand what window === undefined meant. The solution for this was to restrict theme change unless and until mounting is successful. In the attempt to incorporate maps, I did realize that the location Marker in React Leaflet https://react-leaflet.js.org/docs/ was not showing. A search on this pointed out that it is a common problem in Next.js. Trying to customize the marker only proved more stubborn as I quickly realized that I had set SSR (Browser-Only feature) to true - Had to disable this.