https://github.com/luv2seeyoucry/weather-forecasting

🌤️ A simple, beautiful, and responsive weather app! ☀️🌧️ It provides real-time weather updates 🌎 and a 6-day forecast 📅⏳ with hourly details ⏰—powered by the OpenWeather API. ⚡🚀
https://github.com/luv2seeyoucry/weather-forecasting

css fetch-api html html-css-javascript mui mui-icons react-weather-app reactjs tailwindcss

Last synced: 2 months ago
JSON representation

🌤️ A simple, beautiful, and responsive weather app! ☀️🌧️ It provides real-time weather updates 🌎 and a 6-day forecast 📅⏳ with hourly details ⏰—powered by the OpenWeather API. ⚡🚀

• Host: GitHub
• URL: https://github.com/luv2seeyoucry/weather-forecasting
• Owner: Luv2SeeYouCry
• License: mit
• Created: 2025-03-24T16:22:02.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2025-03-24T16:35:01.000Z (about 1 year ago)
• Last Synced: 2025-03-24T17:37:30.706Z (about 1 year ago)
• Topics: css, fetch-api, html, html-css-javascript, mui, mui-icons, react-weather-app, reactjs, tailwindcss
• Language: JavaScript
• Homepage: https://the-weather-forecasting.netlify.app/
• Size: 854 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
![Application screenshot](./public/screenshot.png)







With [The Weather Forecasting](https://the-weather-forecasting.netlify.app) user can search locations by city name and observe the weather for the next 5-6 days and 3 hour interval.




The app is developed using React.js and material-UI.




## 💻 Live Demo:

https://the-weather-forecasting.netlify.app




## ✨ Getting Started

- Make sure you already have `Node.js` and `npm` installed in your system.

- You need an API key from [OpenWeatherMap](https://openweathermap.org/). After creating an account, [grab your key](https://home.openweathermap.org/api_keys).

- Then, under the `src` directory, go to `api/OpenWeatherService` and replace `WEATHER_API_KEY` with your OpenWeatherMap API Key.

  - **`api/OpenWeatherService.js`**: It contains the code related to the back-end of the application.




## ⚡ Install

- Clone the repository:

```bash

git clone https://github.com/Luv2SeeYouCry/the-weather-forecasting.git

```

- Install the packages using the command `npm install`




## 📙 Used libraries

- `react-js`

- `material-ui`

Check `packages.json` for details




## 📄 Todos

- [ ] Styled-components

- [ ] Convert the entire project to TypeScript

- [ ] Unit Testing

- [ ] On launch, find user location weather by utilizing GeolocationAPI/GEOCODING

- [ ] Celcius/Fahrenheit conversion

- [ ] Dark/Light Mode




Thank You ☺