Weather App

Daily weather forecast information.

Authors

• @Kamilismayilzade

Documentation

Application created with TypeScript + ReactJs and Vite.

Tailwind CSS is used for styling.

For data fetching OpenWeatherMap API is used.

React Icons applied for customization.

Learn More about TypeScript Documentation and React Documentation here.

Get familiar with Tailwind CSS here.

Also take a look to the OpenWeatherMap API Docs.

Features

• Weather forecasts for any county and city.
• Daily hourly temperatures.
• Daily maximum and minimum temperatures.
• Sunrise, Sunset, Wind, Pressure, Humidity, Precipitation, Visibility, Feels like .etc
• Responsive Design
• Loader

OpenWeatherMap API

Get Forecast

   http://api.openweathermap.org/data/2.5/forecast?lat={lat}&lon={lon}& appid={API key}

Parameter	Type	Description
api_key, lat, lon	number	Required. Your API key, lat, lon

Get Geocoding

  http://api.openweathermap.org/geo/1.0/direct?q={city name},{state code},{country code}&limit={limit}&appid={API key}

Parameter	Type	Description
city, country	string	Required.
limit	number	Optional.

Badges

Color Reference

Color	Hex
Blue 50	#eff6ff
Slate 800	#1e293b
Slate 400	#94a3b8
Slate 200	#e2e8f0
Gray 700	#334155
Gray 900	#111827

🛠 Skills

Javascript, Typescript, React, HTML, CSS, Tailwind

Run Locally

Clone the project

  git clone https://github.com/Kamilismayilzade/weather-app

Go to the project directory

  cd weather-app-typescript-react-api

Install dependencies

  npm install
  npm install react-icons --save
  npm install react-spinners

Install Dev Dependencies

  npm create vite@latest
  npm install typescript --save-dev
  npm install -D tailwindcss
  npx tailwindcss init

Start the server

  npm run dev

Environment Variables

To run this project, you will need to add the following environment variables to your .env file

OPEN_WEATHER_MAP_API_KEY

Tech Stack

Client: React, TypeScript, TailwindCSS

Deployment

To deploy this project run

  npm run deploy

Screenshots