https://github.com/tcriss/weather-react-app
A simple weather made with vite using react
https://github.com/tcriss/weather-react-app
react reactjs tailwindcss typescript zustan
Last synced: over 1 year ago
JSON representation
A simple weather made with vite using react
- Host: GitHub
- URL: https://github.com/tcriss/weather-react-app
- Owner: Tcriss
- Created: 2024-04-15T23:59:37.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2024-05-22T13:37:55.000Z (about 2 years ago)
- Last Synced: 2025-01-21T01:15:53.846Z (over 1 year ago)
- Topics: react, reactjs, tailwindcss, typescript, zustan
- Language: TypeScript
- Homepage:
- Size: 2.77 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Weather App
A simple but elegant weather web app made with react + vite.
## 🚀 Features
### ⛅ Current weather & forecast
You can select a city in the search reslts or favorites menu to see the current weather status and a 3 days forecast.
### 🔍 Search cities
You can search for other cities and add it as favorite.
### ⭐ Favorites menu
Here are all your favorites cities you marked on search results, to change between them faster.
### ⚙️ Settings menu
Here you can change the configs of the app, now you can only change the temperature units (Celsius/Farenheit) and measure units (Miles/Kilometers).
## Technologies used
This app uses Vite + SWC. A minimal setup to get React working in Vite with HMR and some ESLint rules.
The weather services are provided by [Free Weather Api](https://www.weatherapi.com/).
### 📦 Dependencies
- Axios
- Clsx
- Framer Motion
- Free Weather Api
- TailwindCSS
- Vite
- React Hook Form
- React Hot Toast
- Use-debounce
- Zustand
## Setup
### 📃 Requirements
- NodeJS 20.13.1 with pnpm enbled
```bash
corepack enable pnpm
```
- Vite
```bash
pnpm create vite
```
### ✅ Installation
First execute this command to restore dependencies
```bash
pnpm i
```
Then create your .env file
``` dosini
VITE_KEY = Your api key provided by Free Weather Api team
VITE_URL = https://api.weatherapi.com/v1/ # The Free Weather API url to access the api's endpoints
```
### ▶️ Execution
```bash
pnpm dev
```
## 🧩 Assets
Icons used in the app: [Weather Icons - Community by Neelesh Chaudhary](https://www.figma.com/community/file/971051749541378755/weather-icons-community?searchSessionId=lvu0htux-009taqkvyu4zn).