Demo

Weather React App

About   |   Features   |   Technologies   |   Requirements   |   Starting   |   License   |   Author

 

🎯 About

I was looking for any idea to practice a little React with typescript, and scouring a little on the internet, I found a free weather API ⛅.

So I resolved to create a simple weather app, and as a plus, learn about the dark mode.

The app is simple, there's an input to put the city, and if the city exists, is shown the current weather together with five days forecast, else, is shown an error.

The API I used was the free plan of the open weather map, with a limit of 60 calls per minute.

You can see the demo here 👈👈

✨ Features

✔️ Show current weather;
✔️ Show five days forecast;
✔️ Dark and light mode;
✔️ Save theme and last search in local storage;
✔️ Responsive app;

🚀 Technologies

• React
• Axios
• Eslint
• Date-fns
• Typescript
• React switch
• Styled components

✅ Requirements

Before starting 🏁, you need to have Git and Node installed, and also an account in open weather map to get your API key.

🏁 Starting

# Clone this project
$ git clone https://github.com/maurodesouza/weather-react-app

# Access the frontend repo
$ cd weather-react-app/frontend

# Create .env file with
REACT_APP_WEATHER_KEY=YOUR_KEY

# Install dependencies
$ yarn

# Run the project
$ yarn start

# The server will initialize in the <http://localhost:3000>

📝 License

This project is under license from MIT. For more details, see the LICENSE file.

Made with ❤️ by Mauro de Souza

 

Back to top

---