Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/furkan-dogu/react-weather-app
This project, created with React, is a website that utilizes the OpenWeatherMap API to display both weekly and real-time weather forecasts for any desired location.
https://github.com/furkan-dogu/react-weather-app
axios css javascript react weather-api
Last synced: 2 months ago
JSON representation
This project, created with React, is a website that utilizes the OpenWeatherMap API to display both weekly and real-time weather forecasts for any desired location.
- Host: GitHub
- URL: https://github.com/furkan-dogu/react-weather-app
- Owner: furkan-dogu
- Created: 2023-12-16T23:08:46.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-01-06T19:46:52.000Z (about 1 year ago)
- Last Synced: 2024-01-29T08:48:01.015Z (12 months ago)
- Topics: axios, css, javascript, react, weather-api
- Language: JavaScript
- Homepage: https://react-weather-app-omega-pink.vercel.app
- Size: 13 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Weather App
## About the Project
This project, created with React, is a website that utilizes the OpenWeatherMap API to display both weekly and real-time weather forecasts for any desired location.
## Table of Contents
- [Features](#features)
- [Usage](#usage)
- [Technologies Used](#technologies-used)
- [Project Skeleton](#project-skeleton)
- [Screenshots](#screenshots)
## Live Demo
[React Weather App](https://react-weather-app-omega-pink.vercel.app/)
## Features
- Instant and weekly weather forecast for a specific location.
- Each day can be expanded to view detailed weather information.
- Shows information such as temperature, felt temperature, humidity, wind speed, and pressure.
- When the location button is clicked, it redirects to the [OpenWeatherMap](https://openweathermap.org/) page containing information about the entered location.
- It provides a warning when an invalid location is entered
## Usage
- Get an API key from [OpenWeatherMap](https://openweathermap.org/) and replace process.env.REACT_APP_API_KEY in Guncel.jsx and Haftalik.jsx with your API key.
## Technologies Used
- React
- Axios for API requests
- [OpenWeatherMap API](https://openweathermap.org/) for weather data
- Icons from [React Icons](https://react-icons.github.io/react-icons/)
- Styling with CSS (module)
- Sweetalert2 for alert
## Project Skeleton
```
React Weather App (folder)
|
|----readme.md
SOLUTION
├── public
│ └── index.html
├── src
│ ├── assets
│ │ └── [images]
│ ├── components
│ │ ├── guncel
│ │ │ ├── Guncel.css
│ │ │ └── Guncel.jsx
│ │ ├── haftalik
│ │ │ ├── Haftalik.css
│ │ │ └── Haftalik.jsx
│ │ └── search
│ │ ├── Search.css
│ │ └── Search.jsx
│ ├── pages
│ │ └── Home.jsx
│ ├── App.js
│ ├── App.css
│ └── index.js
├── package.json
└── yarn.lock
```
## Screenshots
## Compatibility
The project is compatible with both wide-screen computers and mobile devices.
## Acknowledgments
- Weather data provided by [OpenWeatherMap](https://openweathermap.org/)