🌤️ Weather - Your Ultimate Weather Companion

Weather is a comprehensive weather application that provides real-time updates, forecasts, and detailed weather metrics. It's built with modern web technologies to provide a seamless and engaging user experience.

🚀 Key Features

🌍 Real-time weather updates and forecasts
🌡️ Detailed weather metrics including temperature, humidity, and wind speed
🌆 Air quality monitoring and UV index tracking
🎨 Light/Dark theme support
🌐 Multi-language support
📱 Responsive design for various devices
♿ Accessibility-focused interface
🗺️ Interactive weather maps

🛠️ Built With

⚡ Next.js - React framework for production
⚛️ React - JavaScript library for building user interfaces
📘 TypeScript - Typed superset of JavaScript
🎨 Tailwind CSS - Utility-first CSS framework
🎭 Radix UI - Unstyled, accessible components for React
🖼️ Lucide React - Beautiful & consistent icon pack
📊 Recharts - Composable charting library for React
🗺️ React Leaflet - Maps integration
🌙 next-themes - Theme management
🚨 React Error Boundary - Error handling

📈 Development Process

The development of Weatherly focused on creating a user-friendly interface with robust functionality:

🌍 Implemented core weather tracking features
🔍 Integrated OpenWeather API for accurate data
🎨 Developed responsive UI with theme support
♿ Implemented comprehensive accessibility features
⚡ Optimized performance across all devices Throughout the development process, I prioritized code quality, accessibility, and user experience.

🏃‍♂️ Running the Project

To run Weatherly locally, follow these steps:

📥 Clone the repository to your local machine:

git clone https://github.com/ankit0183/weather-webapp-nextjs.git
cd weather-webapp-nextjs.git

2.📦 Set up environment variables: Create a .env.local file in the root directory with the following format:

Example env:
NEXT_PUBLIC_OPENWEATHER_API_KEY= 595aeccbd9b52cf1733f5c84d6f2aa95
NEXT_PUBLIC_BASE_URL= http://localhost:3000

Note: You'll need to obtain an API key from OpenWeather to use the weather services.

3.📦 Install dependencies:

npm install
# or
yarn

4.🚀 Run the development server:

npm run dev
# or
yarn dev

5.🌐 Open http://localhost:3000 in your browser

📝 Note

This project uses the OpenWeather API for weather data. Ensure you comply with OpenWeather's terms of service when using their API.

Screenshots

Created with ❤️ by Ankit kanojiya 🌤️ Weather data provided by Google API OpenWeather API