This is a solution to the Rest Countries API with color theme switcher. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Note: Delete this note and update the table of contents based on what sections you keep.
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
This project is build with Next.js and Styled Components. The REST Countries API was used to fetch the data.
- Semantic HTML5 markup - as much as possible
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- Countries API - API for fetching data
- React - JS library
- Next.js - React framework
- Styled Components - For styles
- Working and optimizing images isn't always as easy and straight forward. This project was a good opportunity to learn more about it. I learned a lot about NextJS Image component. However, I didn't use it to its full potential. I will come back and improve this project once I learn more about it.
- This application is built on Next.js and Styled Components. I want to continue learning and improving my skills in these technologies. I want to learn more about the best practices and how to optimize the application. The data fetching utilizes Server Side Generation SSG. I figured as I learn this deeper I will come back and improve and iterate on this project. Once NextJS 13 is stable I will migrate the project to it.
- Flickering issue - This article is used to fix the flickering issue when using styled-components in Next.js 12+. The main issue was that the styles were being rendered on the server and then on the client. This caused the flickering issue.
- Website - Ahmed Abdelaal
- Frontend Mentor - @shrki416