<<<<<<< HEAD

🌤️ Eximate - Weather Dashboard

A modern, responsive weather application built with React and TypeScript. Get real-time weather information, forecasts, air quality data, and historical weather trends for any location worldwide.

✨ Features

• 🌍 Real-time Weather Data - Current conditions, temperature, humidity, wind speed, and more
• 📊 5-Day Forecast - Detailed weather predictions for the upcoming week
• 📈 Hourly Temperature Charts - Visual representation of temperature trends
• 📉 Historical Data - 7-day historical temperature analysis
• 🌬️ Air Quality Index - Real-time AQI with pollutant breakdown
• ⭐ Favorite Cities - Save and quickly access your favorite locations
• 🔍 City Search - Search and navigate to any city worldwide
• 🌓 Dark/Light Mode - Beautiful theme switching with smooth animations
• 🌡️ Unit Toggle - Switch between Celsius and Fahrenheit
• 📱 Responsive Design - Works seamlessly on desktop, tablet, and mobile devices
• 🎨 Modern UI/UX - Smooth animations and micro-interactions

🛠️ Tech Stack

Frontend

• React 19 - Modern React with latest features
• TypeScript - Type-safe development
• Vite - Fast build tool and dev server
• Tailwind CSS 4 - Utility-first CSS framework
• React Router - Client-side routing

State Management & Data Fetching

• TanStack Query (React Query) - Server state management and data fetching
• React Context API - Theme and unit preferences

UI Components

• Radix UI - Accessible component primitives
• Lucide React - Beautiful icon library
• Recharts - Composable charting library
• Sonner - Toast notifications

Utilities

• date-fns - Date formatting and manipulation
• class-variance-authority - Component variant management
• cmdk - Command palette component

🚀 Getting Started

=======

🌤️ Klimate - Weather Dashboard

A modern, responsive weather application built with React and TypeScript. Get real-time weather information, forecasts, air quality data, and historical weather trends for any location worldwide.

✨ Features

• 🌍 Real-time Weather Data - Current conditions, temperature, humidity, wind speed, and more
• 📊 5-Day Forecast - Detailed weather predictions for the upcoming week
• 📈 Hourly Temperature Charts - Visual representation of temperature trends
• 📉 Historical Data - 7-day historical temperature analysis
• 🌬️ Air Quality Index - Real-time AQI with pollutant breakdown
• ⭐ Favorite Cities - Save and quickly access your favorite locations
• 🔍 City Search - Search and navigate to any city worldwide
• 🌓 Dark/Light Mode - Beautiful theme switching with smooth animations
• 🌡️ Unit Toggle - Switch between Celsius and Fahrenheit
• 📱 Responsive Design - Works seamlessly on desktop, tablet, and mobile devices
• 🎨 Modern UI/UX - Smooth animations and micro-interactions

🛠️ Tech Stack

Frontend

• React 19 - Modern React with latest features
• TypeScript - Type-safe development
• Vite - Fast build tool and dev server
• Tailwind CSS 4 - Utility-first CSS framework
• React Router - Client-side routing

State Management & Data Fetching

• TanStack Query (React Query) - Server state management and data fetching
• React Context API - Theme and unit preferences

UI Components

• Radix UI - Accessible component primitives
• Lucide React - Beautiful icon library
• Recharts - Composable charting library
• Sonner - Toast notifications

Utilities

• date-fns - Date formatting and manipulation
• class-variance-authority - Component variant management
• cmdk - Command palette component

🚀 Getting Started

8ff0a90c6cc30daf9fc521b5014de228efc7fdb1

Prerequisites

• Node.js 18+ and npm/yarn/pnpm
• OpenWeatherMap API key (Get one here)

Installation

1. Clone the repository

<<<<<<< HEAD git clone

git clone https://github.com/AshazShaikh1/Xemate/

8ff0a90c6cc30daf9fc521b5014de228efc7fdb1 cd Eximate

