WEATHER WEBSITE PROJECT USING DOCKERS

Dockerised Weather Website Project By Abhishek Prabakar

 Introduction

Weather Website Project with Dockers: It is a full stack web application that aims to offer real-time and forecasted weather data to its users in a contained architecture based on a modernized architecture. The project is a combination of front-end development, machine learning, and database management that provides an end-to-end solution in weather forecasting.

The user interface is created with HTML, CSS, and JavaScript, the backend interface is created with Flask, and the persistent data storage is done with MongoDB, each is encapsulated in Docker containers so that it can be deployed consistently across environments. The system predictive power is promoted by incorporating an ML model, which is trained on past weather data, and Docker promotes its modularity and scalability and facilitates maintenance. This multi-container infrastructure demonstrates how the principles of DevOps should be practically applied to create and deploy smart web applications.

Objectives of Part 1 – Frontend Development and Dockerization

•  To create an interactive and friendly web interface based on HTML, CSS and JavaScript to show live and forecasted weather information.
• To facilitate the real-time updates with the backend using the APIs of the RESTful type. To facilitate the use of the responsive design across devices and browsers.
•  To containerize the frontend with the Docker (image: weather-frontend-dev) in order to deploy it platform-independently
•   To add Nginx to serve as an efficient host of both static files and front end asset hosting.

Objectives of Part 2 – Backend, Machine Learning, and API Integration

•   To retrieve real-time weather information with the help of the OpenWeatherMap API and save it into weather_dataNew1.csv to analyze it.
•   To train a predictive Machine Learning model (weather_model1.pkl) with algorithms of either Random Forest or XGBoost to short-term weather forecasting (3, 6, and 9 hours into the future).
•   To create a Flask-based backend (app.py) connected to the ML model and providing predictions on RESTful endpoints, so that there will be seamless communication between the frontend and the backend to properly show data.
•  To containerize the weather-backend with Docker to be easily scalable and provide a modular integration into the backend.

Objectives of Part 3 – Database, Alerts and Enhanced Functionality·      

• To deploy MongoDB as a containerized database (image: mongodb) to store weather data, user input and predictors.
• To introduce dynamic alert capabilities, which alert the user to extreme conditions (e.g., high temperature, rain, or wind).
•  To enable the connection of the alert system to the backend of the condition-based triggers and present it on the frontend dashboard.
•  To deploy the frontend container (weather-frontend-dev) to incorporate real-time alerts visualization.
• To illustrate complete stack synchronization between the front-end, back-end and database in a multi-container Docker Compose application.

 Containers Involved and Docker Hub Links

Container Name	Purpose	Docker Hub Link (Tags)	Pull Command
weather-frontend-dev	Hosts the frontend (HTML, CSS, JS) using Nginx to serve the user interface	weather_front	docker pull abhishek669/weather_front:1.0
weather-backend	Runs the Flask backend that communicates with the ML model (weather_model1.pkl) and OpenWeatherMap API	weather_backend	docker pull abhishek669/weather_backend:1.0
mongodb	Provides the MongoDB database for storing weather logs, city queries, and predictions	weather_mongo	docker pull abhishek669/weather_mongo:1.0

Software Stack

Software / Tool	Purpose
HTML, CSS, JavaScript	Frontend structure, styling, and dynamic interaction
Nginx	Serves the static frontend files in the weather_front container
Flask (Python)	Backend server handling API and ML logic
Scikit-learn / XGBoost	Machine learning model training for temperature prediction
Pandas / NumPy	Data preprocessing and CSV management
MongoDB	Database storing weather logs, alerts, and historical queries
Docker	Containerization tool for isolated deployment
Docker Compose	Manages multi-container setup (frontend, backend, MongoDB)
OpenWeatherMap API	Source of real-time weather data
VS Code	Development environment

Architecture Diagram

Explanation of Architecture:

