🌦️ Weather Grid

"An advanced grid-based meteorological platform delivering precise weather analytics and forecasting with an intuitive, responsive interface."

📋 Project Description

Weather Grid provides reliable, up-to-date weather information through a clean, easy-to-use interface. The application displays current conditions and forecasts in a straightforward grid layout, making weather data instantly understandable. Designed with both functionality and aesthetics in mind, Weather Grid offers a smooth experience across all devices.

💡 Key Differentiators

• Precision-Focused: Leveraging the OpenWeatherMap API for highly accurate meteorological data
• Time-Aware Design: Location-specific time displays with automatic timezone adjustments
• Context-Optimized Architecture: Engineered for performance with state-of-the-art React patterns
• Accessibility-First: Carefully crafted for all users with full keyboard navigation and screen reader support
• Theme Adaptability: Seamless light and dark mode transitions for optimal viewing in any environment

🎯 Use Cases

• Daily Planning: Quick access to current conditions for day-to-day decision making
• Travel Preparation: Location-based forecasts to aid in travel planning
• Weather Monitoring: Real-time updates for changing atmospheric conditions
• Educational Resource: Clean visualization of weather patterns for educational purposes

✨ Features

• ⚡️ Real-time Weather Data — Fetch current conditions from OpenWeatherMap API
• 🕒 Local Time Integration — Display location-specific time with timezone adjustment
• 🔄 Context-based State Management — Optimized data flow with React Context
• 🌓 Dark/Light Mode — Full theme support with next-themes
• 📱 Responsive Design — Optimized for all device sizes
• 🎨 Modern UI Components — Built with shadcn/ui and Tailwind CSS
• 🔍 Search Functionality — Find location-specific weather data
• 🛠️ Type-safe Development — Fully typed with TypeScript

💻 Tech Stack

Next.js	React	TypeScript	Tailwind CSS	shadcn/ui
JavaScript	HTML	CSS	Radix UI	npm
Git	GitHub	VS Code	Vercel	OpenWeather

🚀 Quick Start

Prerequisites

• Node.js 20.x or higher
• npm 10.x or higher

Installation

1. Clone the repository

git clone https://github.com/akosikhada/weather-grid.git
cd weather-grid

2. Install dependencies

npm install

3. Set up environment variables

# Create a .env file at the root with your OpenWeatherMap API key
OPENWEATHER_API_KEY=your_api_key_here

4. Start the development server

npm run dev

5. Open http://localhost:3000 with your browser

🧩 Architecture

Weather Grid uses a modern React architecture with these key patterns:

• Context API for global state management with separate read/write contexts
• Server Components for improved performance and SEO
• API Routes for secure backend communication
• Custom Hooks for reusable logic

📄 License

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

🙏 Acknowledgements

• OpenWeatherMap for the weather data API
• shadcn/ui for the component system
• Vercel for hosting and deployment
• Meteo-nix by Darius Lukasukas as an inspiration for modern weather app design and implementation

👥 Developer/s

Miguel Enrique Dasalla Web Developer, Full-Stack Developer

---