Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/aleexvdev/app-weather

🌦️ Weather App is an interactive web application designed to display accurate and up-to-date weather information.
https://github.com/aleexvdev/app-weather

framer-motion maplibre-gl-js nextjs15 shadcn-ui tailwindcss typescript zustand

Last synced: about 1 month ago
JSON representation

🌦️ Weather App is an interactive web application designed to display accurate and up-to-date weather information.

Awesome Lists containing this project

README

        

# Modern Weather Dashboard 🌦️

![Weather Dashboard Preview](https://github.com/aleexvdev/app-weather/blob/main/preview.png)

A beautiful, modern weather dashboard built with Next.js 15, inspired by [DariusLukasukas](https://github.com/DariusLukasukas/nextjs-weather-app) stunning weather app design. This project combines elegant UI design with powerful functionality to deliver a premium weather tracking experience.

## ✨ Features

- **Real-Time Weather Data**: Get instant access to current weather conditions for any city worldwide
- **5-Day Forecast**: Plan ahead with detailed 5-day weather predictions
- **Dark/Light Mode**: Seamless theme switching for comfortable viewing any time of day
- **Recent Searches**: Quick access to your previously searched locations
- **Responsive Design**: Beautiful on all devices - from mobile to desktop
- **Weather Details**: Comprehensive weather information including:
- Temperature & "Feels Like"
- Humidity & Wind Speed
- Visibility & Pressure
- Sunrise & Sunset Times
- UV Index
- Air Quality Data

## 🛠️ Installation

1. Clone the repository:
```bash
git clone https://github.com/aleexvdev/app-weather.git
```

2. Install dependencies:
```bash
cd weather-dashboard
npm install
```

3. Create a `.env.local` file:
```env
NEXT_PUBLIC_OPENWEATHER_API_KEY=your_api_key_here
```

4. Start the development server:
```bash
npm run dev
```

## 🌟 Key Features

### Elegant UI/UX
- Modern bento grid layout
- Smooth animations and transitions
- Skeleton loading states
- Responsive design principles
- Glass morphism effects

### Performance
- Optimized API calls with SWR
- Efficient state management
- Dynamic imports for better loading times
- SEO friendly

### Developer Experience
- Clean code architecture
- Type-safe development
- Modular component structure
- Easy to maintain and scale

## 📱 Mobile First

The dashboard is designed with a mobile-first approach, ensuring a great experience across all devices:
- Responsive grid layouts
- Touch-friendly interfaces
- Optimized for various screen sizes
- Adaptive UI elements

## 🤝 Contributing

Contributions are welcome! Feel free to:
- Open issues
- Submit PRs
- Suggest new features
- Improve documentation

## 🙏 Acknowledgments

- Design inspiration from [DariusLukasukas | Meteo-nix](https://github.com/DariusLukasukas/nextjs-weather-app)
- Weather data provided by [OpenWeatherMap](https://openweathermap.org/)
- Icons by [Lucide](https://lucide.dev/)

## 🌐 Links

- [Live Demo](https://app-weather-v2.vercel.app/)
- [Report Bug](https://github.com/aleexvdev/app-weather/issues)
- [Request Feature](https://github.com/aleexvdev/app-weather/issues)

---

Made with ❤️ by Alexander Valverde