Python Code Explainer - Dockerized Project

 

Python Code Explainer - Dockerized Project

Introduction

This project focuses on containerizing a full-stack Hostel Finder web application using Docker. The application allows students to search and review hostels with a seamless backend-frontend integration. The aim is to simplify deployment and achieve complete environment consistency by using Docker containers for both frontend and backend services.

The project was developed in three parts:

• Part 1: Partial implementation (initial container setup and basic connection testing)

• Part 2: Full deployment of frontend and backend containers with inter-container communication

• Part 3: Integration, testing, and final validation of the system using APIs and UI

Objectives of Part 1

• To understand Docker container setup for a web project.

• To implement a basic backend container using Flask.

• To test partial connectivity between the backend and local environment.

Objectives of Part 2

• To deploy the entire Hostel Finder web application using multiple containers.

• To connect frontend (HTML, CSS, JavaScript) with the backend Flask API.

• To create Dockerfiles for both containers and link them using Docker networking.

• To successfully build and run both containers using docker-compose.

Objectives of Part 3

• To perform complete integration testing of the full application.

• To ensure communication between frontend and backend containers.

• To test the API endpoints, user login, registration, and review submission features.

• To push the modified containers to Docker Hub.

Name of the Containers Involved and Download Links

1. Frontend Container – https://hub.docker.com/repository/docker/adj004/frontend

2. Backend Container – https://hub.docker.com/repository/docker/adj004/backend

Name of the Other Software Involved along with Purpose

Software	Purpose
Docker Desktop	To containerize and manage the frontend and backend images.
VS Code	Code editor used for developing the frontend and backend files.
Flask (Python)	Used for backend API and server logic.
Node / npm	Used for frontend dependency management.
MongoDB (Cloud or Local)	Database for storing user and hostel details.
GitHub	Version control and repository hosting.

Overall Architecture of the Three DAs

Part 1: Backend container creation → API testing via localhost.
Part 2: Frontend + backend containers built → Docker network linking → full deployment.
Part 3: Integrated testing → API & UI synchronization → pushing final containers to Docker Hub.

Overall Input: User requests via web interface (login, search, review).
Overall Output: Data fetched/stored via Flask API and displayed on the web frontend.

Architecture Description 

The architecture of the Hostel Finder project is based on a modular microservice design using Docker. The frontend container handles all user interactions through a responsive HTML/CSS/JS interface, while the backend container manages the application’s business logic using Flask and connects to a database for persistent storage. Both containers communicate through a common Docker network, allowing seamless request and response exchange without exposing internal ports externally.

This architecture ensures scalability, portability, and easy debugging. Since each component runs in its own isolated environment, developers can modify or update one service without affecting the others. The use of Docker simplifies deployment across different machines, ensuring consistent behavior regardless of local configurations. This design makes the application ideal for future cloud deployment and CI/CD integration.

Procedure – Part 1

Steps Involved:

1. Installed Docker and verified installation using docker --version.

2. Created a simple Flask backend application (app.py).

3. Wrote a Dockerfile to containerize the backend.

4. Built the image using docker build -t backend ..

5. Ran the container and accessed the API on localhost.

6. Verified partial functionality through browser and Postman.
   
   
   
   
   

   
   
   
   
   
   
   
   

Procedure – Part 2

Steps Involved:

1. Developed a full frontend using HTML, CSS, and JS.

2. Containerized the frontend with its own Dockerfile.

3. Created a Docker network and linked the frontend with backend.

4. Used environment variables to specify backend API base URL.

5. Built both containers using docker-compose build.

6. Tested the complete application via localhost:3000 or configured port.
   

   
   
   
   
   
   
   

Procedure – Part 3

Steps Involved:

1. Conducted integration testing for all modules.

2. Verified review submission and admin dashboard updates.

3. Solved API connectivity and port exposure issues.

4. Committed the final Docker images.

5. Pushed both containers to Docker Hub using:

   docker tag frontend adj004/frontend
   docker push adj004/frontend
   docker tag backend adj004/backend
   docker push adj004/backend
   

6. Confirmed working deployment by re-running both images and testing endpoints.
   

   
   
   
   
   
   
   

Modifications Done in the Containers After Downloading

1. Updated environment variables for API base URL.

2. Modified Flask routes for proper CORS handling.

3. Adjusted Dockerfiles to expose correct ports (5000 for backend, 3000 for frontend).

4. Added requirements.txt for backend dependencies.

5. Integrated frontend API calls with new backend endpoints.

6. Configured persistent Docker volumes for database storage.

GitHub / DockerHub Links of Modified Containers

• Frontend Container: https://hub.docker.com/repository/docker/adj004/frontend

• Backend Container: https://hub.docker.com/repository/docker/adj004/backend
  

  Outcomes of the DA

• Successfully created a containerized full-stack web application.

• Achieved end-to-end connectivity between frontend and backend through Docker.

• Gained hands-on experience in Dockerfile writing, image building, and container linking.

• Pushed and hosted both containers on Docker Hub for reuse and redeployment.

Conclusion

This project provided a complete understanding of containerized deployment for full-stack applications. By implementing the Hostel Finder app using Docker, both development and deployment became smoother and more efficient. The modular design enables easy debugging, scalability, and consistency across environments. Overall, the project achieved all its objectives by demonstrating real-world Docker usage in software deployment.

References and Acknowledgements

1. Original DockerHub repositories and tutorials used for base images.

2. VIT SCOPE, current semester course on “Containerization using Docker.”

3. IIT Bombay Docker Tutorial – https://dockerlabs.collabnix.com/

4. GitHub repositories of open-source Flask and frontend templates.

5. My peers and mentors for guidance.

6. Family for continuous support and motivation.