Technical Design Document: To-Do List Web Application

 

1. Introduction

Purpose of this document

This document provides a comprehensive technical overview and design of the To-Do List Web Application. It serves as a blueprint for developers, testers, and stakeholders.

Overview of the system

The system allows users to manage personal tasks through a web interface. Users can add, edit, toggle (mark complete/incomplete), and delete tasks. Admin users can view all users and manage task logs.

Scope and objectives

• Implement a minimal, interactive to-do list using modern web technologies.

• Ensure responsive UI/UX.

• Support user authentication and role-based access.

• Create a RESTful backend to persist data.

Intended audience

• Developers

• QA engineers

• System architects

• Stakeholders/product owners

---

2. References

• UML Diagrams (see Figure 1)

• Class diagram, use case diagram, activity diagram, sequence diagram (see above)

• React Documentation

• Spring Boot Documentation

• PosgreSql Documentation

---

3. System Overview

High-level description of the system

The system comprises:

• A React frontend 

• A Spring Boot backend (REST API)

• A MySQL database

Summary of key features and components

• Add/Edit/Delete/Toggle Tasks

• User login and registration

• Role-based views (Admin/User)

• Data persistence and error handling

Assumptions and constraints

• Internet access is required.

• Only modern browsers are supported.

• No offline mode.

---

4. Class Diagram Overview

Visual representation

Description of the structure

The system centers around a Task class, connected to a User entity. Tasks are owned by users and can be independently modified.

Major relationships

• Association: A User has many Task objects.

• Composition: Tasks are dependent on the User; deleting a User deletes their tasks.

---

5. Class Descriptions

5.1 Task

• Responsibilities: Represent an individual task item.

• Attributes:

  • id: Integer — Unique task identifier

  • title: String — The task description

  • completed: Boolean — Task status

• Methods:

  • toggleStatus(): void — Marks the task as complete/incomplete

  • delete(): void — Deletes the task

• Relationships:

  • Belongs to User

• Notes:

  • Stored in the tasks table

5.2 User

• Responsibilities: Represent the user who owns tasks.

• Attributes:

  • id: Integer — Unique user ID

  • username: String — User login

  • email: String — Contact info

  • role: Enum — ADMIN or USER

• Methods:

  • addTask(Task): void — Adds a new task

  • getTasks(): List<Task> — Returns all user tasks

• Relationships:

  • Has many Task objects

• Notes:

  • Stored in the users table

---

6. Interactions and Workflows

Key interactions

• Users send task actions to backend via HTTP requests.

• Backend updates database and returns updated task list.

• Frontend reflects changes immediately.

Sequence Diagram

1. User enters task

2. Clicks "Add"

3. Task is POSTed to API

4. Response is rendered in the UI

---

7. Data Model

Database Tables

users

Field	Type	Description
id	INT (PK)	User ID
username	VARCHAR	Unique username
email	VARCHAR	User email
password	VARCHAR	Hashed password
role	ENUM	ADMIN or USER

tasks

Field	Type	Description
id	INT (PK)	Task ID
title	VARCHAR	Task description
completed	BOOLEAN	Status
user_id	INT (FK)	Owner user ID

Persistence Strategy

• JPA with Hibernate for ORM

• Repositories handle CRUD

---

8. API and Interfaces

TaskController (REST)

Method	Endpoint	Description
GET	/api/tasks	List all tasks
POST	/api/tasks	Add new task
PUT	/api/tasks/{id}	Toggle/update task
DELETE	/api/tasks/{id}	Delete task

AuthController

Method	Endpoint	Description
POST	/api/login	Authenticate user
POST	/api/register	Create new user

9. Error Handling and Logging

Strategy

• HTTP status codes for client errors (400s) and server errors (500s)

• Backend uses @ControllerAdvice for global exception handling

Logging

• Spring Boot logger with SLF4J

• Logs include user actions, errors, and system events

---

10. Security Considerations

• Passwords are hashed using BCrypt

• JWT for session tokens

• Role-based method security using @PreAuthorize

• No sensitive data in frontend or local storage

---

11. Performance Considerations

• Lightweight UI for fast load

• Indexed DB fields for speed

• API caching for GET requests

• Lazy loading for user-specific task lists

---

12. Testing Strategy

Unit Tests

• Service and controller unit tests using JUnit and Mockito

Integration Tests

• Full API flow using Spring Boot Test

• React components tested with Jest & React Testing Library

---

13. Deployment and Maintenance

Deployment

• Dockerized backend and frontend

• Hosted on Render or Vercel

• CI/CD pipeline using GitHub Actions

Maintenance

• Modular structure supports extension

• Feature toggles for new functionality

• Admin panel for user and task monitoring

---

14. Appendix

Glossary

• Task: A to-do list item

• CRUD: Create, Read, Update, Delete

• JWT: JSON Web Token

Acronyms

Acronym	Meaning
API	Application Programming Interface
UI	User Interface
DB	Database
JWT	JSON Web Token
ORM	Object Relational Mapping