Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tariqjamal057/reactjs_weather_app
React JS Weather is designed to fetch weather data for your location along with various metrics. The application is fully responsive and accessible on any device.
https://github.com/tariqjamal057/reactjs_weather_app
api axios crypto-js eslint express localstorage nodejs openweatherapi react-icons reactjs redux vite-react-eslint weather
Last synced: 18 days ago
JSON representation
React JS Weather is designed to fetch weather data for your location along with various metrics. The application is fully responsive and accessible on any device.
- Host: GitHub
- URL: https://github.com/tariqjamal057/reactjs_weather_app
- Owner: tariqjamal057
- License: mit
- Created: 2021-11-28T11:03:48.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2024-12-21T11:10:25.000Z (about 2 months ago)
- Last Synced: 2024-12-21T11:19:07.741Z (about 2 months ago)
- Topics: api, axios, crypto-js, eslint, express, localstorage, nodejs, openweatherapi, react-icons, reactjs, redux, vite-react-eslint, weather
- Language: JavaScript
- Homepage: https://reactjs-weather-app-sable.vercel.app/
- Size: 1.03 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ReactJS Weather App
A modern weather application built with React that provides real-time weather information and forecasts for cities worldwide. The app features an intuitive interface with interactive weather charts, search history tracking, and smart caching for optimal performance. Users can search for any city, view detailed weather metrics, and access 5-day forecasts with hourly breakdowns. The app securely stores search history using encryption and implements responsive design for seamless usage across all devices.
**Access the website using this link: [https://reactjs-weather-app-sable.vercel.app](https://reactjs-weather-app-sable.vercel.app)**
## Features
- 🔍 Search and track weather for any city
- ☁️ Display top 5 most searched cities
- ⛅ Current weather conditions with detailed metrics
- 📌 Location-based weather detection
- 📱 Responsive design for all devices
- 🗃️ Local storage caching for improved performance
- 🔐 Search history encryption for security
## TODO
- 🔑 Authentioation
- 📄 Saved Location Page UI
## Tech Stack
[](https://react.dev/)
[](https://redux-toolkit.js.org/)
[](https://tailwindcss.com/)
[](https://www.chartjs.org/)
[](https://axios-http.com/)
[](https://cryptojs.gitbook.io/)
[](https://expressjs.com/)
[](https://nodejs.org/)
## Getting Started
### Prerequisites
- Node.js (v16 or higher)
- npm/yarn
### Installation
1. Clone the repository
```bash
git clone https://github.com/yourusername/reactjs_weather_app.git
```
2. Install client app dependencies
```bash
npm install
```
3. Install server app dependencies
```bash
cd server
```
```bash
npm install
```
### Setup Environment Variables
Before running the app, you need to set env variables to make it work.
create a .env file using the below command
1. Using cp (Unix/Linux/MacOS)
```bash
cp .env.example .env
```
2. Using copy (Windows)
```bash
copy .env.example .env
```
### Run the app
1. Run the client app
```bash
npm run dev
```
2. Run the server app
Using node command (changes will be reflected in real-time)
```bash
node server/app.js
```
Using nodemon (changes will be reflected in real-time)
```bash
nodemon server/app.js
```