Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/sahiltiwariiii/reactcountriesproject

This is country project with the help of reactjs
https://github.com/sahiltiwariiii/reactcountriesproject

css javascript jsx react-router-dom reactjs

Last synced: about 2 months ago
JSON representation

This is country project with the help of reactjs

Awesome Lists containing this project

README 

        
# 🌍 Countries Explorer with React.js & REST Countries API



Welcome to the **Countries Explorer** project! This React.js application is a powerful tool designed to help users explore and learn about countries from around the world 🌎. Whether you're looking to gather information about a specific country or simply want to explore various regions, this project has you covered.



Leveraging the [REST Countries API](https://restcountries.com/), the app provides real-time data, including details such as population, area, capital, currencies, languages, and more 🗺️. This ensures that the information is always accurate and up-to-date.



![Project Demo](path_to_your_video) 🎥



---



## ✨ Key Features



### 🌐 Global Country Search

The app features an intuitive search bar that allows you to quickly and easily find any country in the world. Simply type the name of the country, and the app will instantly display the relevant information.



- **Autocomplete Feature**: The search is smart and responsive, providing suggestions as you type.

- **Instant Results**: Information is fetched in real-time from the API as soon as the query is made.



### 💡 Lazy Loading for Better Performance

To optimize performance, the app uses **lazy loading** techniques. This means that instead of loading all country data at once, the data is fetched incrementally as you scroll through the page. This approach reduces the initial load time and enhances the user experience, especially for users on slower networks.



- **Optimized API Requests**: Data is requested only when needed, reducing the number of API calls and conserving bandwidth.

- **Efficient Image Loading**: Images are loaded lazily, ensuring that only those in view are downloaded.



### ✨ Shimmer Effect for Loading Animation

While the data is being fetched, the app implements a visually appealing **shimmer effect** ✨. This effect serves as a placeholder, creating a skeleton of the content that will appear once the data is fully loaded. The shimmer effect ensures a seamless and professional look, enhancing the overall user experience.



![Shimmer Effect](mobileshimmer.png)



- **Smooth Transitions**: The shimmer effect smoothly transitions into the actual content, providing a polished feel.

- **Responsive Design**: The shimmer is responsive and adapts to different screen sizes, ensuring a consistent experience across all devices.



### 📱 Fully Responsive Design

The app is designed to be fully responsive, meaning it works perfectly across a wide range of devices and screen sizes, from smartphones to large desktop monitors.



- **Mobile-First Approach**: The design prioritizes mobile users, ensuring that all features are accessible and functional on smaller screens.

- **Adaptive Layouts**: Elements dynamically adjust their size and layout based on the screen resolution, ensuring that the app remains visually appealing and easy to navigate on any device.



### 🎨 Dark & Light Mode

For user comfort and accessibility, the app includes a **dark and light mode toggle** 🌙☀️. Users can switch between the two themes to suit their environment or personal preferences.



- **Automatic Theme Detection**: The app detects the user's system preferences and automatically applies the corresponding theme.

- **User-Friendly Toggle**: Users can switch between dark and light mode with a single click, and their preferences are stored in the browser's local storage for consistency across sessions.



---



## 🚀 Live Demo



Check out the live version of the project:



🔗 [Live Demo](https://countriesprojectreactt.netlify.app/)



Explore the full functionality of the project and see how it handles real-time data fetching, lazy loading, and the shimmer effect in action.



---



## 📸 Screenshots



Take a look at some screenshots to get a visual sense of how the app functions and looks across different screens:



1. ![Home Page](lii.png) - **Home Page** with a global search bar and a list of countries.

2. ![Country Detail Page](path_to_image2) - **Country Detail Page** showing the details of a selected country.

3. ![Dark Mode](darr.png) - **Dark Mode** activated for a more comfortable viewing experience at night.

4. ![Shimmer Effect](macshi.png) - **Shimmer Effect** in action while data loads.

5. ![Mobile View](mobileshimmer.png) - **Mobile View** showing the responsive layout.



Additional Screenshots:



- ![Homepage](lii.png)

- ![Search Results](darr.png)

- ![Country Details](lapli.png)

- ![Mobile View](lapp.png)

- ![Search Functionality](tab.png)

- ![Country Info](lap.png)

- ![Desktop View](deli.png)

- ![Filter Options](eda.png)

- ![Interactive UI](detail.png)

- ![Overall Design](detailnight.png)

- ![Card Shimmer](cardsshimmer.png)

- ![Country Details Shimmer](countrydetailshimmer.png)

- ![Mobile Country Details Shimmer](detal.png)

- ![Laptop View Shimmer](laposhi.png)

- ![Shimmer](macshi.png)

- ![Tablet Shimmer View](tabshi.png)

- ![Tablet Details Page Shimmer](tabshimm.png)

- ![Mobile Shimmer](mobileShimmer.png)



---



## 🛠️ Technologies Used



This project leverages modern web technologies to ensure a seamless and performant user experience:



- **React.js** ⚛️ - A JavaScript library for building user interfaces.

- **REST Countries API** 🌍 - An open-source API providing country data.

- **CSS3** 🎨 - For responsive and visually appealing designs.

- **JavaScript (ES6+)** 💻 - For dynamic functionality and interactive elements.

- **Local Storage** 💾 - To store user preferences (e.g., dark/light mode).



---



## 📦 Installation & Setup



To run this project locally, follow these steps:



1. **Clone the repository**:

   ```bash

   git clone https://github.com/sahilTiwariiii/reactcountriesproject.git