Build a Beautiful Weather App with Flask and OpenWeather API: A Step-by-Step Guide

4 min readAug 9, 2024

Introduction:

Are you looking to create a simple yet stunning weather app? Look no further! In this tutorial, we’ll walk you through the process of building a fully functional weather application using Flask and the OpenWeather API. Whether you’re a beginner or an experienced developer, this guide will help you create a sleek web UI that displays real-time weather information for any city in the world.

Why Choose Flask for Your Weather App?

Flask is a lightweight and flexible web framework for Python, making it an excellent choice for developing small to medium-sized web applications. Its simplicity allows developers to quickly set up and customize their projects without the overhead that comes with more complex frameworks. Combined with the powerful OpenWeather API, Flask can help you build a weather app that not only functions well but also looks great.

What You’ll Learn:

How to set up a Flask project
How to integrate the OpenWeather API for real-time weather data
How to design a user-friendly web UI with HTML and CSS
Tips for making your weather app SEO-friendly and attractive

Step 1: Setting Up Your Flask Project

First, you’ll need to set up your project structure. Create a directory named weather_app and within it, create the following structure:

weather_app/
│
├── app.py
├── templates/
│   └── index.html
└── static/
    └── style.css

Step 2: Install Flask

To get started, you need to install Flask. You can easily do this using pip:

pip install flask

This command will install Flask and its dependencies, allowing you to create your web application.

Step 3: Create `app.py`

The app.py file will be the backbone of your Flask application. It will handle requests, retrieve data from the OpenWeather API, and render the HTML template.

Here’s the complete code for app.py:

from flask import Flask, render_template, request
import requests

app = Flask(__name__)

def get_weather(city_name, api_key):
    base_url = "http://api.openweathermap.org/data/2.5/weather?"
    complete_url = f"{base_url}q={city_name}&appid={api_key}&units=metric"
    response = requests.get(complete_url)
    return response.json()

@app.route('/', methods=['GET', 'POST'])
def index():
    weather_data = None
    if request.method == 'POST':
        city_name = request.form['city']
        api_key = "your_api_key"  # Replace with your actual API key
        weather_data = get_weather(city_name, api_key)
    
    return render_template('index.html', weather_data=weather_data)

if __name__ == "__main__":
    app.run(debug=True)

Step 4: Create the HTML Template

Your app needs a clean and intuitive interface. In the templates/ directory, create index.html to serve as the main template.

Here’s the HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Weather App</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
    <div class="container">
        <h1>Weather App</h1>
        <form method="POST">
            <input type="text" name="city" placeholder="Enter city name" required>
            <button type="submit">Get Weather</button>
        </form>
        {% if weather_data %}
            {% if weather_data.cod != '404' %}
                <div class="weather-result">
                    <h2>Weather in {{ weather_data.name }}</h2>
                    <p>Temperature: {{ weather_data.main.temp }}°C</p>
                    <p>Pressure: {{ weather_data.main.pressure }} hPa</p>
                    <p>Humidity: {{ weather_data.main.humidity }}%</p>
                    <p>Description: {{ weather_data.weather[0].description.capitalize() }}</p>
                </div>
            {% else %}
                <p class="error">City not found!</p>
            {% endif %}
        {% endif %}
    </div>
</body>
</html>

Step 5: Style Your App with CSS

A beautiful UI enhances the user experience. In the static/ directory, create a style.css file with the following styles:

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    color: #333;
}

.container {
    max-width: 600px;
    margin: 50px auto;
    padding: 20px;
    background: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

h1 {
    text-align: center;
    color: #007BFF;
}

form {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

input[type="text"] {
    width: 70%;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

button {
    padding: 10px 20px;
    background-color: #007BFF;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

.weather-result {
    text-align: center;
}

.error {
    color: red;
    text-align: center;
}

Step 6: Run Your Flask Application

Now, you’re ready to see your weather app in action. Run the Flask application by executing:

python app.py
  or 
flask run --host=172.31.43.148

Visit http://127.0.0.1:5000/ in your web browser, and you'll see your weather app live!

Conclusion:

Congratulations! You’ve successfully built a beautiful weather app using Flask and the OpenWeather API. This project is a great way to enhance your web development skills while creating something practical and visually appealing.