Skip to content

A simple React Weather App that allows users to check current weather conditions by city name, displaying temperature, humidity, and dynamic images based on temperature ranges. Built with the OpenWeatherMap API and styled using CSS Modules.

Notifications You must be signed in to change notification settings

taj567/WaetherApp-ValueLabs-Assessment

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

TajWeatherApp TajWeatherApp is a React application that displays current weather data using the OpenWeather API. The project has been upgraded to React 19, ensuring a more modern development environment and improved performance. For smoother user experience, it also includes robust error handling mechanisms.

Note: Due to the recent upgrade to React 19 (release candidate), some dependencies might not install properly. To resolve this issue, try installing the dependencies using the command:

bash npm install --legacy-peer-deps This approach ensures successful installation of all necessary packages, providing a seamless development experience.

Features Current Weather Display: Shows real-time weather data for any location. React 19: Project is updated to the latest React version. Error Handling: Graceful handling of errors in data fetching, ensuring that users are informed if something goes wrong. Installation Create a new React project:

bash Copy code npx create-react-app tajweatherapp Upgrade to React 19: Follow the official React 19 Upgrade Guide to update the project to React 19.

Set up OpenWeather API: Go to OpenWeather and sign up for an account. Navigate to "Current Weather Data" and click on "Subscribe." Your API key will be displayed at the top of the page. Store the API key by creating a .env file in the root of your project and adding the following line: makefile Copy code REACT_APP_WEATHER_API_KEY=YOUR_API_KEY Install dependencies:

bash Copy code npm install --legacy-peer-deps Running the Application You can start the project by running either of the following commands:

bash Copy code npm run weatherapp or

bash Copy code npm start Components Structure The project consists of the following key components:

WeatherDisplay: Responsible for displaying the current weather data fetched from the OpenWeather API. MainComponent: The main component of the application that wraps the entire context provider and routes. Error Handling The application is designed to handle errors effectively. If there’s an issue with fetching weather data (e.g., network issues or invalid API key), the user will be shown appropriate error messages rather than a blank or broken page. Styling The project maintains a single CSS file for all components, ensuring a clean and organized styling structure.

About

A simple React Weather App that allows users to check current weather conditions by city name, displaying temperature, humidity, and dynamic images based on temperature ranges. Built with the OpenWeatherMap API and styled using CSS Modules.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published