2. **Install dependencies**
```bash
npm install
# or
yarn install
# or
pnpm install

3. Set up environment variables

   Create a .env file in the root directory:

   VITE_OPENWEATHER_API_KEY=your_openweathermap_api_key_here

4. Start the development server

   npm run dev
   # or
   yarn dev
   # or
   pnpm dev

5. Open your browser

   Navigate to http://localhost:5173 (or the port shown in terminal)

📖 Usage

Viewing Current Weather

1. Allow Location Access - The app will request your location to show local weather
2. View Dashboard - See current conditions, hourly forecast, and detailed metrics
3. Refresh Data - Click the refresh button to update weather information

Searching for Cities

1. Click Search - Use the search bar in the header
2. Type City Name - Start typing to see suggestions
3. Select City - Click on a city to view its weather details

Managing Favorites

1. Add to Favorites - Click the star icon on any city page
2. View Favorites - See all favorite cities on the dashboard
3. Remove Favorites - Click the X button on any favorite city card

Changing Units

• Click the °C/°F button in the header to toggle between metric and imperial units

Theme Switching

• Click the sun/moon icon in the header to switch between light and dark themes

📁 Project Structure

src/
├── api/                 # API configuration and types
│   ├── config.ts       # API configuration
│   ├── types.ts        # TypeScript type definitions
│   └── weather.ts      # Weather API functions
├── components/
│   ├── weather/        # Weather-specific components
│   │   ├── current-weather.tsx
│   │   ├── air-quality.tsx
│   │   ├── weather-forecast.tsx
│   │   ├── weather-details.tsx
│   │   ├── hourly-temperature.tsx
│   │   ├── historical-chart.tsx
│   │   ├── favorite-cities.tsx
│   │   └── favorite-button.tsx
│   ├── ui/             # Reusable UI components
│   │   ├── button.tsx
│   │   ├── card.tsx
│   │   ├── alert.tsx
│   │   ├── header.tsx
│   │   ├── city-search.tsx
│   │   └── ...
│   ├── layout.tsx      # Main layout component
│   └── loading-skeleton.tsx
├── context/            # React contexts
│   ├── theme-provider.tsx
│   └── unit-provider.tsx
├── hooks/              # Custom React hooks
│   ├── use-geolocation.tsx
│   ├── use-weather.ts
│   ├── use-favorite.tsx
│   └── ...
├── pages/              # Page components
│   ├── weather-dashboard.tsx
│   └── city.tsx
├── lib/                # Utility functions
│   └── utils.ts
├── App.tsx             # Main app component
└── main.tsx            # Entry point

🏗️ Build

Development Build

npm run dev

Production Build

npm run build

Preview Production Build

npm run preview

<<<<<<< HEAD

🚀 Deployment

Deploy to Vercel

The project is configured for easy deployment on Vercel.

Option 1: Deploy via Vercel CLI

1. Install Vercel CLI

   npm i -g vercel

2. Login to Vercel

   vercel login

3. Deploy

   vercel

4. Add Environment Variable

   • Go to your project settings on Vercel dashboard
   • Navigate to Environment Variables
   • Add VITE_OPENWEATHER_API_KEY with your API key
   • Redeploy the project

Option 2: Deploy via GitHub

1. Push to GitHub

   git add .
   git commit -m "Ready for deployment"
   git push origin main

2. Import to Vercel

   • Go to vercel.com
   • Click "New Project"
   • Import your GitHub repository
   • Add environment variable VITE_OPENWEATHER_API_KEY
   • Click "Deploy"

3. Automatic Deployments

   • Every push to main branch will trigger a new deployment
   • Pull requests will create preview deployments

Environment Variables on Vercel

Make sure to add the following environment variable in your Vercel project settings:

• Variable Name: VITE_OPENWEATHER_API_KEY
• Value: Your OpenWeatherMap API key

The app will automatically use these environment variables during build time.

=======

8ff0a90c6cc30daf9fc521b5014de228efc7fdb1

🧪 Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint

🔧 Configuration

API Configuration

The app uses OpenWeatherMap API. Make sure to:

1. Sign up at OpenWeatherMap
2. Get your API key
3. Add it to .env file as VITE_OPENWEATHER_API_KEY

Environment Variables

VITE_OPENWEATHER_API_KEY=your_api_key_here

📱 Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📝 License

This project is open source and available under the MIT License.

👤 Author

Ashaz Shaikh

• Made with ❤️

🙏 Acknowledgments

• OpenWeatherMap for weather data API
• Radix UI for accessible components
• Lucide for beautiful icons
• Recharts for charting capabilities

---

⭐ If you like this project, give it a star!