SkyBuddy ☁🌦

---

SkyBuddy is your beautiful, lightning-fast, and feature-rich weather dashboard. Get real-time weather, forecasts, and more—right at your fingertips!

---

✨ Features

🌍 Location-based Weather

• Instantly fetches your local weather using browser geolocation.
• Handles permission errors gracefully with helpful prompts.

🔍 City Search & Suggestions

• Search any city worldwide with instant suggestions.

• Recent searches and favorites for quick access.

  

⭐ Favorites

• Save your favorite cities for one-click weather checks.

• Remove favorites with a single tap.

  

📊 Detailed Weather Dashboard

• Current weather: temperature, feels like, min/max, humidity, wind, and more.
• Beautiful weather icons and descriptions.

⏰ Hourly & 5-Day Forecasts

• Interactive hourly temperature chart (Recharts powered).
• 5-day forecast with min/max, humidity, wind, and weather icons.

🎨 Modern UI & Animations

• Responsive, mobile-friendly design with Tailwind CSS.
• Smooth skeleton loaders and animated transitions.
• Dark/light mode toggle.

⚡ Performance & Tech

• Built with React 19, Vite, TypeScript, and Tailwind CSS.
• Uses React Query for blazing-fast, cached API calls.
• Modular, maintainable codebase.

---

🚀 Getting Started

1. Clone the repo: sh git clone https://github.com/yourusername/skybuddy.git cd skybuddy

2. Install dependencies: sh npm install

3. Set up your OpenWeatherMap API key:

   • Copy .env.example to .env and add your API key.

4. (Optional)Set up Google Calendar Integration

To test or work on the Personal Planner feature, you will need a Google OAuth Client ID. How to get your Google OAuth Client ID? Follow the steps below

1. Go to the Google Cloud Console and create a new project.
2. Enable the Google Calendar API in the "Library" section.
3. Go to "Credentials" and create a new OAuth 2.0 Client ID for a Web application.
4. Add http://localhost:5173 and http://127.0.0.1:5173 (or your local dev port) as "Authorized JavaScript origins".
5. Copy the generated Client ID and paste it into your .env file as the value for VITE_GOOGLE_CLIENT_ID.

5. Run the app: sh npm run dev

---

📸 Screenshots & Animations

---

🛠 Tech Stack

• React 19
• Vite
• TypeScript
• Tailwind CSS
• React Query
• Recharts
• OpenWeatherMap API

---

🤝 Contributing

Pull requests are welcome! For major changes, please open an issue first to discuss what you would like to change.