LovHurt / weather-app

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

iWeatherApp Project

This weather application allows users to view weather information for different locations worldwide. Users can retrieve weather information by searching for their desired location.

Project Deployment

This project has been deployed on GitHub Pages. To view the application, click lovhurt.github.io/weather-app/.

Features

  • Users can retrieve weather information by searching for a location.

  • View current weather information as well as 5-day weather forecasts.

  • Simple and user-friendly interface.

  • Visual representation of weather conditions with weather icons.

  • Data fetching and posting operations were handled using Axios and React Query (aka Tanquery).

  • OpenWeather API was utilized for operations involving weather and city data.

  • To prevent making requests every time the user types in the input, a custom hook named useDebounce was employed. This hook delays the request by 1 second after the user finishes typing.

  • Users can effortlessly retrieve weather updates for their current location with just a single click. To enable this feature, users must grant permission for their browser to access their location information.

Installation

1- Clone the project: git clone https://github.com/LovHurt/weather-app.git

2- Navigate to the project directory: cd weather-app

3- Install the required packages: npm install

4- Start the application: npm run dev

5- Click on the http://localhost:5173/weather-app/ link.

Technologies Used

  • React.js
  • TypeScript
  • React Query
  • React Router
  • Geolocation API
  • CSS
  • Axios
  • React-toastify
  • Vite

Project Demo

Screenshot 2024-04-10 234441 Screenshot 2024-04-10 234459

iWeather-AlicanDagidir-Video.1.mp4

About


Languages

Language:TypeScript 81.0%Language:CSS 16.5%Language:JavaScript 1.3%Language:HTML 1.2%