DEV Community

Kyle Y. Parsotan
Kyle Y. Parsotan

Posted on

Build and Deploy a Weather Application with Django, PostgreSQL, and OpenWeatherMap (Step-by-Step Guide)

#django #python #webdev #tutorial

Introduction

Modern web applications often combine a powerful backend framework, a reliable relational database, and third-party APIs to provide dynamic content. In this tutorial, you'll build a Weather Application using Django, PostgreSQL, and the OpenWeatherMap API.

Instead of simply displaying weather data, the application will also store each city search in a PostgreSQL database, allowing you to view search history and extend the project with additional features later.

By the end of this guide, you'll learn how to:

  • Install Django and PostgreSQL
  • Configure PostgreSQL with Django
  • Create a Django project and application
  • Build database models
  • Connect to the OpenWeatherMap API
  • Display live weather information
  • Save search history in PostgreSQL
  • Run the project locally
  • Prepare the project for production deployment

What You'll Build

The finished application includes:

  • Weather search by city
  • Live weather information
  • Temperature
  • Humidity
  • Wind speed
  • Weather icon
  • Search history
  • PostgreSQL database
  • Responsive interface

Technology Stack

Component Technology
Backend Django
Database PostgreSQL
Database Tool pgAdmin 4
API OpenWeatherMap
Frontend HTML, CSS, Bootstrap
Language Python

Prerequisites

Install the following software before starting:

  • Python 3.10+
  • PostgreSQL
  • pgAdmin 4
  • Visual Studio Code
  • Git (optional)

Image Placeholder: Hero banner showing Django + PostgreSQL + OpenWeatherMap architecture.

Step 1: Create the Project 

mkdir weather_project
cd weather_project

python -m venv venv

# Windows
venv\Scripts\activate

# Linux/macOS
source venv/bin/activate
Enter fullscreen mode Exit fullscreen mode

Install Django and PostgreSQL support:

pip install django psycopg2-binary requests python-dotenv
Enter fullscreen mode Exit fullscreen mode

Image Placeholder: Terminal showing project creation and package installation.

Step 2: Create the Django Project 

django-admin startproject config .
python manage.py startapp weather
Enter fullscreen mode Exit fullscreen mode

Project structure:

weather_project/
│
├── config/
├── weather/
├── templates/
├── static/
├── manage.py
└── requirements.txt
Enter fullscreen mode Exit fullscreen mode

Image Placeholder: VS Code Explorer with the generated project tree.

Step 3: Install PostgreSQL and pgAdmin

Install PostgreSQL and launch pgAdmin.

Create:

  • Database: weatherdb
  • User: weatheruser
  • Password: yourpassword

Image Placeholder: pgAdmin dashboard showing the new database.

Step 4: Configure Django to Use PostgreSQL

Update config/settings.py:

DATABASES = {
    "default": {
        "ENGINE": "django.db.backends.postgresql",
        "NAME": "weatherdb",
        "USER": "weatheruser",
        "PASSWORD": "yourpassword",
        "HOST": "localhost",
        "PORT": "5432",
    }
}
Enter fullscreen mode Exit fullscreen mode

Run migrations:

python manage.py migrate
Enter fullscreen mode Exit fullscreen mode

Image Placeholder: Successful migration output in the terminal.

Step 5: Create the Weather Model

Create weather/models.py:

from django.db import models

class WeatherSearch(models.Model):
    city = models.CharField(max_length=100)
    temperature = models.FloatField()
    description = models.CharField(max_length=200)
    humidity = models.IntegerField()
    wind_speed = models.FloatField()
    searched_at = models.DateTimeField(auto_now_add=True)

    def __str__(self):
        return self.city
Enter fullscreen mode Exit fullscreen mode

Create migrations:

python manage.py makemigrations
python manage.py migrate
Enter fullscreen mode Exit fullscreen mode

Image Placeholder: Database table displayed in pgAdmin.

Step 6: Get an OpenWeatherMap API Key

  1. Register for a free OpenWeatherMap account.
  2. Generate an API key.
  3. Store the key in a .env file.

Example:

