A modern, responsive, and feature-rich weather application built with Flask, tailored specifically for cities in Bangladesh. Shamiran provides real-time weather data, detailed forecasts, and advanced atmospheric insights through a clean and intuitive user interface.
- Features
- Demo
- Tech Stack
- Prerequisites
- Installation
- Configuration
- Usage
- API Key Setup
- Project Structure
- Contributing
- License
- Acknowledgements
- Real-Time Weather Data: Get current temperature, humidity, wind speed, "feels like" temperature, and weather conditions for any city in Bangladesh.
- Geolocation Support: Automatically detects the user's location to provide instant local weather updates.
- City Search: A powerful search bar with auto-suggestions and debouncing for finding cities quickly.
- Hourly Forecast: View a detailed, hour-by-hour forecast for the next 15 hours.
- Weather Alerts: Displays official weather alerts and warnings directly from the API when available.
- Air Quality Index (AQI): Displays the current AQI level, PM2.5 concentration, and health recommendations.
- UV Index: Provides the current UV index with corresponding health advice for sun exposure.
- Moon Phases: Shows the current moon phase, moonrise/moonset times, and calculates the date of the next phase.
- Interactive Weather Map: An integrated map using Leaflet.js and OpenStreetMap, with an optional precipitation radar layer from OpenWeatherMap.
- Favorites System: Save frequently accessed cities to a favorites list for quick retrieval, persisted in localStorage.
- Dynamic Theming: The application's background and UI elements change dynamically based on the current weather condition (e.g., rain animations for rainy weather).
- Dark/Light Mode: A user-controlled toggle to switch between light and dark themes, independent of the weather theme.
- Responsive Design: Fully responsive layout that works seamlessly on desktop, tablet, and mobile devices.
- Weather Animations: Subtle, performant CSS animations for rain, snow, clouds, and lightning enhance the user experience.
- Modern UI: Built with Tailwind CSS for a clean, modern, and maintainable design.
The application features a glassmorphic design with a dynamic background that reflects the current weather. Users can interact with the search bar, use geolocation, toggle between light and dark modes, and view detailed information on cards that are both informative and visually appealing.
| Component | Technology |
|---|---|
| Backend | Python, Flask |
| Frontend | HTML5, Tailwind CSS, Vanilla JavaScript |
| APIs | OpenWeatherMap |
| Mapping | Leaflet.js, OpenStreetMap |
| Icons | Font Awesome |
| Other Libraries | Astral (for moon phase calculations) |
- Python 3.8 or higher
pip(Python package installer)- An API key from OpenWeatherMap
Follow these steps to set up the project locally:
-
Clone the repository:
git clone https://github.com/your-username/shamiran.git cd shamiran -
Create and activate a virtual environment:
# For Unix/macOS python3 -m venv venv source venv/bin/activate # For Windows python -m venv venv .\venv\Scripts\activate
-
Install the required dependencies:
pip install -r requirements.txt
-
Create a
.envfile in the root directory and add your API keys (see Configuration). -
Run the application:
python run.py
The application will be available at http://127.0.0.1:5000.
The application relies on environment variables for configuration. Create a file named .env in the project root and add the following variables:
API_KEY=your_openweathermap_api_key_here
SECRET_KEY=a_very_secret_random_string_for_flask
API_KEY: Your personal API key from OpenWeatherMap. This is required for the app to function.SECRET_KEY: A secret key for Flask session management. Generate a secure, random string for this.
Once the application is running:
- Default View: The homepage will display the weather for Dhaka by default.
- Search for a City: Type the name of any city in Bangladesh into the search bar. Suggestions will appear as you type.
- Use Geolocation: Click the "My Location" button to get weather for your current position.
- Manage Favorites: Click the star icon next to the city name to add or remove it from your favorites list in the sidebar.
- View Details: Scroll down to see the hourly forecast, AQI/UV Index, and moon phase information.
- Toggle Map: Click the map icon to reveal an interactive weather map for the selected location.
- Toggle Theme: Use the switch in the header to toggle between light and dark modes.
- Sign up for a free account on OpenWeatherMap.
- Navigate to the "API keys" tab in your account dashboard.
- An API key will be generated for you by default. Copy this key.
- Paste the key into the
.envfile as described in the Configuration section.
Shamiran
├── LICENSE
├── README.md
├── app
│ ├── __init__.py
│ ├── api
│ │ ├── __init__.py
│ │ └── weather_api.py
│ ├── config.py
│ ├── models
│ │ └── __init__.py
│ ├── routes
│ │ ├── __init__.py
│ │ └── main.py
│ ├── services
│ │ ├── __init__.py
│ │ └── weather_service.py
│ ├── static
│ │ ├── css
│ │ │ └── darkmode.css
│ │ └── js
│ │ └── main.js
│ ├── templates
│ │ ├── base.html
│ │ └── index.html
│ └── utils
│ ├── __init__.py
│ ├── cache.py
│ ├── helpers.py
│ └── moon_phase.py
├── requirements.txt
└── run.py
Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
- 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 terms of the LICENSE file in this repository.
- OpenWeatherMap for providing the comprehensive weather data API.
- Leaflet.js and OpenStreetMap for the mapping functionality.
- Tailwind CSS for the utility-first CSS framework.
- Font Awesome for the high-quality icons.
- Astral for the moon phase calculation library.