MemoMaster — Dockerized Cloud Note-Taking App

 

Title

MemoMaster — A Dockerized Cloud Note-Taking Application (Frontend + Backend + Persistent History)

Introduction

MemoMaster is a lightweight cloud-style note-taking application designed and implemented as a three-part development assignment . It demonstrates modern container-based full-stack development by separating the user interface (frontend), the REST API (backend), and persistent storage (MongoDB) into isolated Docker containers. The whole stack is orchestrated using docker-compose so the app is portable, reproducible, and environment-independent.

The application consists of three primary components — Frontend, Backend (API Server), and Database (MongoDB) — each running inside its own Docker container. This approach enhances modularity, reduces deployment complexity, and provides a robust cloud-ready solution.


Fig.1 Overall Architecture of the Docker-Based Cloud Note Application.

Objectives

  • To design and deploy a scalable cloud-based note-taking system using Docker.
  • To understand containerization concepts — images, containers, volumes, and networks.
  • To integrate frontend, backend, and database services using Docker networking.
  • To use MongoDB as a NoSQL cloud database for storing notes efficiently.
  • To publish and share customized containers on DockerHub.

Containers Used and Download Links

Container Name Base Image Purpose Official Docker Hub Link
Frontend Container nginx:latest Serves the frontend files (HTML, CSS, JavaScript) for the note-taking app. 🔗 https://hub.docker.com/_/nginx
Backend Container node:18 Runs the Node.js + Express backend server handling API requests. 🔗 https://hub.docker.com/_/node
Database Container mongo:latest Stores all note data persistently using MongoDB. 🔗 https://hub.docker.com/_/mongo

Overall Architecture

This note-taking system follows a three-tier architecture:

  1. Frontend (Presentation Layer):

    • Built using HTML, CSS, and JavaScript.

    • Served through an NGINX container.

    • Provides the interface for users to add, update, or delete notes.

  2. Backend (Logic Layer):

    • Developed with Node.js and Express.

    • Exposes REST APIs that handle all note-related operations.

    • Communicates with the MongoDB container using Mongoose.

  3. Database (Data Layer):

    • MongoDB stores user notes as documents.

    • Persistent volume ensures data is retained even if the container restarts.



Architecture Description

The frontend container runs an NGINX web server serving the static web files of the note app. User actions like creating or deleting a note send API requests to the backend container, which runs a Node.js Express server. The backend interacts with the MongoDB container using the Mongoose ORM to perform CRUD operations.

All three containers are connected using a custom Docker network, allowing seamless internal communication without exposing internal ports publicly. A volume is used in the MongoDB container to ensure persistent data storage.

Procedure

Part 1: Environment Setup and Docker Installation

  1. Download and Install Docker Desktop

    • Go to the official Docker website:
      🔗 https://www.docker.com/products/docker-desktop

    • Choose the version suitable for your operating system (Windows/macOS/Linux).

    • Follow the installation wizard and ensure that:

      • Docker Desktop is running (the whale icon appears in your system tray).

      • WSL 2 backend is enabled (for Windows users).

    • Verify installation by opening Command Prompt / Terminal and typing:

      docker --version
docker compose version

      You should see the installed versions displayed.

  2. Set Up Project Folder Structure

    Create a folder named cloud-note-app, and add the following files:

    cloud-note-app/
├── backend/
│   ├── server.js
│   ├── package.json
│   ├── Dockerfile
├── frontend/
│   ├── index.html
│   ├── style.css
│   ├── script.js
│   ├── Dockerfile
├── docker-compose.yml

    • Frontend → HTML, CSS, JavaScript for user interface

    • Backend → Node.js + Express for REST API

    • MongoDB → Database to store notes

    • docker-compose.yml → Orchestrates all containers

Fig.3 Project Folder Structure

3.Run Docker Desktop before proceeding to build containers.

Part 2: Backend (Node.js + MongoDB) Containerization

  • Write your Backend Code (server.js)
    Contains Express.js routes for adding, viewing, editing, and deleting notes.


Fig 4 Backend Code(server.js)

  • Create Dockerfile for Backend

    FROM node:18
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 5000
CMD ["node", "server.js"]

  • Create Docker Volume for MongoDB
    This ensures data persistence:

    docker volume create mongo-data

  • MongoDB Service Configuration in docker-compose.yml

    version: '3.8'
services:
  backend:
    build: ./backend
    ports:
      - "5000:5000"
    depends_on:
      - mongo
  mongo:
    image: mongo:latest
    ports:
      - "27017:27017"
    volumes:
      - mongo-data:/data/db
volumes: mongo-data:

Fig.5 Docker Compose


  • Build and Run Backend + MongoDB

  1. docker compose up --build

    Now the backend API will run at:
    👉 http://localhost:5000/api/notes

Fig.6 Backend API link

Part 3: Frontend (HTML, CSS, JavaScript in Docker)

Step 1: Install Docker Desktop

Before starting, ensure Docker Desktop is installed and running on your system.
🔗 Download Link: https://www.docker.com/products/docker-desktop/

  • Download and install Docker Desktop suitable for your OS (Windows, macOS, or Linux).

  • Start Docker Desktop and ensure it is running in the background.

  • Verify installation using the command:

    docker --version

Step 2: Set Up Frontend Project Folder

Create a folder named frontend and include your files:

frontend/
│── index.html
│── style.css
│── script.js
│── Dockerfile

Your index.html should contain the structure of the note-taking web app.
The style.css defines the pink background and other styling you customized.
The script.js handles interactions and API calls to the backend.


Fig 7 HTML code

Fig.8 CSS Code

Fig.9 JavaScript Code

Step 3: Create Dockerfile for Frontend

Inside the frontend folder, create a Dockerfile with the following content:

# Use official NGINX image to serve static files
FROM nginx:latest

# Copy frontend files to NGINX web directory
COPY . /usr/share/nginx/html

# Expose port 80 for access
EXPOSE 80

# Start NGINX server
CMD ["nginx", "-g", "daemon off;"]

Step 4: Build and Run Frontend Container

Fig.10 MemoMaster(Frontend)

GitHub Link

Outcomes

  • Successfully deployed a multi-container Dockerized application.

  • Integrated MongoDB as a NoSQL database for fast, flexible storage.

  • Achieved portability, modularity, and simplified deployment.

  • Verified container intercommunication through Docker Compose.

  • Demonstrated complete cloud readiness for a full-stack app.

Conclusion

This project successfully demonstrates the deployment of a complete cloud-based note-taking application using Docker containerization. The system integrates three core components — a frontend (HTML, CSS, JavaScript with NGINX), a backend (Node.js + Express), and a database (MongoDB) — all running in isolated, lightweight containers.

By containerizing each component, the project ensures portability, scalability, and simplified deployment across any environment. The use of Docker volumes enables data persistence, while network bridging allows seamless communication between containers.

This implementation highlights the practicality and efficiency of microservice-oriented architecture for modern web applications. Through this Digital Assignment, the project emphasizes how containerization can transform traditional monolithic systems into modular, maintainable, and easily deployable cloud-ready solutions.

References and Acknowledgements

References

Acknowledgements

I sincerely express my gratitude to:

  • VIT SCOPE, for providing the platform and guidance to complete this Digital Assignment as part of the Cloud Computing course (Current Semester).

  • The original creators of the Docker images used from Docker Hub for NGINX, Node.js, and MongoDB.

  • My faculty mentor, for valuable insights into container orchestration and architecture design.

  • My peers and friends, for their help in testing and reviewing the setup.

  • My parents and family, for their continuous support and encouragement throughout the project.




Comments

Post a Comment