OPENWEATHER_API_KEY=YOUR_API_KEY
Enter fullscreen mode Exit fullscreen mode

Image Placeholder: OpenWeatherMap API dashboard with the API key section highlighted.

Step 7: Create the Weather View

Implement a Django view that:

  1. Accepts a city name.
  2. Calls the OpenWeatherMap API.
  3. Parses the JSON response.
  4. Saves the result in PostgreSQL.
  5. Renders the weather details.

Image Placeholder: VS Code showing the view implementation.

Step 8: Build the User Interface

Create:

  • templates/weather/index.html
  • static/css/style.css

The interface should include:

  • Search form
  • Weather card
  • Weather icon
  • Search history table

Image Placeholder: Browser displaying the completed weather dashboard.

Step 9: Configure URLs

Add application routes:

urlpatterns = [
    path("", views.index, name="index"),
]
Enter fullscreen mode Exit fullscreen mode

Image Placeholder: URL configuration highlighted in VS Code.

Step 10: Run the Application

Start the development server:

python manage.py runserver
Enter fullscreen mode Exit fullscreen mode

Visit:

http://127.0.0.1:8000
Enter fullscreen mode Exit fullscreen mode

Search for cities such as:

  • London
  • Paris
  • Tokyo
  • New York

The application retrieves the latest weather and stores the search in PostgreSQL.

Image Placeholder: Browser showing a successful weather search.

Step 11: Verify Data in PostgreSQL

Open pgAdmin.

Navigate to:

weatherdb
└── Schemas
    └── public
        └── weather_weathersearch
Enter fullscreen mode Exit fullscreen mode

Run:

SELECT * FROM weather_weathersearch;
Enter fullscreen mode Exit fullscreen mode

You should see all saved searches with timestamps and weather details.

Image Placeholder: pgAdmin query results displaying stored weather searches.

Step 12: Create a Search History Page

Display previous searches in a table:

City Temperature Humidity Date

This demonstrates that the application is reading data from PostgreSQL.

Image Placeholder: Search history page in the browser.

Step 13: Project Architecture 

Browser
    │
    ▼
Django Views
    │
    ├──────────────► OpenWeatherMap API
    │                     │
    │                     ▼
    │                JSON Response
    │
    ▼
PostgreSQL Database
    │
    ▼
Templates (HTML/CSS)
    │
    ▼
User Interface
Enter fullscreen mode Exit fullscreen mode

Image Placeholder: Architecture diagram with icons for browser, Django, API, and PostgreSQL.

Step 14: Local Deployment

Collect static files:

python manage.py collectstatic
Enter fullscreen mode Exit fullscreen mode

Apply migrations:

python manage.py migrate
Enter fullscreen mode Exit fullscreen mode

Create an administrator account:

python manage.py createsuperuser
Enter fullscreen mode Exit fullscreen mode

Start the application:

python manage.py runserver
Enter fullscreen mode Exit fullscreen mode

Visit:

http://127.0.0.1:8000
Enter fullscreen mode Exit fullscreen mode

The application is now running locally with PostgreSQL as its database.

Image Placeholder: Local deployment flow diagram.

Common Errors

psycopg2 Import Error 

pip install psycopg2-binary
Enter fullscreen mode Exit fullscreen mode

Database Connection Failed

  • Check PostgreSQL is running.
  • Verify credentials in settings.py.
  • Confirm port 5432 is open.

Invalid API Key

  • Confirm the API key is correct.
  • Wait a few minutes after generating a new key before first use.

Future Improvements

You can extend this project with:

  • Five-day weather forecast
  • User authentication
  • Favorite cities
  • Interactive weather maps
  • Charts with historical data
  • Docker support
  • Deployment to Render, Railway, or AWS
  • Celery for scheduled weather updates
  • REST API using Django REST Framework

Conclusion

You have successfully built a full-stack Weather Application using Django, PostgreSQL, pgAdmin, and the OpenWeatherMap API. The project demonstrates how to integrate a third-party API, persist data in a relational database, and build a responsive web interface using Django's Model–View–Template architecture. It provides a strong foundation for expanding into more advanced features and production deployments.

Top comments (0)