A beautifully designed, ultra-minimalistic weather application that delivers real-time weather information with stunning animations and intelligent dark/light mode switching. Built with modern web technologies for optimal performance and user experience.
- 🌤️ Real-time Weather Data - Powered by WeatherAPI for accurate, up-to-date weather information
- 🎨 Stunning Lottie Animations - Contextual weather animations that match current conditions
- 🌙 Smart Dark Mode - Automatically switches to dark theme during night hours (6 PM - 6 AM)
- 📱 Fully Responsive - Seamless experience across all devices and screen sizes
- 📍 Location-Based - Automatically detects your location for instant weather updates
- 🎭 Modern Typography - Features Bebas Neue font for a bold, contemporary look
- ⚡ Lightning Fast - Built with Vite for optimal performance and instant loading
- 🎯 Minimalistic Design - Clean, distraction-free interface focusing on essential information
- 🔄 Smooth Transitions - Polished animations and transitions throughout the app
- Node.js (v18 or higher)
- npm or yarn package manager
- WeatherAPI key (free from WeatherAPI.com)
-
Clone the repository
git clone https://github.com/AndreyPetkov03/weather-app2.git cd weather-app2 -
Install dependencies
npm install
-
Set up environment variables
# Copy the example file cp .env.example .env # Edit .env and add your WeatherAPI key VITE_WEATHER_API_KEY=your_actual_api_key_here
-
Start the development server
npm run dev
-
Open your browser Navigate to
http://localhost:5173and enjoy!
- React 19 - Latest React with modern hooks and features
- TypeScript - Type-safe development for better code quality
- Vite - Next-generation frontend tooling for blazing fast builds
- Tailwind CSS v4 - Utility-first CSS framework for rapid UI development
- Bebas Neue Font - Modern, bold typography via Google Fonts
- Lottie Animations - High-quality, lightweight animations via @lottiefiles/dotlottie-react
- WeatherAPI - Reliable weather data provider with global coverage
- Geolocation API - Browser-native location detection
This weather app embraces minimalism without sacrificing functionality. The design focuses on:
- Essential Information Only - Location, weather animation, and temperature
- Contextual Theming - Automatically adapts to time of day
- Responsive Typography - Scales beautifully across all screen sizes
- Smooth Interactions - Polished loading states and error handling
- Zero Clutter - Clean interface with strategic use of whitespace
The app provides an optimal viewing experience across a wide range of devices:
- Mobile First - Designed primarily for mobile devices
- Tablet Optimized - Perfect scaling for medium-sized screens
- Desktop Enhanced - Takes advantage of larger screens with bigger animations
Dynamic Lottie animations that respond to real weather conditions:
- ☀️ Sunny - Bright sun animation for clear skies
- 🌙 Moon - Peaceful moon animation for clear nights
- ☁️ Cloudy - Floating clouds for overcast conditions
- 🌧️ Rainy - Animated raindrops for precipitation
- ⛈️ Thunderstorm - Dramatic lightning effects
- ❄️ Snow - Gentle snowfall animation
- 🌪️ Windy - Dynamic wind effects
Create a .env file in the root directory:
# Required: Your WeatherAPI key
VITE_WEATHER_API_KEY=your_weatherapi_key_here# Development server
npm run dev
# Build for production
npm run build
# Preview production build
npm run preview
# Lint code
npm run lint- API keys are securely stored in environment variables
- No sensitive data is committed to version control
- Environment files are properly gitignored
- Type-safe API interactions with TypeScript
This project is open source and available under the MIT License.
Contributions, issues, and feature requests are welcome! Feel free to check the issues page.
Andrey Petkov - @AndreyPetkov03
Project Link: https://github.com/AndreyPetkov03/weather-app2
Made with ❤️ and modern web technologies