Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/manju1807/advanced-weather-app-nextjs

Advanced Weather App | Next.js 14 Weather Dashboard
https://github.com/manju1807/advanced-weather-app-nextjs

advanced-weather-app data-visualization interactive-maps nextjs-14 openweather-api react reactjs real-time-weather redux-toolkit server-side-rendering tailwindcss typescript weather-app weather-app-react weather-application weather-dashboard weather-forecast weather-monitoring

Last synced: about 9 hours ago
JSON representation

Advanced Weather App | Next.js 14 Weather Dashboard

Awesome Lists containing this project

README 

        
# 🌤️ 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:



```bash

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:



```env

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](https://openweathermap.org/api) to use the weather services.



3.📦 Install dependencies:



```bash

npm install

# or

yarn

```



4.🚀 Run the development server:



```bash

npm run dev

# or

yarn dev

```



5.🌐 Open [http://localhost:3000](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



- ![Screenshot 1](https://github.com/user-attachments/assets/weather-app-screenshot-1.png)

- ![Screenshot 2](https://github.com/user-attachments/assets/weather-app-screenshot-2.png)

- ![Screenshot 3](https://github.com/user-attachments/assets/weather-app-screenshot-3.png)

- ![Screenshot 4](https://github.com/user-attachments/assets/weather-app-screenshot-4.png)



---



Created with ❤️ by Manjunath R

🌤️ Weather data provided by OpenWeather API