emmanueloloke/countries

Frontend Mentor - REST Countries API with color theme switcher.

The challenge.

The challenge was to with the REST Countries API to pull country data and get it looking as close to the design as possible.

Users should be able to:

• See all countries from the API on the homepage
• Search for a country using an input field
• Filter countries by region
• Click on a country to see more detailed information on a separate page
• Click through to the border countries on the detail page
• Toggle the color scheme between light and dark mode (optional)

Building The Project.

I've just learnt NextJS and TypeScript and I'm getting better with React and Chakra-UI, so this was an opportunity to take on an ADVANCED challenge on Frontend Mentor and really put my skills to the test. It was challenging I must say, I learnt a lot of new concepts and approaches. This particular challenge had a completion rate of ~12% on Frontend Mentor at the time I attempted it, glad I'm now part of the 12% that were able to see it through to the end 😄

For this project I used:

• REACTJS as the JavaScript Frontend Library of choice so I could practice and solidify my knowledge of some important React Hooks like useState and useEffect.
• NextJS as the React Framework of choice so I could practice what I've learnt on Server Side Rendering, Route Pre Fetching and also get familiar with using it with TypeScript. I also learnt to use the getServerSideProps function.
• I used asynchronous fetchAPI to pull data from the REST Countries API and performed necessary manipulation on the data received to achieve desired results. Here I learnt more about adn improved my JavaScript skills on handling ddeply nested Objects.
• Chakra-UI was used as the UI component library of choice. It's great for creating simple, modular, and accessible React components.

Deploying The project.

The project was deployed on Vercel the creator of NextJS for a seemless and stress-free deployment process. Here is Live Link.

Sharing The solution.

• Live Link
• Frontend Mentor Solution Link
• Tweeted About it Here