AI- TO DO List

                          AI -TO DO LIST

Name: Muthuram M

Regno:23BCE1433

 

Introduction:

In the era of productivity and automation, task management applications play a vital role in helping individuals organize their daily activities effectively. However, most traditional to-do list applications require manual input and lack smart insights or adaptability.
This project, “AI To-Do List,” is a web-based task management system enhanced with AI assistance. It allows users to create, categorize, and prioritize their tasks efficiently through a simple and intuitive interface. The application uses AI logic to suggest priorities or organize tasks automatically, reducing manual effort.

The core of the project lies in Docker containerization, which ensures portability, consistency, and simplified deployment across environments. Initially, the application was containerized as a single unit. Later, it was expanded into a multi-container setup with persistent storage and database integration. This report presents the development process across all three DAs (DA1, DA2, and DA3), highlighting the practical application of Docker for building and orchestrating scalable full-stack applications.

 

Objectives of Part 1 (DA1)

The main goal of DA1 was to build a single-container version of the AI To-Do List app as a proof of concept. This involved:

• Developing a simple frontend interface for adding and viewing tasks.
• Creating a backend API using Node.js and Express to handle basic CRUD operations.
• Writing a Dockerfile to containerize the complete application in a single container.
• Exposing the container to the host so the application could be accessed locally.

This stage established the foundation for containerization and verified that the application runs reliably within a Docker environment.

 

Objectives of Part 2 (DA2)

The goal of DA2 was to transform the single-container setup into a multi-container architecture for improved modularity and persistence. This involved:

• Separating the application into frontend, backend, and database (MySQL) containers.
• Introducing Docker Compose to manage the services and inter-container communication.
• Adding persistent storage through Docker volumes to ensure that task data remained intact across container restarts.
• Updating backend logic to interact with the MySQL database using
• environment variables for secure connections.
• Optionally including phpMyAdmin for easy database management during development.

This step converted the static setup into a functional, scalable microservice-based model.

 

Objectives of Part 3 (DA3)

The objective of DA3 was to finalize, document, and present the complete multi-container AI To-Do List system. This included:

• Preparing detailed documentation for all development stages.
• Demonstrating the AI To-Do List application during the Docker Showdown event.
• Showcasing database persistence, container communication, and automatic rebuilds using Docker Compose.
• Creating the final report and architecture diagrams summarizing all three phases.

 

Name of Containers and Download Links

Frontend Container (ai-todo-frontend)

• Purpose: Provides the web interface for users to manage their tasks.
• Base Image Download Link: https://hub.docker.com/_/node

Backend Container (ai-todo-backend)

• Purpose: Handles task operations, AI suggestions, and API routes.

• Base Image Download Link: https://hub.docker.com/_/node

Database Container (mysql)

• Purpose: Stores all tasks and user data persistently.

• Base Image Download Link: https://hub.docker.com/_/mysql

 

 

phpMyAdmin Container (optional)

• Purpose: Provides a graphical interface to view and manage database contents.

• Base Image Download Link: https://hub.docker.com/_/phpmyadmin

 

Other Software Used and Their Purpose

• VS Code: Used for development and debugging of frontend, backend, and Dockerfiles.
• Docker Desktop: Used to build, manage, and orchestrate containers.
• Node.js & Express: Backend technologies for serving API endpoints.
• React (or HTML/CSS/JS): Used to build the frontend interface.
• MySQL: Relational database used to store to-do tasks and metadata.
• Docker Compose: Tool for managing and networking multiple containers.

 

Overall architecture of all your three Das

 

Description of the Architecture

The AI To-Do List project follows a modular multi-container architecture managed using Docker Compose. The architecture evolved gradually from a simple single-container setup (DA1) to a robust, multi-container microservice design (DA2 and DA3) that provides better scalability, maintainability, and persistence. At the top level, a Traefik proxy container acts as a reverse proxy and router. It intelligently directs incoming HTTP requests to the correct service — the client, backend, or phpMyAdmin interface — based on the routing rules defined in the Docker Compose configuration. The Client (frontend) container runs a React (or HTML/CSS/JS) application that provides a responsive user interface for task management. When a user creates or updates tasks through the web browser, the frontend sends API requests to the backend via the Traefik proxy. The Backend container, built with Node.js and Express, processes these API requests. It manages the business logic, performs CRUD operations, and communicates directly with the MySQL database to store or retrieve to-do data.

The MySQL container hosts the persistent database that stores user tasks and metadata. A Docker volume (todo-mysql-data) ensures that this data is not lost even if the containers are stopped or removed. The phpMyAdmin container provides a graphical dashboard for developers to interact with the MySQL database easily. It allows viewing, editing, and debugging of stored data through a browser interface. This complete environment operates under the Docker network created by Docker Compose, allowing all containers to communicate internally using their service names (e.g., backend, mysql) instead of IP addresses.

