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
• Usage
• Technologies Used
• Project Skeleton
• Screenshots

Live Demo

React Weather 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 page containing information about the entered location.
• It provides a warning when an invalid location is entered

Usage

• Get an API key from OpenWeatherMap 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 for weather data
• Icons from 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