https://github.com/soumojit622/klimate-weatherapp
🌦️ Klimate is a sleek weather forecast app 🌍, built with React ⚛️, TypeScript 💻, Tailwind CSS 🎨, and the OpenWeather API 🌤️. Get real-time 5-day weather forecasts 📅 with details like temperature 🌡️, humidity 💧, and wind speed 💨. Fast, responsive, and easy to use! 🚀
https://github.com/soumojit622/klimate-weatherapp
openweathermap-api react shadcn-ui tailwindcss tanstack-react-query typescript vite
Last synced: 5 months ago
JSON representation
🌦️ Klimate is a sleek weather forecast app 🌍, built with React ⚛️, TypeScript 💻, Tailwind CSS 🎨, and the OpenWeather API 🌤️. Get real-time 5-day weather forecasts 📅 with details like temperature 🌡️, humidity 💧, and wind speed 💨. Fast, responsive, and easy to use! 🚀
- Host: GitHub
- URL: https://github.com/soumojit622/klimate-weatherapp
- Owner: soumojit622
- Created: 2024-11-12T07:07:08.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-11-16T19:11:54.000Z (over 1 year ago)
- Last Synced: 2025-10-14T18:32:10.770Z (9 months ago)
- Topics: openweathermap-api, react, shadcn-ui, tailwindcss, tanstack-react-query, typescript, vite
- Language: TypeScript
- Homepage: https://klimate-chi.vercel.app
- Size: 471 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🌦️ Klimate - Weather Forecast App
Welcome to **Klimate** – a sleek, responsive weather forecast application built with the latest technologies to provide accurate weather forecasts. With Klimate, you can quickly check the 5-day weather forecast for any location, complete with detailed information on temperature, humidity, wind speed, and more!
## 🌐 [Live Here](https://klimate-chi.vercel.app/)
### 🚀 Go To:
- [Features](#-features)
- [Usage](#-usage)
- [Customization](#-customization)
- [Setup & Installation](#-setup--installation)
- [Project Structure](#-project-structure)
- [Contributing](#-contributing)
- [Contact](#-contact)
---
## 🚀 Features
- **Real-time 5-day Forecast**: Get up-to-date weather forecasts for any location worldwide.
- **Responsive Design**: Optimized for all devices and screen sizes.
- **Detailed Weather Data**: View temperature, humidity, wind speed, and weather conditions.
- **Fast Performance**: Built with [Vite](https://vitejs.dev/) and [TanStack Query](https://tanstack.com/query/latest) for efficient data loading and caching.
- **Modern UI**: Styled with [Tailwind CSS](https://tailwindcss.com/) and [ShadCN UI](https://shadcn.dev/) for a clean, minimal, and elegant design.
## 🛠️ Technologies Used
- **[React](https://reactjs.org/)** and **[TypeScript](https://www.typescriptlang.org/)**: Ensures a modern, type-safe, and scalable codebase.
- **[Vite](https://vitejs.dev/)**: Lightning-fast development experience with minimal configuration.
- **[Tailwind CSS](https://tailwindcss.com/)** and **[ShadCN UI](https://shadcn.dev/)**: Provides a responsive, beautiful, and consistent UI.
- **[TanStack Query](https://tanstack.com/query/latest)**: Efficient data fetching, caching, and synchronization with OpenWeather API.
- **[OpenWeather API](https://openweathermap.org/)**: Reliable, real-time weather data for accurate forecasts.
## 📸 Screenshots
## 🏗️ Project Structure
- **`src/components`**: Reusable UI components (e.g., cards, icons).
- **`src/api`**: API-related files for OpenWeather requests and handling responses.
- **`src/pages`**: Core pages for displaying weather data.
- **`src/types`**: Type definitions for TypeScript integration.
- **`src/utils`**: Utility functions and helpers for data formatting.
## 🔧 Setup & Installation
1. **Clone the Repository**
```bash
git clone https://github.com/yourusername/klimate.git
cd klimate
```
2. **Install Dependencies**
```bash
npm install
```
3. **Get OpenWeather API Key**
- Sign up at [OpenWeather](https://openweathermap.org/) to get your API key.
- Create a `.env` file in the root of your project and add your API key:
```bash
VITE_OPENWEATHER_API_KEY=your_api_key_here
```
4. **Run the App**
```bash
npm run dev
```
5. **Open Klimate in Your Browser**
Navigate to [http://localhost:5173](http://localhost:5173).
## 🧰 Usage
1. **Search for a City**: Use the search bar to enter a city name.
2. **View Forecast**: Klimate will display the 5-day forecast, showing key weather details for each day.
3. **Interpret Icons**: Weather icons and color-coded temperatures make it easy to understand the forecast at a glance.
## 🖌️ Customization
- **UI Styling**: Modify Tailwind CSS classes in `src/components` to change the appearance.
- **Weather Icons**: Use different icons or styles from ShadCN UI to match your preferences.
- **API Requests**: Adjust API call frequency or add additional parameters as needed.
## 🤝 Contributing
Contributions are welcome! If you have suggestions or improvements, please fork the repository and open a pull request.
---
## 📧 Contact
For any questions or feedback, reach out to:
- Email: [soumojitbanerjee22@gmail.com](mailto:soumojitbanerjee22@gmail.com)
## 👨💻 Created by [Soumojit Banerjee](https://www.linkedin.com/in/soumojit-banerjee-4914b3228/)
Feel free to connect with me on [LinkedIn](https://www.linkedin.com/in/soumojit-banerjee-4914b3228/).
---
## 🙏 Thank You
Thank you for using **Klimate**!! Special thanks to the teams behind **Vite**, **React**, **TypeScript**, **Tailwind CSS**, **ShadCN UI**, and **OpenWeather API** for providing the essential tools that make **Klimate** possible.
## ❤️ Special Thanks
Grateful for the guidance from **ChatGPT** in bringing this project to completion!