Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/master369963/weather-app
This is a weather app built with React which displays the current weather conditions and 5-day forecast for a given location.
https://github.com/master369963/weather-app
api css data-fetching html javascript react responsive-design styled-components
Last synced: about 1 month ago
JSON representation
This is a weather app built with React which displays the current weather conditions and 5-day forecast for a given location.
- Host: GitHub
- URL: https://github.com/master369963/weather-app
- Owner: Master369963
- Created: 2023-03-19T16:01:58.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-01-30T17:09:04.000Z (11 months ago)
- Last Synced: 2024-04-10T21:45:49.226Z (9 months ago)
- Topics: api, css, data-fetching, html, javascript, react, responsive-design, styled-components
- Language: JavaScript
- Homepage: https://happyday.agathachiu.com
- Size: 5.11 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Happy Day - Weather App
This is a weather app built with React which displays the current weather conditions and 5-day forecast for a given location.
## Live Demo
[Live Demo Link](https://master369963.github.io/weather-app/)
## Project Screenshot(s)
### Main page
### Search with auto-complete function
### App on mobile
## Features
As a user of this weather app, you can:
- View the current weather of a specific location, including temperature, weather condition, and wind speed.
- See a 5-day forecast with 3-hour step, including the temperature and weather condition of each day.
- Click the refresh button to update the latest weather information.
- Search for weather conditions by location using the search bar with auto-complete functionality.
- Searched cities are stored in local storage, eliminating the need for users to re-enter them on subsequent visits.
- Access the app on both desktop and mobile devices since it's responsive.
- Add this app to your home screen for easy access by opening with the web browser and then follow the instructions for your device:
- iOS: Tap the "Share" button in Safari, and then select "Add to Home Screen".
- Android: Tap the "Menu" button in Chrome, and then select "Add to Home Screen".
## Technologies Used
- React
- OpenWeatherMap API
- GeoDB Cities
- styled-component
- Progressive Web App (PWA)
- LocalStorage
## Getting Started
1. Clone this repository to your local machine:
```
git clone https://github.com/master369963/weather-app.git
```
2. Install dependencies:
```
cd weather-app
npm install
```
3. Start the application:
```
npm start
```
4. Open your browser and go to http://localhost:3000 to view the app.
## Credits
This app uses the OpenWeatherMap API to fetch live weather data.