Clim8

A modern, privacy-focused weather application built with Next.js 15, React 19, and TypeScript.

Features

• 🌤️ Current Weather: Real-time weather conditions with detailed metrics
• ⏰ Hourly Forecast: 24-hour detailed forecast with 3-hour intervals
• 📅 5-Day Forecast: Extended weather outlook
• 🎯 Location Services: Auto-detect location or search for cities worldwide
• 🌓 Dark/Light Theme: Toggle between beautiful themes
• 🌡️ Unit Conversion: Switch between Celsius/Fahrenheit and metric/imperial
• 🔒 Privacy-First: No unnecessary data collection or tracking
• 📱 Responsive Design: Works seamlessly on all devices
• ⚡ Performance: Fast loading with optimized caching

Screenshots

The app features a clean, modern interface inspired by the attached designs, with:

• Beautiful weather icons from Lucide React
• Responsive grid layout for weather details
• Smooth animations and transitions
• Accessible design with proper contrast ratios

Tech Stack

• Framework: Next.js 15 with App Router
• React: React 19 with TypeScript
• Styling: TailwindCSS v4
• UI Components: shadcn/ui
• Icons: Lucide React
• API: OpenWeatherMap API
• Build Tool: Turbopack (Next.js)

Getting Started

Prerequisites

• Node.js 18+
• npm, yarn, or pnpm
• OpenWeatherMap API key (free at openweathermap.org)

Installation

1. Clone the repository

   git clone <your-repo-url>
   cd climate

2. Install dependencies

   npm install
   # or
   yarn install
   # or
   pnpm install

3. Set up environment variables

   cp .env.example .env.local

   Edit .env.local and add your OpenWeatherMap API key:

   # Server-side API key (secure, not exposed to client)
   OPENWEATHER_API_KEY=your_actual_api_key_here
   
   # Application Configuration
   NEXT_PUBLIC_APP_NAME=Climate
   NEXT_PUBLIC_APP_VERSION=1.0.0
   

4. Run the development server

   npm run dev
   # or
   yarn dev
   # or
   pnpm dev

5. Open your browser Navigate to http://localhost:3000

API Integration

The app uses a secure proxy architecture with server-side API routes that communicate with OpenWeatherMap:

Architecture

• Client → Next.js API Routes → OpenWeatherMap API
• API keys are kept secure on the server side
• No API keys exposed to the client
• Built-in rate limiting and error handling
• Origin validation for enhanced security

Security Features

• Origin Validation: API only accepts requests from authorized domains
• Rate Limiting: 30 requests per 15-minute window per client
• CORS Protection: Proper cross-origin resource sharing headers
• Security Headers: Anti-XSS, content-type, and frame protection
• Middleware Protection: Edge-level request filtering

API Endpoints

Current Weather

GET /api/weather/current?lat={lat}&lon={lon}&units={units}

5-Day Forecast

GET /api/weather/forecast?lat={lat}&lon={lon}&units={units}

Location Search

GET /api/weather/search?q={query}&limit={limit}

Privacy & Data Handling

• No Tracking: No analytics, cookies, or user tracking
• Local Storage: Only preferences (theme, units) stored locally
• API Caching: Weather data cached for performance (5-10 minutes)
• Secure API Keys: API keys kept server-side, never exposed to client
• Origin Protection: API requests restricted to authorized domains only
• Rate Limiting: Prevents abuse with intelligent request throttling
• Geolocation: Optional, user-initiated location detection via IP
• No User Data: No personal information collected or stored
• Proxy Architecture: All external API calls go through secure server routes

Performance Optimizations

• Next.js App Router: Optimized routing and rendering
• Turbopack: Fast development builds
• API Caching: Smart caching with revalidation
• Lazy Loading: Components loaded as needed
• Image Optimization: Automatic image optimization
• Bundle Splitting: Code splitting for optimal loading

Deployment

Vercel (Recommended)

1. Push code to GitHub
2. Connect repository to Vercel
3. Add environment variables in Vercel dashboard:
   • OPENWEATHER_API_KEY: Your OpenWeatherMap API key
4. Deploy automatically

Other Platforms

The app can be deployed to any platform that supports Next.js:

• Netlify
• AWS Amplify
• Railway
• Docker containers

Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit changes (git commit -m 'Add amazing feature')
4. Push to branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• OpenWeatherMap for weather data API
• shadcn/ui for beautiful UI components
• Lucide for weather icons
• Tailwind CSS for styling
• Next.js for the amazing framework