Skip to content

README.md

Latest commit

 

History

History
43 lines (33 loc) · 1.86 KB

README.md

File metadata and controls

43 lines (33 loc) · 1.86 KB

React + Vite

🌍 React Rest Countries Explorer

A modern, responsive web application that fetches data from the Rest Countries API to display information about countries worldwide. Users can explore country details, mark countries as visited, and toggle their status.

🚀 Live Demo

Check out the live deployment here: Simple React Rest Countries

✨ Features

  • Data Fetching: Dynamically fetches country data (flags, names, codes) using the Rest Countries API.
  • Visited List: Users can add countries to a "Visited" list.
  • Toggle Logic: Efficiently add or remove countries from the visited list with a single button click (Toggle functionality).
  • Responsive Design: Optimized for mobile, tablet, and desktop views.
  • Interactive UI: Smooth state management using React Hooks.

🛠️ Technologies Used

  • React.js (Functional Components, Hooks)
  • JavaScript (ES6+)
  • Rest Countries API
  • CSS3 / Tailwind CSS
  • Netlify (For Deployment)

📖 Lessons Learned (Deep Dive)

During this project, I deepened my understanding of:

  1. React State Management: Handling arrays and objects within useState.
  2. Conditional Logic: Implementing toggle features using .find() and .filter() methods to avoid duplicate data.
  3. API Integration: Using useEffect to fetch and display asynchronous data.
  4. Immutability: Learning why we must create new arrays (using the spread operator or filter) instead of mutating the original state.

⚙️ Installation & Setup

If you want to run this project locally:

  1. Clone the repository: 
    git clone [https://github.com/your-username/your-repo-name.git](https://github.com/your-username/your-repo-name.git)

---

Developed with ❤️ by Arafath