ASSIGNMENT 2 : DOCUMENTATION
Task Tracker
Indrajith Udantha Ranaweera
Staffordshire University
CB014640
Use Case
Task tracker web app was designed and developed from the ground to be versa le.
Use Case ID 1.1
Use Case Name: Task and Subtask Management with Status Automa on
Actors: User (Task Creator/ Manager)
Steps:
1. User opens the web app and creates a new task, op onally adding subtasks, a
deadline, and priority.
2. User can check off subtasks as they are being completed.
3. The backend stores and updates all tasks and subtask data.
4. The frontend displays the status of each task, automa cally upda ng to "Completed"
when all subtasks are checked, or "Delayed" if the deadline passes without
comple on.
Postcondi on: User can track tasks and subtasks, with automated status updates and a
responsive interface accessible from both desktop and mobile devices.
Use Case ID 1.2
Use Case Name: Product Assembly Coordinator
Actors: Users (Task Creator/ Manager and Product Assemblers)
Steps:
1. Manager opens the web app and creates a new task, adding subtasks per assembly
stage with a deadline, and priority.
2. Assemblers can check off subtasks as they complete sub-assemblies of a bigger
project.
3. The backend stores and updates the progress of each task and subtasks.
4. The frontend displays the status of each task, automa cally upda ng to "Completed"
when all subtasks are checked, or "Delayed" if the deadline passes without
comple on.
Postcondi on: Manager can track work progress, with automated status updates and a
responsive interface accessible from both desktop and mobile devices.
Design Decisions
Frontend – React.js
React's ease of use and vast support community make it ideal for rapid experimenta on and
learning. Axios was used for API calls, ensuring stable connec vity with the backend server.
React's state management allows users to receive immediate feedback as they interact with
tasks and subtasks, without requiring full page reloads. The UI is designed to work with both
desktop and mobile browsers, allowing access from any device
Therefore, React.js was chosen for its modularity and reusability, allowing for obvious
separa on of concerns and easy future growth.
Backend – Node.js/Express
Node.js with Express was selected for its lightweight, fast, and easy-to-configure RESTful API
capabili es. For demonstra on purposes, all data is stored in memory, making setup easy
and elimina ng the need for database configura on. This can be swapped for a persistent
database in future versions. CRUD opera ons for tasks and subtasks are exposed via clear,
RESTful endpoints, suppor ng future integra on or expansion.
Technical Approach
Frontend – React.js
Created modular components for task crea on, lis ng, subtask management, and status
display, resul ng in a scalable and manageable codebase. Implemented a func on that
automa cally changes the task's status to "Completed" when all subtasks are checked,
"Delayed" if the deadline passes without comple on, and "Pending" otherwise. I used Axios
to send and receive data to and from the backend, as well as to handle all CRUD ac ons for
tasks and subtasks. I used current CSS-in-JS and inline styles to create a clear, accessible, and
mobile-friendly design.
Backend – Node.js/Express
Express routes were implemented to handle HTTP requests for task and subtask crea on,
upda ng, retrieval, and dele on. The backend stores and updates all tasks and subtask data,
while the frontend computes and displays status using the most recent data. Allowing cross-
origin requests ensures easy communica on with the frontend running on a separate port
during development.
Tes ng Methods
Unit Tes ng
End-End Tes ng
Scenario Simulated Tes ng
Cross Browser Tes ng
Challenges Faced
Careful state management and recurring polling in the front-end were necessary to
guarantee that the status changed in real me when all subtasks were checked or
when a deadline passed.
For convenience, in-memory storage was used. However, when the backend server
restarts, all data is deleted. Therefore, test phase needed more me as the dummy
data had to be re-entered on every test case.
Properly installing and managing all dependencies required a lot of trial and error as
the relevant documenta on was not specific to all use cases.
UI/UX design needed a lot of a en on since it had to be intui ve to any user. Bu on
loca ons had to be changed several mes based on test users’ feedback.
Addi onal Features and Non-Func onal Requirements
The web applica on can be deployed via a single .bat file. Which makes it easy to any
non-technical user to run the applica on locally.
Codebase is intui vely structured to allow future modifica ons .
Responsive designs have been used, where the applica on adapts based on the
device and number of addi onal subtasks.
Way Forward
User authen ca on: Add login and registra on features to support mul ple users
and private task lists.
Persistent database: Integrate a database such as MongoDB which allows data to be
persist when server restarts.
Groups: Ability create and enroll users into teams/groups.
Mobile app
Administrator access: Role based access control and interfaces to manage, monitor
or execute tasks efficiently.
