Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/codewithalamin/rest-countries
Explore countries worldwide: search, filter by region, and access detailed info – all in one interactive web app.
https://github.com/codewithalamin/rest-countries
country-list frontend frontend-mentor frontendmentor-challenge rest-api rest-countries-api
Last synced: 5 days ago
JSON representation
Explore countries worldwide: search, filter by region, and access detailed info – all in one interactive web app.
- Host: GitHub
- URL: https://github.com/codewithalamin/rest-countries
- Owner: CodeWithAlamin
- License: mit
- Created: 2023-10-16T17:41:30.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-08-04T12:49:39.000Z (3 months ago)
- Last Synced: 2024-10-30T10:38:27.807Z (17 days ago)
- Topics: country-list, frontend, frontend-mentor, frontendmentor-challenge, rest-api, rest-countries-api
- Language: JavaScript
- Homepage: https://rest-countries-codepapa.vercel.app
- Size: 946 KB
- Stars: 5
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
REST Countries API with color theme switcher
[🌐WebSite URL](https://rest-countries-alamin.vercel.app) ||| [Solution URL](https://www.frontendmentor.io/solutions/rest-countries-api-w-reactjs-and-tailwind-css-4lwikHyhjW)
This project is a practical exploration of React, React Router, and Redux Toolkit. It's a dynamic web application that allows users to explore and learn about countries from around the world. It's been a journey of challenges, learning, and growth, with a focus on improving my development skills and problem-solving abilities.
## Key Features
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)_
## Built with
- [React](https://reactjs.org) - A JavaScript library for building user interfaces
- [Redux Toolkit](https://redux-toolkit.js.org) - A simplified, efficient, and powerful Redux library for building state management systems
- [React Router](https://reactrouter.com/en/main) - Declarative routing for React applications
- [Tailwind CSS](https://tailwindcss.com) - Utility-first CSS framework for building any design
- HTML5
- Mobile-first workflow
- [Vite](https://vitejs.dev/) - A JavaScript module bundler and development server.
## What I Learned
Throughout this project, I encountered some interesting challenges while learning React, React Router, and Redux Toolkit.
- **Embracing Challenges:** I faced some tricky issues while working on the project, like handling complex state and integrating data. These challenges, while tough, were the moments when I learned the most.
- **Becoming a Detective:** Debugging became my new superpower. I spent a lot of time hunting down bugs and troubleshooting issues. It was frustrating at times, but it made me better at fixing things.
- **The Importance of Planning:** I discovered that having a plan and an organized structure for my project can save a lot of time and reduce stress.
## Installation
- Clone this repo:
```sh
git clone https://github.com/CodeWithAlamin/REST-Countries.git
```
- Install dependencies:
```sh
npm install
```
- Build command:
```sh
npm run build
```
- Live server:
```sh
npm run dev
```
## Author
👤 Alamin
- Twitter - [@CodeWithAlamin](https://www.twitter.com/CodeWithAlamin)
- LinkedIn - [@CodeWithAlamin](https://www.linkedin.com/in/CodeWithAlamin)
- Frontend Mentor - [@CodeWithAlamin](https://www.frontendmentor.io/profile/CodeWithAlamin)
- Github: [@CodeWithAlamin](https://github.com/CodeWithAlamin)
Feel free to contact me with any questions or feedback!
## Acknowledgments
The project was inspired by this challenge from Frontend Mentor. Special thanks to Frontend Mentor for providing the design and specifications for this project.
## License
This project is licensed under the [MIT](./LICENSE.md) License - see the LICENSE file for details.