🌦️ Weather Forecast App

A modern, responsive weather application built with React, Tailwind CSS, and OpenWeatherMap API. Users can view current weather and a 5-timepoint forecast based on their location or any searched city around the world.

🚀 Features

• 🌍 Detects your current location automatically (with permission)
• 🔍 Search for weather by city name
• 📅 Displays current weather with full details (temp, humidity, pressure, etc.)
• 🌤️ Shows weather icon and description
• 🕒 Forecast with accurate local time conversion
• 🎨 Fully responsive UI with Tailwind CSS
• ⚡ Cached weather data using React Query for performance

🧠 Technologies Used

• React
• React Query (TanStack Query)
• Tailwind CSS
• OpenWeatherMap API
• React Icons
• Vite

📦 Getting Started

1. Clone the Repo

git clone https://github.com/soksreng/weather-forecast-react.git
cd weather-forecast-app

2. Install Dependencies

npm install

3. Set Up Environment Variables

Create a .env file in the root directory and add:

VITE_API_KEY=your_openweathermap_api_key

Get your API key from https://openweathermap.org/api

4. Run the App

npm run dev

Open http://localhost:5173 to view it in the browser.

🗂️ Project Structure

src/
├── components/
│   ├── WeatherCard.jsx        # UI for current weather
│   ├── Forecast.jsx           # Forecast component
├── hooks/
│   ├── useGeolocation.js      # Hook to get user's coordinates
│   ├── useFetchWeather.js     # Fetch weather using API
├── services/
│   ├── api.js                 # API calls for current & forecast weather
├── utils/
│   ├── index.js               # Date formatting util
├── App.jsx
├── main.jsx

💡 Sample Cities to Search

• Tokyo

If the city is not found, the app displays:
“This place does not exist.”

📸 Screenshots

🙋‍♂️ Author

Built by Sok Sreng CHAN
Feel free to connect or fork the repo.