Carbon Calculator

  Carbon Calculator-Cloud Computing Project


 Introduction

Cloud computing enables the delivery of scalable applications by leveraging virtualized containers and cloud infrastructure. In this project, I set out to explore Docker—an essential cloud and DevOps tool—by containerizing a full-stack carbon footprint calculator application comprising a React frontend and a Node.js backend API. The project was developed in one day to demonstrate mastery of Docker Desktop, containerization, Compose orchestration, and image management. This report separates the process into three distinct parts, as required: initial Docker exploration and setup (Part 1), enhancement and feature completion (Part 2), and advanced Docker services with image publishing and deployment (Part 3).


Objectives of Part 1 

  • To gain hands-on experience with Docker Desktop.
  • To create Dockerfiles for both frontend and backend applications.
  • To write a docker-compose.yaml to orchestrate multi-container architecture.
  • To verify communication between containers and proper port mapping.

Objectives of Part 2 

  • To add feature completeness to the application: linking frontend and backend, exposing backend APIs.
  • To implement Docker health checks and persistent logging features.
  • To use Docker networks for secure, container-to-container communication.
  • To prepare the containers for reliable orchestration and cloud deployment.

Objectives of Part 3 

  • To push custom-built Docker images to Docker Hub for public access and reproducibility.
  • To validate automated health monitoring and restart policies in the Compose file.
  • To demonstrate a production-ready full-stack deployment entirely through Docker tools.
  • To document the complete DevOps journey for educational and reference purposes.

Name of the Containers Involved and the Download Links

  • carbon-calculator-backend-1
  • Docker Image: sakthidhara/carbon-backend:latest
  • Docker Hub: https://hub.docker.com/r/sakthidhara/carbon-backend
  • carbon-calculator-frontend-1
  • Docker Image: sakthidhara/carbon-frontend:latest
  • Docker Hub: https://hub.docker.com/r/sakthidhara/carbon-frontend

Name of the Other Software Involved Along With Purpose

  • Docker Desktop: Manages Docker engine, images, containers, and networks with a GUI and CLI.
  • Docker Compose: Defines and runs multi-container applications using YAML.
  • Node.js: Runtime for backend server and frontend build tooling.
  • React: Frontend library used to build interactive UI for the carbon calculator.
  • VS Code: IDE for editing code, YAML, and logs.
  • serve: For serving static React files in production (serve -s build).
  • curl: Used internally by Docker to check health status of containers.
  • Windows PowerShell/Command Prompt: For running Docker and Git commands.

Overall Architecture :


Architecture Description 

  1. Part 1:
  • Two containers: React frontend (port 3000) and Node backend (port 5000). Connected via Docker network (carbon-net).
  • User accesses frontend at localhost:3000, which makes API calls to backend at localhost:5000.
  1. Part 2:
  • Same as Part 1, with enhancements:
  • Backend exposes /api/ping for health, logs written to backend-logs volume.
  • Frontend served statically from own container, logs to frontend-logs.
  • Docker Compose health checks for both services, with restart policies and explicit depends_on.
  1. Part 3:
  • Both images are built, tagged, and publicly pushed to Docker Hub.
  • Any user can pull and run these images with Compose.
  • Compose orchestrates full deployment: network, ports, healthchecks, volumes.

  • Logs and health are monitored; backend and frontend are resilient and automatically restart if errors occur.

Detailed Description about the Architecture 

The architecture centers around making a full-stack application portable and reliably deployable in cloud environments using Docker. The backend is a Node.js application (server.js) providing carbon calculation APIs, while the frontend is a modern React SPA that interacts with users and visualizes carbon footprint information interactively.

Containerization begins with Dockerfiles for both modules. Each Dockerfile installs dependencies and defines the commands to launch the respective server (backend or frontend static site). Docker images encapsulate not only application code but also the runtime and operating system dependencies.

To enable these containers to interact seamlessly, Docker Compose is employed. This YAML-based tool defines both services (frontend and backend), specifies their ports, and binds them to a custom Docker network called carbon-net. The Docker Compose file also maps local host ports (3000 for frontend, 5000 for backend) to the corresponding container ports, enabling browser-based access. It further ensures that the containers can share data securely while remaining isolated from unrelated system processes.

In Part 2, Docker health checks are integrated through Compose, referencing lightweight HTTP calls — /api/ping on the backend and / on the frontend. This ensures that the Docker engine continuously monitors each service’s real, in-app health before marking the service as ready, enabling smart startup and restart sequences.

Logging is externalized: logs from both containers are written to persistent Docker volumes (backend-logs, frontend-logs), making debugging and audits persistent across restarts or failures. The backend is enhanced with production dependencies only and proper health endpoints, while the React frontend is statically compiled and serves optimized files for speed and security.

