Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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.
- Host: GitHub
- URL: https://github.com/aleexvdev/app-weather
- Owner: aleexvdev
- Created: 2024-11-16T16:15:31.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2024-12-14T17:07:17.000Z (about 1 month ago)
- Last Synced: 2024-12-14T17:26:39.490Z (about 1 month ago)
- Topics: framer-motion, maplibre-gl-js, nextjs15, shadcn-ui, tailwindcss, typescript, zustand
- Language: TypeScript
- Homepage: https://app-weather-v2.vercel.app/
- Size: 604 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
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