A clean and minimalist weather application built with React that provides real-time weather information with a beautiful user interface. Features both light and dark modes for optimal viewing experience.
- Real-time Weather Data: Get current weather information using the Open-Meteo API
- City Search: Search for weather information by city name
- Dark/Light Mode: Toggle between dark and light themes
- Responsive Design: Works seamlessly across desktop and mobile devices
- Minimalist UI: Clean and intuitive user interface
- Weather Indicators:
- Temperature
- Humidity
- Wind Speed
- Weather Conditions
- React.js
- Vite
- Open-Meteo API
- CSS3
- JavaScript (ES6+)
- Clone the repository:
git clone https://github.com/your-username/weather-app.git
- Navigate to the project directory:
cd weather-app
- Install dependencies:
npm install
- Start the development server:
npm run dev
- Enter a city name in the search bar
- Press Enter or click the search icon
- View the current weather information
- Toggle between dark and light modes using the theme switch
weather-app/
├── src/
│ ├── components/
│ │ ├── Weather.jsx
│ │ └── Weather.css
│ ├── assets/
│ │ ├── search.png
│ │ ├── clear.png
│ │ └── ...
│ ├── App.jsx
│ └── main.jsx
├── public/
└── package.json
This project uses the Open-Meteo API for weather data:
- Geocoding API: Converts city names to coordinates
- Weather API: Provides current weather information
Background: #ffffff
Text Primary: #2c3e50
Text Secondary: #95a5a6
Background: #1a1b1e
Text Primary: #ecf0f1
Text Secondary: #bdc3c7
- Weather forecast for upcoming days
- Weather alerts and notifications
- Multiple location saving
- More detailed weather information
- Animated weather icons
- Unit conversion (Celsius/Fahrenheit)
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the project
- Create your feature branch (
git checkout -b feature/AmazingFeature
) - Commit your changes (
git commit -m 'Add some AmazingFeature'
) - Push to the branch (
git push origin feature/AmazingFeature
) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE.md file for details
- Weather icons from [Icon Source Name]
- Open-Meteo for providing the free weather API
- React team for the amazing framework
- Vite for the build tooling
- Node.js (v14.0.0 or higher)
- npm (v6.0.0 or higher)
- No API key is required as we're using the free Open-Meteo API
# Start development server
npm run dev
# Build for production
npm run build
# Preview production build
npm run preview
# Run tests
npm run test
This project uses:
- ESLint for JavaScript linting
- Prettier for code formatting
Weather/
├── Weather.jsx # Main component logic
├── Weather.css # Component styles
└── index.js # Export file
Common issues and solutions:
-
City not found
- Check the spelling of the city name
- Try using a more specific city name
-
Weather data not loading
- Check your internet connection
- Verify the city name is correct
- Try refreshing the page
-
Dark mode not persisting
- Clear browser cache
- Check localStorage permissions
The app is responsive across various screen sizes:
- Mobile (320px - 480px)
- Tablet (481px - 768px)
- Desktop (769px and above)
- No API keys required
- No sensitive data stored
- All API calls are made over HTTPS
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
The app is optimized for performance:
- Lazy loading of images
- Minimal dependencies
- Efficient state management
- Optimized build size