In Part 3, the images are pushed to Docker Hub (public registry), making them universally accessible. This marks a significant step in cloud computing progression — the application is no longer just source code, but a self-contained executable artifact. Any user with Docker installed can replicate the full environment and launch the project in minutes, eliminating “works on my machine” issues.

Compose orchestrates pulling, network setup, health checking, and persistent log storage. Restart policies ensure that transient errors or host reboots do not affect system availability — Docker automatically attempts to restart unhealthy or stopped containers unless explicitly stopped.

All functionality is orchestrated either through Docker Desktop (for GUI-based monitoring, logs, and resource usage) or command-line tools (for fine-tuned control and automation).

The separation into three parts demonstrates a clear progression:

  • Part 1: Local exploration and containerization.

  • Part 2: Production hardening and health management.

  • Part 3: Full cloud-native image publishing and deployment.

This architecture reflects modern CI/CD and DevOps practices, equipping the application to be rapidly redeployed, debugged, and maintained in any cloud infrastructure.


Procedure

Part 1 - Steps involved in the process

  1. Install Docker Desktop and confirm it runs.
  1. Create the project folder structure and add source code for both frontend and backend.
  1. Set up Dockerfiles for both components.

  1. Write a basic docker-compose.yaml for frontend and backend.



  1. Build and run the containers:
  • docker compose up --build -d

  1. Verify containers are running via Docker Desktop (“Containers/Apps” tab) or docker compose ps.

  1. Access frontend via http://localhost:3000 and backend via http://localhost:5000.

  1. Test basic frontend/backend communication.


Part 2 - Steps involved in the process

  1. Add health checks to docker-compose.yaml under each service.

  1. Create and associate logging volumes to persist logs.

  1. Update backend to expose /api/ping endpoint for health.
  1. Modify Dockerfiles if necessary for health/log volume support.
  1. Rebuild and restart:
  • docker compose up --build -d
  1. Observe health status in Docker Desktop and logs via the “Logs” tab or docker compose logs.

  1. Validate logs are written to the Docker volumes.

Part 3 - Steps involved in the process

  1. Tag images and push to Docker Hub:
  • docker push sakthidhara/carbon-backend:latest
  • docker push sakthidhara/carbon-frontend:latest


  1. Show images available in Docker Desktop's “Images” tab.

  1. Show successful pull/run on another machine or after a system prune.

    docker system prune -a

    docker pull sakthidhara/carbon-backend:latest

    docker pull sakthidhara/carbon-frontend:latest

  1. Show Compose brings up both services from Docker Hub images.


What modification is done in the containers after downloading – step by step

After downloading the base images, the following modifications were made to prepare the application for deployment:

    1. Installed the required Node.js dependencies using npm install.

    2. Added curl inside the containers to support health check commands.

    3. Configured and added health check instructions in the Dockerfiles and docker-compose file.

    4. Mapped application logs to persistent Docker volumes for both frontend and backend.

    5. Built and tagged the customized images, then pushed them to Docker Hub for reuse.


Docker Hub Link of your Modified Containers

  • Docker Hub Backend: https://hub.docker.com/r/sakthidhara/carbon-backend
  • Docker Hub Frontend: https://hub.docker.com/r/sakthidhara/carbon-frontend

What are the outcomes?

  • Successfully dockerized a full-stack carbon calculator and orchestrated multi-container lifecycle with Compose.
  • Demonstrated container health checks, persistent volume logging, and automatic service recovery.
  • Published working images to public Docker Hub repositories for reproducible cloud deployments.
  • Produced documentation and walkthroughs replicable by peers and faculty.

Conclusion

Containerizing a full-stack application using Docker delivers both portability and production reliability, aligning with modern cloud computing expectations. By packaging the React frontend and Node backend into isolated, health-monitored, and log-persistent containers, we achieved reproducibility, easy maintenance, and rapid deployment. The transition from local containers (Part 1), to feature-rich and resilient services (Part 2), to Docker Hub image publishing and public usage (Part 3) demonstrates both technical learning and practical DevOps readiness.


References 

  • Docker images node:22, node:20 from Docker Hub.
  • IIT Bombay Docker Tutorial
  • "Building Docker Images" – Online Technical Blog
  • "Containerising Back-End Web Application" – Developer Community Article.
  • Faculty for guidance and course materials.

Acknowledgements

I would like to express my sincere gratitude to our faculty for their guidance, continuous support, and encouragement throughout the development of this project. I am also thankful to the institution for providing the required learning resources and infrastructure to explore Docker and cloud computing concepts effectively. I appreciate the help and motivation from my friends and family during this work, and I acknowledge the contributions of the open-source community for providing valuable documentation and tools that supported this project.


Prepared and Submitted by:

SAKTHIDHARA B

                                                                                                                                                                            

Comments

Post a Comment