Introduction
In this project, I built a full-stack web application using Docker to demonstrate containerization concepts including Dockerfiles, Docker Compose, volumes, networking, and environment variables.
The application allows users to submit feedback through a web interface, which is stored in a PostgreSQL database running in a Docker container.
Project Architecture
The system consists of three services:
- Frontend (HTML/CSS/JS served via Nginx)
- Backend (Flask REST API)
- PostgreSQL Database
All services run in isolated containers connected through a custom Docker network.
Dockerfile Explanation
Backend Dockerfile
- Base image:
python:3.11-slim - Installs Python dependencies
- Exposes port 5000
- Runs Flask app
Frontend Dockerfile
- Base image:
nginx:alpine - Copies static files into Nginx web directory
- Exposes port 80
Docker Compose Orchestration
Docker Compose was used to orchestrate multiple containers:
- PostgreSQL database
- Flask backend API
- Nginx frontend server
Service dependencies were defined using depends_on, and a custom Docker network enabled inter-container communication.
Volumes and Networking
A Docker volume (pgdata) was created to persist PostgreSQL data.
A custom network (feedback-net) allows containers to communicate using service names instead of IP addresses.
Environment Variables
Sensitive data such as database credentials were stored in a .env file and injected into containers using Docker Compose.
This avoids hardcoding secrets in the source code.
Challenges and Lessons Learned
One challenge was understanding the difference between Docker internal networking and browser networking. Docker service names work inside containers, but browsers must use localhost when accessing exposed ports.
Another lesson was ensuring database persistence using Docker volumes.
Conclusion
This project demonstrated real-world Docker usage, including multi-container orchestration, persistent storage, environment configuration, and networking. It highlights how Docker simplifies deploying full-stack applications.
SYSTEM ARCHITECTURE DIAGRAM
+--------------------+
| Browser |
+---------+----------+
|
v
+--------------------+
| Frontend (Nginx) |
| Container :8080 |
+---------+----------+
|
v
+--------------------+
| Backend (Flask) |
| Container :5000 |
+---------+----------+
|
v
+--------------------+
| PostgreSQL Database |
| Docker Volume pgdata|
+--------------------+
you can access the full project in my github repo at;
https://github.com/YomiHubHub/user-feedback-docker.git
Top comments (1)
Awesome