https://github.com/yosephdev/weather-app
This is an updated version of my weather app, where I only had a simple React Weather App. It fetches city's coordinates from MapBox API and get forecasting data from OpenWeatherMap API based on coordinates.
https://github.com/yosephdev/weather-app
css html javascript react
Last synced: 23 days ago
JSON representation
This is an updated version of my weather app, where I only had a simple React Weather App. It fetches city's coordinates from MapBox API and get forecasting data from OpenWeatherMap API based on coordinates.
- Host: GitHub
- URL: https://github.com/yosephdev/weather-app
- Owner: yosephdev
- Created: 2021-08-10T07:05:28.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2022-06-27T16:01:09.000Z (almost 4 years ago)
- Last Synced: 2025-05-24T07:39:22.678Z (about 1 year ago)
- Topics: css, html, javascript, react
- Language: JavaScript
- Homepage: https://weather-ahzjwodly-isakbet.vercel.app
- Size: 1.44 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Weather App
A Weather App made with React :cloud:
# Description
This project was made using [`React`](https://github.com/facebook/react) and [`styled-components`](https://github.com/styled-components/styled-components).
The forecasting is made using 2 different APIs:
- [`Mapbox`](https://docs.mapbox.com/api/overview/) - To obtain city's coordinates.
- [`OpenWeatherMap`](https://openweathermap.org/api) - To get forecasting based on coordinates.
# Setup
You need to setup `.env` file with the APIs keys as `Environment Variables` to make this project work.
Environment Variables are a little different to config when working with [`React`](https://github.com/facebook/react).
Reading the `Create React App` docs section about [Adding Custom Environment Variables](https://create-react-app.dev/docs/adding-custom-environment-variables/), you find this:
```
You must create custom environment variables beginning with REACT_APP_. Changing any environment variables will require you to restart the development server if it is running.
```
example:
```
REACT_APP_MAP_TOKEN=YOUR_TOKEN_HERE
REACT_APP_YOUR_API_KEY_NAME=your_api_key HERE
```
Then, you can access this variable with `process.env` object:
```javascript
process.env.REACT_APP_MAP_TOKEN
## Disclaimer
`WARNING`: Do not store any secrets (such as private API keys) in your React app!
Environment variables are embedded into the build, meaning anyone can view them by inspecting your app's files.
# Features
- Get Weather Forecast from any city;
- The Background Image changes by current user dateTime;
