https://github.com/parmodkumar28/weather-application
https://github.com/parmodkumar28/weather-application
Last synced: 8 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/parmodkumar28/weather-application
- Owner: ParmodKumar28
- Created: 2024-04-12T17:42:46.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-04-14T05:53:38.000Z (about 2 years ago)
- Last Synced: 2024-04-14T07:22:14.649Z (about 2 years ago)
- Language: JavaScript
- Size: 367 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🌤️ Weather Forecast Application
## 📝 Overview
This Weather Forecast Application allows users to search for cities and view their current weather conditions. Users can search for cities using the autocomplete feature and view detailed weather information, including temperature, humidity, and wind speed.
## 🌟 Features
- 🌍 **City Search**: Users can search for cities by typing in the search bar. The autocomplete feature suggests city names as the user types.
- 📊 **City Table**: Displays a table of cities with their names, countries, populations, timezones, and current weather conditions.
- 🔍 **Sorting**: Users can sort the city table based on city name, country, population, and timezone in ascending or descending order.
- ⛅ **Weather Data**: Fetches and displays current weather data for each city, including temperature, humidity, and wind speed.
## 🛠️ Technologies Used
- ⚛️ **React**: Frontend library for building user interfaces.
- 🎨 **Tailwind CSS**: A utility-first CSS framework used for styling the application, providing a flexible and customizable design system.
- 🚀 **React Router**: Library for handling navigation in the application.
- 🔶 **React Icons**: Library for using icons in the application.
- 🖌️ **React Feather**: Icon library used for the sorting indicators.
- 🌐 **Autocomplete**: Component for implementing the city search autocomplete feature.
- 🌍 **API Service**: Module for fetching data from external APIs.
## 💻 Installation
1. Clone the repository: `git clone https://github.com/ParmodKumar28/Weather-Application`
2. Obtain an API key from OpenWeather and add it to your environment variables. You can sign up for a free API key here: `https://openweathermap.org/` and craete this .env variable REACT_APP_OPENWEATHERMAP_API_KEY and store here and use in ApiService.js
3. Navigate to the project directory: `cd weather-forecast`
4. Install dependencies: `npm install`
5. Start the development server: `npm start`
## 📖 Usage
1. Open the application in your web browser.
2. Use the search bar to search for cities by typing city names.
3. Click on a city name to view detailed weather information for that city.
4. Click on the column headers in the city table to sort the cities based on different criteria.
## 🤝 Contributing
Contributions are welcome! If you'd like to contribute to this project, please fork the repository and submit a pull request with your changes.