This project is a Weather App built using React JS, providing users with up-to-date weather information for various locations.
To set up the project, follow these steps:
- Clone the repository.
- Navigate to the project directory in the terminal.
- Run
npm install
to install dependencies. - Run
npm start
to start the development server.
- Utilized APIs to fetch weather data.
- Formatted the retrieved data for clear display.
- Implemented a fixed navigation bar with default cities for quick access to weather information.
- Incorporated a search bar to enable users to find weather information for specific locations.
- Displayed current time and location for user convenience.
- Provided detailed temperature information including current temperature, wind speed, maximum and minimum temperatures, sunrise, and sunset times.
- Dynamically updated weather data to reflect real-time changes.
- Enabled users to search for weather data of any location.
- Allowed users to change temperature units (Celsius or Fahrenheit).
- Implemented geolocation feature to display weather information based on the user's current location.
- Automatically adjusted the background based on the temperature for a visually intuitive experience.
- Enabled users to click on the location icon to view weather information based on their current geolocation.
- Provided extended weather forecasts for up to 5 hours and 5 days for comprehensive weather insights.
To install Tailwind CSS, follow the steps outlined in the official Tailwind CSS documentation here.
For icons, this project uses React Unicons. Install it using npm:
npm install --save @iconscout/react-unicons
Then import icons as needed in the project.
The project uses the Google font Poppins for a clean and modern look. Import the font using the provided @import
code in the index.css
file.
The project utilizes the OpenWeather API to fetch weather data. Make sure to generate an API key and use it in the API calls as specified in the documentation.
For date and time manipulation, Luxon is used. Install it using:
npm i luxon
Then import DateTime
from Luxon as needed in the project.
Feel free to explore the codebase and contribute to further enhancements!