WeatherApp is a modern, multilingual weather application built with React and TypeScript. It provides real-time weather information using the OpenWeatherMap API with a beautiful and responsive user interface.
- 🌍 Bilingual Support (Persian & English)
- 🌓 Dark/Light Mode with system preference detection
- 📍 Interactive Map showing city location with Leaflet
- 📊 Temperature Chart for 6-day forecast
- 🎯 Suggested Cities for quick search
- 📱 Fully Responsive Design for all devices
- ⚡ Blazing Fast with Vite
- 🎨 Beautiful UI with Tailwind CSS
| Category | Technology | Badge |
|---|---|---|
| Framework | React 19.2.7 |  |
| Language | TypeScript 6.0.2 |  |
| Build Tool | Vite 8.1.0 |  |
| Styling | Tailwind CSS 3.4.19 |  |
| Maps | Leaflet 1.9.4 |  |
| Charts | Recharts 3.9.0 |  |
| Icons | React Icons 5.0.1 |  |
| Animation | Framer Motion 12.42.0 |  |
| API | OpenWeatherMap |  |
- Node.js
- npm, yarn, or pnpm
git clone https://github.com/Mr-Syntax1/Weather-app.git
cd Weather-app
npm install
npm run dev
npm run build
npm run preview
src/
├── 📁 assets/ # Static images and assets
├── 📁 components/ # React components
│ ├── Error/ # Error messages
│ ├── ForecastCard/ # Weather forecast cards
│ ├── LanguageToggle/ # Language switch button
│ ├── Layout/ # Header, Footer, Container
│ ├── Loading/ # Loading spinner
│ ├── Map/ # Interactive map
│ ├── Search/ # Search bar
│ ├── SuggestedCities/# City suggestions
│ ├── TemperatureChart/# Temperature chart
│ ├── ThemeToggle/ # Theme switch button
│ └── Weather/ # Weather card & details
├── 📁 contexts/ # Context API (Language, Theme)
├── 📁 fonts/ # Persian & English fonts
├── 📁 hooks/ # Custom Hooks (useWeather)
├── 📁 locales/ # Translation files (fa, en)
├── 📁 services/ # API requests
├── 📁 types/ # TypeScript Interfaces
├── 📁 utils/ # Helper functions
├── App.tsx
├── main.tsx
└── index.css
git checkout -b feature/AmazingFeature
git commit -m 'Add some AmazingFeature
git push origin feature/AmazingFeature
⭐ Don't forget to star the project if you like it! ⭐