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.
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)
- React - A JavaScript library for building user interfaces
- Redux Toolkit - A simplified, efficient, and powerful Redux library for building state management systems
- React Router - Declarative routing for React applications
- Tailwind CSS - Utility-first CSS framework for building any design
- HTML5
- Mobile-first workflow
- Vite - A JavaScript module bundler and development server.
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.
- Clone this repo:
git clone https://github.com/CodeWithAlamin/REST-Countries.git
- Install dependencies:
npm install
- Build command:
npm run build
- Live server:
npm run dev
👤 Alamin
- Twitter - @CodeWithAlamin
- LinkedIn - @CodeWithAlamin
- Frontend Mentor - @CodeWithAlamin
- Github: @CodeWithAlamin
Feel free to contact me with any questions or feedback!
The project was inspired by this challenge from Frontend Mentor. Special thanks to Frontend Mentor for providing the design and specifications for this project.
This project is licensed under the MIT License - see the LICENSE file for details.