The Weather Website Project on Dockers is a modular three-layer architecture with a frontend, backend, and database that is configured on different Docker containers and is scalable and platform independent. The frontend container (weather-frontend-dev) is developed on a basis of HTML, CSS and JavaScript and is hosted by means of the Nginx server, the user interface where the user can feed the name of a city to receive the weather information. This container will talk to the backend on the basis of RESTful APIs, which guarantee a seamless flow of live weather data, ML-driven forecasts, and dynamically generated notifications.

The main processing unit of the system is the backend container (weather-backend), which is a Flask-based container. It links the OpenWeatherMap API to retrieve real-time data, reads the local CSV (weatherdataNew1.csv) and loads the trained machine-learning model (weathermodel1.pkl) to predict temperatures in the next 3, 6, and 9 hours. The MongoDB container (weather_mongo) is used to store all processed information and historical data, allowing past queries to be stored and retrieved. The backend also alerts on some predefined thresholds and remits them back to the frontend to be visualized. This multi-container-based architecture that is controlled through Docker Compose provides a robust, reproducible, and maintainable environment and integrates real-time data collection.

Methodology

Procedure Part 1:

Step 1 - Open terminal and move to frontend folder

Step 2 - Verify Docker is running

Step 3 – Writing Dockerfile Instructions

Step 4 - Build your frontend Docker image

Step 5 - Run the container and map port 8080 → 80

Step 6 - Test the webpage in browser

Step 7 - Push image to Docker Hub

Image appears at Docker Hub

Procedure Part 2:

Step 1 – Navigate to Backend directory

Step 2 – Install the following requirements                                                    

Step 3 – Create a dockerfile for the backend

Step 4 - Build the backend image

 

Step 5 - Run the backend container

Step 6 – Backend container is successfully running at port 5001

Step 7 - Push image to Docker Hub

Image appears at DockerHub 

Procedure Part 3:

Step 1 - Pull MongoDB Image

Step 2 - Start MongoDB locally inside Docker at mongodb://localhost:27017/

 

Step 3 - Push the MongoDB Image into DockerHub

Image appears at Dockerhub

All Dockers running:

Implementation screenshots of the working website via dockers:

Modification in Containers after Downloading:

1.    Frontend Container 

Step 1 – Removed default Nginx HTML files

