https://github.com/liciacodes/country-explorer
Rest Country Listing is a web application that allows users to browse and search for countries using the REST Countries API. The app features a dark/light mode toggle for better user experience.
https://github.com/liciacodes/country-explorer
react-router reactjs rest-api tailwindcss
Last synced: 3 months ago
JSON representation
Rest Country Listing is a web application that allows users to browse and search for countries using the REST Countries API. The app features a dark/light mode toggle for better user experience.
- Host: GitHub
- URL: https://github.com/liciacodes/country-explorer
- Owner: Liciacodes
- Created: 2025-02-26T21:40:52.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2025-03-05T21:49:43.000Z (over 1 year ago)
- Last Synced: 2025-03-10T20:47:24.119Z (over 1 year ago)
- Topics: react-router, reactjs, rest-api, tailwindcss
- Language: TypeScript
- Homepage: https://rest-country-listing-with-color-theme.netlify.app/
- Size: 728 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend Mentor - REST Countries API with Color Theme Switcher Solution
This is a solution to the REST Countries API with color theme switcher challenge on Frontend Mentor. Frontend Mentor challenges help improve coding skills by building realistic projects.
## Table of contents
Overview
- The Challenge
- Screenshot
- Links
- My Process
- Built With
- What I Learned
- Continued Development
- Useful Resources
- Author
- Acknowledgments
## Overview
## The Challenge
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
### Screenshot
### Light Mode
### Dark Mode
### Links
- Solution URL: https://www.frontendmentor.io/challenges/rest-countries-api-with-color-theme-switcher-5cacc469fec04111f7b848ca?tab=solutions
- Live Site URL: https://rest-country-listing-with-color-theme.netlify.app/
## My Process
### Built With
- Semantic HTML5 markup
- Tailwind CSS for styling
- Flexbox & Grid for layout
- Mobile-first workflow
- React - JavaScript library
- React Router - For navigation
- REST Countries API - API for fetching country data
- React Icons - For dark mode toggle and navigation icons
### What I Learned
While working on this project, I learned how to:
- Implement dark mode using React state and Tailwind CSS
- Manage dynamic routes with react-router-dom
- Fetch and display data from an external API
- Use useParams to get dynamic URL segments
- Optimize UI components using reusable components like CountryCard
Example Code for Dark Mode Toggle:
```jsx
const [darkMode, setDarkMode] = useState(false);
return (
);
```
### Continued Development
- Implement a loading state while fetching data
- Add animations for better user experience
### Useful Resources
- Tailwind CSS Docs - Helped with styling efficiently.
- React Router Docs - Helped in setting up navigation and dynamic routes.
- REST Countries API - Official API documentation.
### Author
- Website - feliciaudosen.com
- Frontend Mentor - @Liciacodes
- GitHub - @Liciacodes
- Twitter - @liciacodes_
### Acknowledgments
Special thanks to Frontend Mentor for providing great challenges and helping developers improve their skills. Also, thanks to the Tailwind and React communities for their extensive documentation and resources.