manju1807 / Weatherly-nextjs-weather-app

Weatherly 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.

🌤️ Weatherly - Your Ultimate Weather Companion

Weatherly 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:

1. 🌍 Implemented core weather tracking features
2. 🔍 Integrated OpenWeather API for accurate data
3. 🎨 Developed responsive UI with theme support
4. ♿ Implemented comprehensive accessibility features
5. ⚡ 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:

1. 📥 Clone the repository to your local machine:

git clone https://github.com/yourusername/Advanced-weather-app-nextjs.git
cd Advanced-weather-app-nextjs

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= 0lh8qVL49XIw3o30fgDPxcIgTjfBfiyE
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 Manjunath R 🌤️ Weather data provided by OpenWeather API