An application that allows a user to search for current weather conditions and view detailed forecast analysis for a specific city or region.
- React
- JavaScript
- HTML
- CSS
- Bootstrap
- Material UI
- Recharts
- Node Package Manager
- Babel
- ES Lint
- Weather API
This application presents users with a form, where they enter a city or region. The current weather conditions for that city/region are shown on the left, as well as a 3 day forecast on the right. Clicking a day from the forecast will display its forecast details.
Detailed forecast analysis is also available for each day. This data is represented by line graphs that show hourly conditions for temperature, humidity, and wind, as well as rain and snow (if they are predicted to occur).
All weather data is retrieved from the Weather API.
In order to use this application, you will also need an API key from the Weather API. Follow the instructions below:
-
Go to WeatherAPI, and click
Sign Up. -
Create an account.
-
Go to your newly created account. Your API key will be stored here.
-
Select the green
Codebutton, and clone this repository to your desktop. -
In your terminal, navigate to this project's folder, and run the command
$ npm installto install all relevant packages. -
Create a file in the the root directory of this project called
.env. -
In your
.envfile, create a variable calledREACT_APP_API_KEY=[YOUR-API-KEY]. Replace[YOUR-API-KEY]with your API key. Note: The variable must be namedREACT_APP_API_KEYin order for it to work. -
Add
.envto thegitignorefile. Make sure to first commit thegitignorefile before moving on. If you don't do this first, your API key will be exposed, which is a security risk for the application. -
Run the command
$ npm run startto start a live development server. This will open the project in your web browser at the URLlocalhost:3000, allowing you to use the application.
None.
MIT
Copyright(c) 2024 Brian Scherner