Overall, the architecture achieves clean separation of concerns — user interface (client), business logic (backend), data persistence (MySQL), and routing (Traefik) — all within isolated, lightweight, and reproducible containers.

 

Procedure – Part 1 (DA1) – Steps Involved

This phase focuses on creating and running the single-container version of the AI To-Do List application.

Step 1: Designed a simple frontend with basic HTML, CSS, and JavaScript to add and display tasks.
Step 2: Created a backend using Node.js (Express) to handle basic task management logic.
Step 3: Wrote a Dockerfile that installed dependencies and copied project files into the container.
Step 4: Built the image using:

Step 5: Ran the container and mapped it to a local port using:

Step 6: Opened http://localhost:8080 in a browser to verify that the application worked as expected.

 

Procedure – Part 2 (DA2) – Steps Involved

This stage transforms the application into a multi-container setup using Docker Compose.

Step 1: Split the project into three main services — frontend, backend, and database (MySQL).
Step 2: Created separate Dockerfiles for the frontend and backend to build each container independently.
Step 3: Defined a docker-compose.yaml file containing configurations for all services.
Step 4: Added a persistent Docker volume (todo-mysql-data) to ensure that database data is not lost on container restarts.
Step 5: Linked containers using environment variables such as MYSQL_HOST, MYSQL_USER, and MYSQL_PASSWORD.
Step 6: Added phpMyAdmin service for viewing and managing the MySQL database.
Step 7: Built and launched all containers simultaneously with:

 

Procedure – Part 3 (DA3) – Steps Involved

This final phase consolidates the work, documents the project, and prepares it for demonstration.

Step 1: Reviewed and refined the Docker Compose configuration for the final setup.
Step 2: Created the project documentation, detailing architecture, objectives, and configurations for each phase.
Step 3: Added the Traefik proxy service to route requests efficiently between frontend, backend, and phpMyAdmin.
Step 4: Prepared screenshots and verified container interconnections using the Docker Desktop dashboard.
Step 5: Tested all API endpoints and frontend interactions end-to-end.
Step 6: Prepared the final report and presentation materials for the Docker Showdown event.
Step 7: Demonstrated the complete AI To-Do List system — showing persistent task management, AI logic, and container orchestration.

 

 

Adding a task:

 

Checking the box after completion:

 

The value changes from 0 to 1 after completion:

compose.yaml:

 

 

 

Modifications Made to Containers

Frontend Container (Base Image: node:alpine)

• Copied custom React/HTML files into the working directory.
• Installed dependencies using npm install.
• Exposed port 5173 and started the development server.

Backend Container (Base Image: node:18-slim)

• Added custom backend code (server.js) and installed dependencies.
• Configured MySQL environment variables and connected via Sequelize/Knex.
• Exposed port 3000 for API communication.

Database Container (Base Image: mysql:9.3)

• Used a named volume (todo-mysql-data) for data persistence.
• Set environment variables for root password and database name.

phpMyAdmin Container (Base Image: phpmyadmin)

• Linked to the MySQL service for easy data visualization.

 

 

Github Link:

https://github.com/Muthuram-7/ai-todo-list.git

 

Outcomes

The final outcome of this project is a fully functional AI-enhanced To-Do List web application deployed using a multi-container Docker architecture.
It demonstrates end-to-end development — from containerizing a single app to orchestrating multiple services that communicate seamlessly.
Data persistence is ensured via Docker volumes, and the system architecture supports easy scalability and redeployment.
The project also highlights how Docker simplifies complex multi-service environments for real-world applications.

 

Conclusion

This project provided a hands-on understanding of Docker, full-stack development, and container orchestration.
I successfully learned how to containerize both frontend and backend services, integrate a database, and manage them using Docker Compose.
The AI To-Do List system effectively combines usability, AI-driven intelligence, and scalability.

Future improvements may include:

• Adding user authentication with JWT.
• Integrating a notification service.
• Expanding AI features using APIs for smart reminders or natural language task entry.

Overall, this project strengthened my understanding of microservice design, networking, and persistent storage within Docker environments.

 

References and Acknowledgement

Original Container Sources:

• Node.js Official Image: https://hub.docker.com/_/node
• MySQL Official Image: https://hub.docker.com/_/mysql
• phpMyAdmin Official Image: https://hub.docker.com/_/phpmyadmin

VIT SCOPE:
I would like to express my sincere gratitude to VIT, SCOPE, for the Cloud Computing (BCSE408L) course, which provided the foundation for this project.

IITB Docker Tutorial:

https://script.spoken-tutorial.org/index.php/Docker

Acknowledgements:
I sincerely thank Dr. T. Subbulakshmi ma’am for her continuous guidance and support throughout all three DAs.
I also thank my friends and family for their encouragement and collaboration during development.