/weather-react-app

A simple weather made with vite using react

Primary LanguageTypeScript

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.

Home

🔍 Search cities

You can search for other cities and add it as favorite.

Search

⭐ Favorites menu

Here are all your favorites cities you marked on search results, to change between them faster.

Favorites menu

⚙️ 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).

Settings menu Changing some settings

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.

📦 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
corepack enable pnpm
  • Vite
pnpm create vite

✅ Installation

First execute this command to restore dependencies

pnpm i

Then create your .env file

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

pnpm dev

🧩 Assets

Icons used in the app: Weather Icons - Community by Neelesh Chaudhary.