https://github.com/maurodesouza/weather-react-app

A simple weather react app ⛈☀🌪
https://github.com/maurodesouza/weather-react-app

api react styled-components typescript weather

Last synced: about 2 hours ago
JSON representation

A simple weather react app ⛈☀🌪

• Host: GitHub
• URL: https://github.com/maurodesouza/weather-react-app
• Owner: maurodesouza
• License: mit
• Created: 2020-07-24T18:10:52.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-05T22:48:03.000Z (almost 2 years ago)
• Last Synced: 2024-04-09T15:05:53.162Z (7 months ago)
• Topics: api, react, styled-components, typescript, weather
• Language: TypeScript
• Homepage: https://simpleweatherreactapp.netlify.app
• Size: 4.8 MB
• Stars: 12
• Watchers: 2
• Forks: 6
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
 

  


   

  Demo



Weather React App




  

  

  

  





  About   |   

  Features   |  

  Technologies   |  

  Requirements   |  

  Starting   |  

  License   |  

  Author



 

## :dart: 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](https://openweathermap.org) :partly_sunny:.

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](https://openweathermap.org), with a limit of 60 calls per minute.

You can see the demo here :point_left::point_left:

## :sparkles: Features ##

:heavy_check_mark: Show current weather;\

:heavy_check_mark: Show five days forecast;\

:heavy_check_mark: Dark and light mode;\

:heavy_check_mark: Save theme and last search in local storage;\

:heavy_check_mark: Responsive app;

## :rocket: Technologies ##

- [React](https://pt-br.reactjs.org)

- [Axios](https://github.com/axios/axios)

- [Eslint](https://eslint.org)

- [Date-fns](https://date-fns.org)

- [Typescript](https://www.typescriptlang.org)

- [React switch](https://www.npmjs.com/package/react-switch)

- [Styled components](https://styled-components.com)

## :white_check_mark: Requirements ##

Before starting :checkered_flag:, you need to have [Git](https://git-scm.com) and [Node](https://nodejs.org/en/) installed, and also an account in [open weather map](https://openweathermap.org) to get your API key.

## :checkered_flag: Starting ##

```bash

# 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 

```

## :memo: License ##

This project is under license from MIT. For more details, see the [LICENSE](LICENSE.md) file.

Made with :heart: by Mauro de Souza

 

Back to top