FACULTY OF COMPUTER AND MATHEMATICAL SCIENCES BACHELOR IN
INFORMATION TECHNOLOGY (HONS.)
ICT626 – BACK-END TECHNOLOGY
PROJECT TITLE – TASK MANAGER SYSTEM
NAME STUDENT ID GROUP
MOHAMAD AFIQ BIN MOHAMAD 2023197751 RCDCS251 5A
SHARIFUZAN
WAN MUHAMMAD DANISH AIMAN BIN 2023516353 RCDCS251 5A
WAN MOHD NAZIM
MUHAMMAD AFIF DZUFAIRI BIN MAT 2023367671 RCDCS251 5A
TARMIZI
MUHAMMAD HAKIMIE BIN AHMAD 2023136019 RCDCS251 5A
ZIKRI
MUHAMMAD AFIQ ARIF BIN MOHD IDRIS 2023197509 RCDCS251 5A
LECTURER NAME: SIR MOHAMMAD HAFIZ BIN ISMAIL
Table of Contents
1.0 PROJECT BACKGROUND ................................................................................ 3
2.0 MODULE ........................................................................................................... 4
2.1 User Module Architecture ................................................................................ 4
2.2 Mobile Users (Flutter App) ............................................................................... 4
3.0 USECASE ........................................................................................................... 6
3.1 Personal Productivity Management .................................................................. 6
4.0 FLOWCHART .................................................................................................... 8
4.1 Flowchart For User Interaction Flow ................................................................ 9
4.2 Flowchart For Task Management Flow ............................................................10
5.0 USER INTERFACE ...........................................................................................11
5.1 MOBILE USER INTERFACE ........................................................................11
5.2 WEBSITE INTERFACE .................................................................................18
6.0 CONCLUSION ..................................................................................................25
1.0 PROJECT BACKGROUND
Modern Cross-Platform Task Management Solution
In today's fast-paced digital environment, individuals and teams require efficient tools to manage
their daily tasks and projects across multiple devices and platforms. Traditional task management
solutions often lack seamless synchronization between different platforms or require complex
setup procedures that hinder user adoption. This project addresses these challenges by developing
a comprehensive task management system that provides unified experience across web and mobile
platforms, ensuring users can access and manage their tasks from anywhere, at any time.
Full-Stack Architecture with Real-Time Synchronization
The system employs robust full-stack architecture utilizing Laravel as the backend API framework
with MySQL database storage, providing secure and scalable server-side functionality. The web
frontend is built with modern technologies offering responsive design and intuitive user interface,
while the mobile application is developed using Flutter framework, enabling native-like
performance on both Android and iOS platforms. The architecture ensures real-time data
synchronization between all platforms through RESTful API endpoints, allowing users to create,
update, and delete tasks on one device and immediately see the changes reflected across all their
connected devices.
Feature-Rich User Experience with Extensible Design
The application provides comprehensive task management capabilities including task creation,
status tracking (pending, in-progress, completed), priority levels (low, medium, high), due date
management, and advanced filtering options. The system incorporates modern UI/UX principles
with dark/light theme support, responsive design, and intuitive navigation patterns. Built with
scalability in mind, architecture supports future enhancements such as user team collaboration
features, file attachments and notification systems. The modular design ensures easy maintenance
and feature additions, making it suitable for both personal productivity and potential enterprise-
level deployments
2.0 MODULE
2.1 User Module Architecture
Web Users (Frontend)
• Task Management Module: CRUD operations for tasks with real-time updates
• Dashboard Module: Task overview, statistics, and quick actions
• Filter & Search Module: Advanced filtering by status, priority, due date
• Theme Module: Dark/light mode toggle and UI customization
2.2 Mobile Users (Flutter App)
• Provider Pattern Modules:
o TaskProvider: State management for task operations
o ThemeProvider: Theme switching and UI state management
• Service Modules:
o ApiService: HTTP client for backend communication
• Screen Modules:
o TaskListScreen: Main task display and management
o TaskFormScreen: Task creation and editing interface
o ApiDebugScreen: Development and testing tools
• Widget Modules:
o TaskCard: Individual task display component
o FilterSheet: Advanced filtering interface
o ThemeToggle: Theme switching controls
Backend (Laravel API)
• Task Controller Module: RESTful API endpoints for task operations
• User Controller Module: User management and profile operations
• Database Migration Module: Schema management and versioning
• Model Modules:
o Task Model: Task entity with relationships and business logic
o User Model: User entity
• Middleware Modules: CORS and request validation
• Service Layer: Business logic separation and data processing
Database Schema Modules
• Users Table: User account information
• Tasks Table: Task data with foreign key relationships
• Migration System: Version control for database schema changes
3.0 USECASE
3.1 Personal Productivity Management
• Individual Task Tracking: Users can create, organize, and track personal tasks with
priority levels (low, medium, high) and status updates (pending, in-progress, completed)
• Cross-Platform Access: Seamlessly switch between web browser and mobile app to
manage tasks whether at home, office, or on-the-go
• Due Date Management: Set and track deadlines for important tasks with visual
indicators and filtering capabilities
• Progress Monitoring: View task completion statistics and productivity insights across
different time periods
• Include:
– Individual Task Tracking includes Update Task and Delete Task to allow users to
modify or remove existing tasks.
– Due Date Management includes Due Date Update to enable users to change task
deadlines.
– Progress Monitoring includes Individual Task Tracking because it relies on updated
task status data.
– Cross-Platform Access includes Individual Task Tracking, Due Date Management, and
Progress Monitoring to ensure all features work consistently across different devices.
4.0 FLOWCHART
The flowchart illustrates the architecture of a Laravel-based web and mobile client backend
application. "Web Client" and "Mobile Client" at the top interact with the "Laravel Backend (API
server)," which handles API requests. The backend has a "Router Handler" with API routes and
middleware, then a "Task Controller" with other API routes and middleware. The "Task Model"
layer contains business logic and relations, mapping to a "MySQL Database" where data is stored
in a "Task Table" with columns id, title, desc, status, priority, and due_date. Such a structure shows
how Laravel efficiently handles API routes, controller business logic, and database operations for
a multi-client system.
4.1 Flowchart For User Interaction Flow
The flow process begins at the "Start" node. Next, there is a decision node called "Choose Platform
Mobile App". At this decision node, there are a total of two primary options identified as "Web
App (Browser)" and "Mobile App." Selecting the "Web App (Browser)" option leads to the "Web
App (Browser)" terminal node reflecting the development of the browser-based application that
Laravel supports as a web application framework. If the "Mobile App" option is selected, this
option has two sub-options: "Android" and "iOS" to consider. Each of them terminates at "Flutter
App (Android)" and "Flutter App (iOS)," indicating the appropriated use of Flutter framework's
capability for cross-platform mobile app development. The flowchart ends after this decision.
4.2 Flowchart For Task Management Flow
The flowchart illustrates the working process of a Task List Dashboard, describing the creation,
display, editing, and deletion process of tasks. It begins with an "Operation? Create" decision and
proceeds to a "New Task Form" where the users enter title, description, priority, and due date and
then an API request (POST /api/tasks) to insert data in the database. To view, the "View Tasks List"
option makes a GET /api/tasks request, filtered by status/priority/search, using a SELECT query
to draw data from the tasks table. Editing involves "Edit Task Details" to change status, priority,
or due date, through a PUT /api/tasks/{id} request that updates the database, while removal starts
with "Remove Task," asks for deletion confirmation, and makes a DELETE /api/tasks/{id} request
to delete the record. All the things are synchronized in real-time so that the dashboard reflects the
latest database updates.
5.0 USER INTERFACE
5.1 MOBILE USER INTERFACE
This image displays the mobile task manager's main interface, featuring a search bar at the top for
quick task filtering, followed by a vertically scrollable list of task cards. Each task card
prominently displays the task title in bold, a brief description (with longer text truncated), and key
metadata including status (e.g., "PENDING"), priority level (e.g., "MEDIUM"), and due date
where applicable. The tasks are visually separated by clean horizontal dividers, creating an
organized and scannable layout that prioritizes essential information while maintaining a
minimalist design for optimal mobile usability. The interface effectively balances information
density with readability, allowing users to quickly assess and manage their tasks on the go.
The second image presents a detailed task view, showing comprehensive information for "Test
Task 1753086883296" with clearly labeled sections for status (PENDING), priority (MEDIUM),
and description ("This is a test task created from mobile app"). Below these, the "Important Dates"
section displays metadata including creation and last update timestamps (both showing Jul 21,
2025 at 08:34 AM), while the due date field remains unset ("Not set"). The layout uses bold headers
and bullet points to organize information hierarchically, creating a clean, scannable interface that
presents all task details at a glance while maintaining visual consistency with the system's
minimalist design language.
This image includes a Theme Settings section at the bottom, offering three display options: Light
Mode (forces a light interface), Dark Mode (enforces dark colors), and System Mode
(automatically follows the device's theme settings). The options are presented in a clean, bulleted
list with clear labels, allowing users to easily customize the app's visual appearance to their
preference. The design maintains consistency with the app's minimalist style while providing
essential personalization controls.
This screenshot showcases the task manager's dark theme interface, featuring an inverted color
scheme with dark backgrounds and light text for improved nighttime visibility while maintaining
all functional elements. The design preserves the app's clean layout with a search bar at the top,
clearly legible task cards displaying titles in bold, truncated descriptions, and prioritized metadata
(status, priority levels, and due dates), all separated by subtle dividers the dark theme reduces eye
strain without compromising the app's minimalist organization or information hierarchy, ensuring
seamless transition between light and dark modes while keeping interface elements consistently
recognizable
This screenshot displays the Edit Task interface, where users can modify task details through a
structured form. The form is divided into three clear sections: Task Information (with fields for
Title and optional Description, both pre-filled with "laravelmmm" in this example), Status &
Priority (showing radio buttons for Pending status and Medium priority selection), and Due Date
(pre-set to Wednesday, Jul 23, 2025 with a toggle checkbox). The layout uses minimalist design
elements like section dividers, placeholder underscores for empty fields, and radio buttons for
selections, culminating in an "Update Task" action button - maintaining visual consistency with
the app's clean interface while providing all necessary editing functionality in a single, scrollable
view.
The API Debug panel verifies successful backend connectivity, indicated by a "Connected" status
with the specified API endpoint (http://10.0.2.2:8000/api/tasks). It provides comprehensive system
diagnostics, including pagination metrics (displaying 10 of 45 total tasks per page) and
functionality to test connections through a "Create Test Task" feature. The interface presents raw
task data in an organized format, listing task IDs, titles (such as "laravelmmm"), and their
completion statuses (pending or completed). This technical overview maintains the application's
consistent design principles while offering developers clear visibility into backend operations and
data flow. The layout ensures efficient monitoring through structured presentation of system
information without compromising the interface's minimalist aesthetic.
The Filter Tasks section provides users with organized controls to refine their task view through
two dropdown menus: Status (offering "All," "Pending," "In Progress," or "Completed" options)
and Priority (with "All," "Low," "Medium," or "High" selections). Below these filters, action
buttons for "Clear All" (to reset selections) and "Apply Filters" (to confirm choices) enable quick
adjustments. The design uses bold text for default selections ("All") and maintains a clean,
hierarchical layout that aligns with the application's minimalist interface while delivering precise
control over task visibility. This streamlined filtering system enhances usability by allowing users
to efficiently sort and prioritize their workload
5.2 WEBSITE INTERFACE
The web interface of the Task Manager System is designed to be clean, user-friendly, and
responsive, allowing users to manage their tasks efficiently. At the top, a fixed blue navigation bar
provides quick access to "All Tasks" and "Add Task" pages, with a prominent "+ Add New Task"
button on the right for easy task creation. Just below, a filtering section enables users to sort tasks
by status, priority, or keywords through dropdown menus and a search bar, followed by a "Filter"
button for quick results. The main content area displays tasks in a structured grid layout where
each task is shown in a card format with clear labels for status, priority, due date, and description.
Each card includes three functional buttons View, Edit, and Delete color-coded for intuitive
interaction. The interface effectively uses color indicators, minimalist design elements, and
consistent spacing to enhance usability, ensuring users can quickly view, manage, and update tasks
across different devices with ease.
The Status filter presents a dropdown menu containing four clearly labeled options: "All Statuses"
(showing unfiltered tasks), “Pending”, "In Progress" (active tasks currently being worked on), and
"Completed" (finished tasks). The interface displays these options in a clean, vertically stacked list
within a minimalist dropdown panel that matches the application's overall design aesthetic. Each
status option appears with equal visual weighting, formatted in the system's standard font and
spacing for consistent user interaction. The selection mechanism follows conventional dropdown
menu behavior where clicking any option would immediately apply the corresponding task filter.
The Priority filter presents users with four clearly labeled options when activated: "All Priorities"
(showing unfiltered tasks), "Low" (for less urgent items), "Medium" (standard priority), and
"High" (critical tasks). These options appear in a clean, vertically aligned dropdown menu that
matches the application's minimalist design language, featuring consistent typography and
balanced spacing between each selectable priority level. The interface provides intuitive priority-
based filtering without visual clutter, maintaining the system's streamlined aesthetic while enabling
efficient task organization through straightforward single-selection functionality.
The Create New Task interface presents a streamlined form for task creation, featuring a mandatory
Title field and an optional Description field. Below these, two dropdown menus for required Status
and Priority selections appear side-by-side, each with placeholder text ("Select Status" and "Select
Priority"). A Due Date field follows, displaying the format "mm/dd/yyyy --:--". The interface
concludes with two clearly labeled action buttons - "Back to Tasks" on the left and "Create Task"
on the right - maintaining visual balance. The layout employs the application's characteristic
minimalist design through clean spacing, consistent typography, and logical grouping of related
elements
The Task Details interface displays comprehensive information for a selected task, beginning with
the task title ("Test Task from Mobile") followed by its description ("Testing API connection").
Key metadata appears in a clean bulleted list format: "Assigned To" (showing Unassigned status),
"Created" timestamp (July 21, 2025 at 01:42 AM), "Due Date" (not set), and "Last Updated"
timestamp (matching creation time). The interface uses bold labels for categories and regular text
for values, creating clear visual hierarchy. A horizontal divider separates this information from the
navigation "Back to Tasks" button at the bottom. The layout maintains the application's minimalist
aesthetic through ample white space, consistent typography, and logical information grouping,
presenting all task details in a scannable, single-view format while preserving intuitive navigation
contro
The Edit Task interface features a clean form layout with three clearly defined sections. The top
portion contains a Title field followed by a Description text area. Below these, the interface
presents three vertically stacked input fields: a Status dropdown, Due Date selector showing date
and time format, and a Priority dropdown. The form includes an asterisk symbol beside certain
fields to indicate mandatory information required for task updates, ensuring users understand
which elements must be completed. A "Back to Tasks" button appears at the bottom, maintaining
the application's minimalist aesthetic through consistent spacing and typography
The interface displays a confirmation dialog with the clear message "Are you sure you want to
delete this task?" prominently centered on the screen. Below this prompt, two action buttons appear
side-by-side: OK (confirming deletion) and Cancel (aborting the action)
6.0 CONCLUSION
The development of the Task Manager System successfully addresses the growing need for a
modern, cross-platform task management solution that enhances personal productivity and small
team collaboration. By leveraging Laravel for the backend API and Flutter for mobile
development, the system achieves real-time synchronization and seamless integration across web
and mobile platforms. This ensures users can access, manage, and update their tasks anytime and
anywhere, whether using a browser or a mobile device. The project demonstrates how full-stack
technologies can be combined to deliver an efficient and intuitive task management experience.
In terms of functionality, the system provides essential features such as task creation, status
tracking, priority assignment, due date handling, and advanced filtering. These core capabilities
are designed with user experience in mind, incorporating clean UI/UX principles and
customization options such as dark and light themes. Moreover, the system architecture is modular
and scalable, allowing for the smooth addition of future enhancements like team task sharing,
notifications, and file attachments. This forward-thinking design ensures the system remains
adaptable to a variety of user needs over time.
Overall, the Task Manager System fulfills its intended objectives by offering a robust and reliable
platform for task organization. It demonstrates technical proficiency in backend development,
mobile integration, and user-centered interface design. This project not only enhances productivity
for individual users but also lays the groundwork for team-based functionality, making it a versatile
tool for both academic and professional environments. The successful completion of this system
reflects a strong understanding of full-stack development principles and real-world application
demands.