RUN rm -rf /usr/share/nginx/html/*

 

Step 2 – Copied project web files to Nginx directory

COPY index.html style.css myscript.js /usr/share/nginx/html/

 

Step 3 – Added assets for webpage rendering

COPY Backgrounds/ /usr/share/nginx/html/Backgrounds/

COPY Icons/ /usr/share/nginx/html/Icons/

 

Step 4 – Exposed port for web access

EXPOSE 80

 

Step 5 – Started Nginx web server

CMD ["nginx", "-g", "daemon off;"]

 

2.    Backend Container 

Step 1 - Installed system library for ML dependencies

RUN apt-get update && apt-get install -y libgomp1

 

Step 2 - Set working directory

WORKDIR /app 

Step 3 - Installed Python dependencies

COPY requirements.txt .

RUN pip install --no-cache-dir -r requirements.txt

 Step 4 - Added application and ML model

COPY app.py .

COPY weather_model1.pkl .

COPY weather_dataNew1.csv .

 Step 5 - Exposed backend port

EXPOSE 5001 

Step 6 -  Set environment variables

ENV MONGO_URI=mongodb://host.docker.internal:27017/ \

 FLASK_ENV=production 

Step 7 - Started Flask app using Gunicorn

CMD ["gunicorn", "app:app", "-b", "0.0.0.0:5001", "--workers", "2"]

 

3.    Database Container (MongoDB) 

Step 1 – Pulled MongoDB image

docker pull mongo:7 

Step 2 – Ran MongoDB container

docker run -d --name mongodb -p 27017:27017 mongo:7 

Step 3 – Tagged and pushed to Docker Hub

docker tag mongo:7 abhishek669/weather_mongo:1.0

docker push abhishek669/weather_mongo:1.0

Dockerhub link of modified Containers:

Repositories:

 https://hub.docker.com/repositories/abhishek669

weather-frontend-dev:

https://hub.docker.com/r/abhishek669/weather_front/tags

weather-backend:

https://hub.docker.com/r/abhishek669/weather_backend/tags

mongodb:

https://hub.docker.com/r/abhishek669/weather_mongo/tags

Project Outcomes:

The successful Dockers-based Weather Website Project is an example of how web development, machine learning, and the concept of containerization can be combined to present an interactive, scalable, and platform-neutral weather forecasting platform. An interactive user interface is created using HTML, CSS and JavaScript and connected to a Flask-based server utilizing a trained machine learning model, to estimate the prediction of the next 3, 6 and 9 hours temperature based on real-time data provided to the OpenWeatherMap API. The entire structure, such as the frontend (Nginx), backend (Flask + ML), and MongoDB database, were containerized with the help of Docker and coordinated within one environment, and were consistent in their performance across systems. The end result is a fully working web application that can show live weather data, ML-based predictions, and dynamic notifications and demonstrate the effectiveness of using multi-service applications with the Docker operation.

                      

 Conclusion:

The Weather Website Project on Dockers shows that it is possible to use modern web technologies, machine learning, and containerization to create a scalable and intelligent weather forecasting system. The project provides real-time weather information, data-driven forecasts, and dynamic notifications through a combination of an HTML, CSS, and JavaScript based front-end and a Flask based backend and MongoDB database along with a single platform. The application of Docker made it possible to have a modular architecture whereby all the parts were encapsulated in their respective containers, such as frontend, backend, and database, to ensure that deployment was made easy, and cross-platform, and that maintenance was made simple.

When the machine learning model is trained using real-time weather data obtained on the basis of OpenWeatherMap API, it becomes possible to predict the change in temperature within the next 3, 6, and 9 hours efficiently and reliably. The project has effectively demonstrated the way in which containerization can increase the reproducibility and scalability of complex multi-service applications, and this renders it applicable in real-life applications. In general, the work is a feasible example of integrating the principles of software engineering with data science and DevOps to provide an innovative, deployable, and future-ready weather prediction platform.

Acknowledgement:

I would like to express my sincere gratitude to Dr. Subbulakshmi T, Faculty of SCOPE, Vellore Institute of Technology (VIT), for her valuable guidance, motivation, and continuous support throughout the completion of this Design Assignment titled “Weather Website Project using Dockers” for the course BCSE408L – Cloud Computing, during the Fall 2025–26 semester (Slot: G1 + TG1).

I am also thankful to the School of Computer Science and Engineering (SCOPE), VIT, for providing the infrastructure and resources necessary to carry out this project. Special thanks to the Spoken Tutorial Project, IIT Bombay, for their comprehensive Docker tutorials that greatly enhanced my understanding of containerization concepts.

I wish to acknowledge the creators and maintainers of the open-source Docker Hub repositories for Nginx, Python, and MongoDB, which served as the foundational images for this project.

Finally, I extend my heartfelt appreciation to my parents and friends for their constant encouragement, and to my peers for their collaboration and insights that helped refine this work. Their unwavering support has been instrumental in the successful completion of this project.

- Abhishek Prabakar

References:

[1] Docker, Official Docker Hub Repository for Nginx, 2025.

[2] Docker, Official Docker Hub Repository for Python, 2025.

[3] Docker, Official Docker Hub Repository for MongoDB, 2025.

 [5] IIT Bombay, Docker Tutorial – Spoken Tutorial Project, IIT Bombay, 2025. https://spoken-tutorial.org/tutorial-search/?search_foss=Docker&search_language=English

[6] OpenWeatherMap, Official API Documentation, 2025.

 [7] S. Raschka and V. Mirjalili, Python Machine Learning: Machine Learning and Deep Learning with Python, scikit-learn, and TensorFlow 2, 3rd ed., Packt Publishing, 2019.