This project is my solution for Frontend Mentor's challenge.
This challenge is to build a website with integration of REST API to pull country data, filter, and display them (plus theme switcher).
In this project, users will 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
- Solution URL: Frontend Mentor Solution Page
- Live Site URL: Countries Website
- React js
- SCSS
- React helmet
- React router
- CSS grid
- Flexbox
There's some mechanism I forgot to add, i.e.
- animation when elements on hovered
- message when country is not found with search input
I'd like to add them when I got the time. Also, the select HTML tag for filtering isn't really great to style, because it's an element which visually depends on the user's OS device, so I will use modal with custom component in the future.
- Website - Kiflan Adli
- Frontend Mentor - @kiflanadli