A

Mini Project Report

On

“Web Based Digital Online System”

For

BACHELOR OF TECHNOLOGY
in
“Computer Science & Engineering”

Submitted by
Rishikesh Mall
(Roll No. : 2201200109019)

Under Guidance of
Mr. Nitin Dixit
(Assistant Professor, CSE)

Submitted To

DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING

INSTITUTE OF TECHNOLOGY & MANAGEMENT, GIDA,
GORAKHPUR
SESSION: 2024-25
 INSTITUTE OF TECHNOLOGY &MANAGEMENT
Integrated Technical Campus: Engineering, Pharmacy & Management
Approved by AICTE, Pharmacy Council of India, New Delhi & Affiliated to Dr. APJAKTU, Lucknow
AL-1, Sector - 7, GIDA, Gorakhpur - 273209 (UP)

Department of Computer Science & Engineering

Vision & Mission of the Department

Vision of the Department:

Excellence in education to produce competent computerprofessional to meet the need of

industry and society.

Mission of the Department:

1- To impart quality education in computer science & engineering through competent faculties,
good infrastructure and learning resources to produce competent graduates required by the
industry.

2- To inculcate knowledge and skill sets and to strengthen industry-institute interaction to

promote individual and team excellence to meet the requirement of industry.

3- To develop graduates to be computer professionals with high ethical standard and self-
learning ability.

Program Educational Objective

PEO No. Program Educational Objectives Statements

To prepare competent computer science graduates to have successful career in
PEO1
application software development and in allied industries.
To impart in depth knowledge in core computer science and engineering domain
PEO2 and expertise in providing solution to complex problems using modern ITtools to
meet the requirement of industries.
To inculcate professional skills and to work effectively as individual and member
PEO3
of a team in multidisciplinary projects.
To develop self learning ability, to protect environment and exercise ethical code
PEO4
of conduct in professional practice and activities.
 INSTITUTE OF TECHNOLOGY &MANAGEMENT
Integrated Technical Campus: Engineering, Pharmacy & Management
Approved by AICTE, Pharmacy Council of India, New Delhi & Affiliated to Dr. APJAKTU, Lucknow
AL-1, Sector - 7, GIDA, Gorakhpur - 273209 (UP)

Department of Computer Science & Engineering

Rubrics are tagged with course outcomes for the laboratory performance.

PO
Rubrics CO Statements MAPPING
Students will be able to work effectively in individual and PO9,
1 C211.1 teamto manage the projects. PO11
Apply written and verbal communication through report and
2 C211.2 presentation. PO10

Apply the fundamental principles of engineering into

PO1,
3 C211.3 development of technology and able to develop work ethics in
PO8
industry.
 INSTITUTE OF TECHNOLOGY &MANAGEMENT
Integrated Technical Campus: Engineering, Pharmacy & Management
Approved by AICTE, Pharmacy Council of India, New Delhi & Affiliated to Dr. APJAKTU, Lucknow
AL-1, Sector - 7, GIDA, Gorakhpur - 273209 (UP)

Department of Computer Science & Engineering

Evaluation
Program Name : B. Tech (CSE) Semester : VII
Course Name : Mini Project or Internship Session : 2024-25
Course Code : KCS 752 Section : C

Sr. No Roll No. Name CO1 CO2 CO3 TOTAL

Rubrics Rub 1 Rub 2 Rub 3
Maximum Marks
1. 2201200109019 Rishikesh Mall
CERTIFICATE

v
 DECLARATION

This is certified that the work which is being presented in the mini project entitled “Web Based

Digital Admission System” is submitted in the department of Computer Science and Engineering

of Institute of Technology and Management, Gida, Gorakhpur is an authentic record of my own

work carried out during the semester under the supervision of “Front End Web Development

Training at Softpro Training Lucknow”.

The matter presented in this mini project has not been submitted by me for the award of any other

degree of this or any other institute/university.

Rishikesh Mall

This is to certify that the above statement made by the candidate is correct to the best of my
knowledge.

Date Candidate Signature

Mr. Nitin Dixit Mr. Ashutosh Rao

(Mini Project Coordinator) Head of Department (CSE)

vi
 ABSTRACT

This project introduces a task-tracking application designed to help users effectively manage and

organize their tasks across various stages of completion.

With a streamlined, user-friendly interface, the application allows users to create tasks with

customizable tags, set due dates, and update their status in real time. The application features

automatic notifications for tasks due on the current date, enhancing user accountability.

Task completion is tracked through dynamic columns ("To Do," "Doing," "Done"), each displaying

tasks based on their current status.This project integrates React ‘s component-driven structure,

efficient state management, and local storage for data persistence, providing a reliable and responsive

experience.

vii
 ACKNOWLEDGEMENT

Whenever a module of work is completed, there is always a source of inspiration. I always find my

parents as my torch bearers. While completing this task, I realized from my inner core that Rome was

not built in day. I found a stack of mini project reports in the library of ITM Gorakhpur library. Those

reports are the landmarks for me on the way of this task. The presented report is an effort of day and

night works. Selection is always tough; undoubtedly I am accepting this fact.

I am sincerely thankful to Mr. Ashutosh Rao (HOD) &Mr. Nitin Dixit (Mini Project

Coordinator)for his support. I express my gratitude and thanks to all the faculties and staff members

of Computer Science & Engineering department for their sincere cooperation in furnishing relevant

information to complete this mini project report well in time successfully.

Finally, my greatest debt is to my parents, my family for their enduring love, support and forbearance

during my project work.

Rishikesh Mall

B. Tech, CSE 7th Sem

Roll No. : 2201200109019

viii
 TABLE OF CONTENTS

Page No.
CERTIFICATE v
DECLARATION vi
ABSTRACT vii
ACKNOWLEDGEMENT viii
TABLE OF CONTENTS ix
LIST OF TABLES x
LIST OF FIGURES xi
LIST OF SYMBOLS AND ABBREVIATIONS xii

CHAPTER1: INTRODUCTION 1-3

1.1 PROBLEM STATEMENT 1
1.2 OBJECTIVE OF THE PROJECT 1
1.3 SCOPE OF THE PROJECT 2
1.4 SIGNIFICANCE OF THE PROJECT 2
1.5 OVERVIEW OF TECHNOLOGY USED 3
CHAPTER2: LITERATUREREVIEW 4 – 10

2.1 EXISTING TASK MANAGEMENT SYSTEMS 4–5

2.2 TASK MANAGEMENT CHALLENGES 6–7
2.3 COMPARISON OF KEY FEATURES 8 – 10
CHAPTER 3: TECHNOLOGY STACK 11 – 22
3.1 FRONTEND 11 – 13
3.2 ICONS AND ASSETS 13 – 16
3.3 STATE MANAGEMENT AND LOCAL STORAGE 16 – 17
3.4 JAVASCRIPT ES6+ FEATURES 18 – 19
3.5 DEVELOPMENT TOOLS 19 – 20
3.6 BROWSER DEVELOPER TOOL 21 – 22
CHAPTER 4 : SYSTEM DESIGN 23 – 29
4.1 ARCHITECTURE OVERVIEW 23

4.2 COMPONENT DESIGN 23 – 25

4.3 DATA FLOW AND STATE MANAGEMENT 25 – 26

4.4 LOCAL STORAGE INTEGRATION 26 – 27

ix
4.5 STYLING AND USER INTERFACE DESIGN 28 – 29

CHAPTER 5 : IMPLEMENTATION OF TASK -TRACKING APPLICATION 30 - 49

5.1 APPLICATION OVERVIEW 30 – 31
5.2 SETTING UP THE DEVELOPMENT ENVIRONMENT 31 – 33
5.3 COMPONENT ARCHITECTURE 34 – 37
5.4 STATE MANAGEMENT AND DATA FLOW 38 – 40
5.5 EVENT HANDLING AND USER INTERACTION 41 – 43
5.6 INPUT VALIDATION AND USER FEEDBACK 43 – 46
5.7 DESIGN AND UI/UX CONSIDERATIONS 46 – 49
CHAPTER 6 : TESTING AND DEBUGGING 50 - 57
6.1 MANUAL TESTING 50 – 51
6.2 DEBUGGING 52 –54
6.3 NO AUTOMATED TESTING 54 – 55
CONCLUSION AND FUTURE WORK 56 – 57
APPLICATION WALKTHROUGH 58
REFERENCE 59

x
 LIST OF FIGURES

Figure No. Title Page No.

Figure 1.1 Visual Representation of Task – Tracking Web App 3
Figure 2.1 Literature Review structure for Task-track Management Application 10
Figure 3.1 UI View of the Project 11
Figure 3.2 Check – Mark Button 15
Figure 3.3 Delete Button 15
Figure 3.4 Direct – Hit Button 15
Figure 3.5 Fire – Icon 16
Figure 3.6 Glowing – Star – Image 16
Figure 3.7 Browser Developer Tools 22
Figure 4.1 Component Interaction Diagram 25
Figure 4.2 User Interaction Flow in Task-Tracking Application with Local Storage 27
Integration
Figure 5.1 Visual Studio Code for this project 32
Figure 5.2 Node js version 20 has been used in this project 32
Figure 5.3 Implementation of App.jsx 34
Figure 5.4 Implementation of Main.jsx 35
Figure 5.5 Implementation of TaskForm.jsx 36
Figure 5.6 Implementation of TaskColumn.jsx 36
Figure 5.7 Implementation of TaskCard.jsx 37
Figure 5.8 Example Code Snippet of Task Creation Validation 44
Figure 5.9 Example Code Snippet of Displaying Error Message 45
Figure 5.10 Example Code Snippet of Notification System 45
Figure 8.1 Task Tracking Web Application without Due date Feature 58
Figure 8.2 Task Tracking Web Application with Due date Feature 58

xi
 LIST OF TABLES

Table No. Title Page No.

Table 2.1 Comparison of Key features between Existing Task Track Systems and my 6
application

xii
 CHAPTER-1
INTRODUCTION TO TASK – TRACK WEB APPLICATION

1.1 Problem Statement :

 In today's fast-paced world, managing tasks efficiently is crucial for both personal and
professional productivity.
 Many individuals struggle to keep track of their to-do lists, deadlines, and task progress.
Existing solutions often come with complex features that may not be necessary for everyone.
 This project aims to develop a simple and intuitive task tracking application that allows users
to easily add, manage, and track their tasks.
 The application will enable users to categorize tasks based on their status (e.g., "To Do",
"Doing", "Done"), set due dates, and mark tasks as completed. Additionally, users will be able
to delete tasks once they are no longer needed.
 The goal of this project is to provide a lightweight tool for users to stay organized, with a
focus on simplicity, ease of use, and essential features.

1.2 Objective of the Project :

The objective of this project is to develop a simple and user-friendly task tracking application
that allows users to:

1. Create Tasks: Users can easily add tasks with details like task name, status, due date, and
tags.
2. Organize Tasks: Tasks will be categorized based on their status (To Do, Doing, Done),
making it easier to track progress.
3. Edit and Delete Tasks: Users can update task details and remove tasks once they are no
longer needed.
4. Complete Tasks: Users can mark tasks as completed, helping them keep track of finished
work.
5. Set Due Dates: Tasks can have due dates, with reminders for tasks due today.

This application aims to provide a simple, intuitive interface for managing tasks efficiently and
effectively.

1
1.3 Scope of the Project :

The scope of this task tracking application includes:

1. Task Management: The application allows users to create, edit, delete, and complete tasks.
Each task can have a name, tags, status, and due date.
2. Task Categorization: Tasks are categorized into three statuses: "To Do," "Doing," and
"Done," providing a clear view of their progress.
3. Tagging System: Users can assign multiple tags (e.g., HTML, CSS, JavaScript, React) to
tasks for better organization and identification.
4. Due Date Reminders: The application provides notifications for tasks that are due today.
5. Simple User Interface: The interface is designed to be straightforward and easy to use, with
no complex configurations or setup required.
6. Data Persistence: Tasks are stored locally in the browser using localStorage, ensuring data is
saved even after the application is closed or refreshed.

1.4 Significance of the Project :

This task tracking application serves as an efficient tool for personal task management. The
project provides the following benefits:

1. Improved Productivity: By organizing tasks into categories like "To Do," "Doing," and
"Done," users can better prioritize and track their progress, leading to improved time
management and productivity.
2. Simple User Interface: The application is designed to be user-friendly, making it accessible
even to those who are not familiar with complex task management systems.
3. Customization with Tags: The tagging feature allows users to categorize tasks by different
criteria (e.g., HTML, CSS, JavaScript), helping them stay organized and focused on specific
areas of work.
4. Due Date Notifications: The reminder system ensures that tasks are completed on time by
notifying users of tasks that are due today.
5. Local Data Storage: The use of localStorage ensures that users' tasks persist between
sessions without requiring an internet connection, making it reliable and efficient for personal
use.

2
1.5 Overview of the Technology used :

This task tracking app is built using simple web technologies:

1. React: A JavaScript library for creating interactive user interfaces.

2. HTML: Used to structure the content of the app.
3. CSS: Styles the app to make it look good and responsive.
4. JavaScript: Adds functionality like adding, deleting, and updating tasks.
5. localStorage: Saves tasks in the browser so they stay even after the app is closed.

These technologies work together to make the app easy to use and manage tasks efficiently.

Block Diagram Representation of the Task – Tracking Web Application

Fig 1.1. : Visual Representation of Task – Tracking Web App

3
 CHAPTER – 02
LITERATURE REVIEW
2.1 Existing Task Management Systems:

Task management systems have become essential tools for individuals and teams to track, organize,
and manage their tasks efficiently.

These systems offer a variety of features to help users prioritize, delegate, and monitor the progress
of tasks.

Popular Task Management Tools:

1. Trello: Trello is a visually-oriented task management tool that uses boards, lists, and cards to
help users organize tasks. It is widely used for project management and collaboration,
especially among teams. Its drag-and-drop interface makes it easy to move tasks between
different stages of completion.

2. Asana: Asana is a project management tool that focuses on task tracking and team
collaboration. It allows users to create tasks, assign them to team members, set deadlines, and
track progress. It also includes features like task dependencies, project timelines, and
workflow automation.

3. Todoist: Todoist is a personal task management app that helps users organize tasks by project,
priority, and deadline. It has a simple and intuitive user interface that makes it ideal for
managing personal tasks and small projects.

4. Microsoft To-Do: This task management app integrates seamlessly with other Microsoft
tools. It is designed for simple task tracking and supports features like due dates, reminders,
and task categories. It's suitable for users looking for a straightforward tool with integration
into the Microsoft ecosystem.

Key Features of Existing Systems:

 Task Creation: Most task management systems allow users to create tasks with key details
like title, due date, and priority. This feature helps users organize their work effectively and
ensures nothing is overlooked.

 Task Prioritization: Users can assign due dates, set priorities, and categorize tasks, which
helps them focus on urgent tasks first. These features are critical for users with a heavy
workload.

4
  Collaboration: Many task management tools enable collaboration, allowing teams to assign
tasks to specific members, comment on tasks, and share project progress.

 Notifications: Task reminders and due date notifications help users stay on track and avoid
missing deadlines.

 Cross-Platform Syncing: Most modern task management systems support cloud syncing,
ensuring that users can access their tasks from any device, whether on desktop or mobile.

Limitations of Existing Systems:

 Complexity: Some tools, like Asana and Trello, offer a wide range of features that may be
overwhelming for individual users or small teams.

 Cost: While many task management tools offer free versions, some advanced features (such
as detailed reporting, additional integrations, or larger storage) are often locked behind paid
plans.

 Limited Customization: Many existing systems offer limited customization options,

meaning users cannot fully tailor the system to their specific needs.

 Lack of Offline Mode: Some tools, particularly cloud-based platforms, require an internet
connection to function. Opportunities for Improvement:

 Task management tools could offer simpler interfaces for individual users or smaller teams,
reducing the learning curve and enhancing usability.

 More affordable solutions could be developed to cater to individuals or small businesses that
cannot afford the premium versions of larger systems.

2.2Task Management Challenges :

1) Prioritization Issues:
a. Challenge: With multiple tasks to handle, it is often difficult to identify which tasks are most
urgent or important.
b. Impact: Improper prioritization can result in delays, missed deadlines, and reduced
productivity.
c. Solution: Utilizing task prioritization techniques (e.g., Eisenhower Matrix, ABC
prioritization) can help in organizing tasks based on urgency and importance.
2) Procrastination:
a. Challenge: Delaying or postponing tasks is a common issue, especially for tasks perceived as
tedious or challenging.
b. Impact: Leads to a pile-up of tasks, causing stress and an overwhelming workload.
5
 c. Solution: Breaking tasks into smaller, manageable steps and setting deadlines can help
overcome procrastination. Implementing time-blocking techniques also helps in staying on
track.
3) Overwhelm and Stress:
a. Challenge: Having too many tasks or an unclear view of one's workload can lead to burnout
and feelings of being overwhelmed.
b. Impact: Stress affects mental well-being and can reduce focus and efficiency.
c. Solution: Task management tools that allow categorization and task breakdowns can reduce
complexity and provide clarity, helping individuals focus on one task at a time.
4) Lack of Focus:
a. Challenge: Inability to maintain focus due to distractions or multitasking.
b. Impact: Reduces the quality of work and increases the time needed to complete tasks.
c. Solution: Time management techniques such as the Pomodoro technique and using task
management systems to track progress can aid in maintaining focus.
5) Poor Communication and Collaboration:
a. Challenge: In team environments, poor communication and lack of collaboration can lead to
misaligned goals and inefficiency.
b. Impact: This can delay project completion and create misunderstandings.
c. Solution: Collaborative task management tools like Trello, Asana, or Slack can improve team
coordination, ensure everyone is on the same page, and reduce the risk of miscommunication.

2.3 Comparison of Key Features:

1. User Interface (UI) and Ease of Use

a. The simplicity and intuitiveness of the interface play a crucial role in user adoption.
b. Tools like Trello and Asana are known for their user-friendly, drag-and-drop interfaces,
while others, such as Jira, may have a steeper learning curve due to its more complex
features.
2. Task Creation and Management
 Most task management tools allow users to create tasks with due dates, priority levels, and
labels.
3. Collaboration Features
a. Some task management systems, like Asana and Monday.com, excel in team collaboration
by offering features such as task assignment, comment threads, file sharing, and real-time
notifications.

6
 b. In contrast, Trello primarily focuses on individual use, though it does allow for team
collaboration with some limited features.

Feature Trello Asana Your Task Tracking App

✔️Easy task creation with ✔️Task creation with

✔️Simple task
Task Creation multiple fields (Title, description, due date, status,
creation, few fields
Description, Due Date) and tags

Task ✔️Priority labels (High/Low) ✔️Priority setting ✔️Task status to categorize

Prioritization with color coding with custom fields (Todo, Doing, Done)

✔️Team collaboration with ✔️Shared tasks, ✔️No team collaboration

Collaboration task sharing, comments, and comments, team (Personal task management
attachments discussions only)

✔️Due date feature with

Due Date & ✔️Set due dates and ✔️Due dates with
browser alerts (simple reminder
Reminders reminders, email notifications alerts and reminders
system)

Task Tracking ✔️Track progress with task ✔️Task statuses and ✔️Track progress through task
& Progress statuses and checklists progress bars status (Todo, Doing, Done)

✔️Allows sub-tasks
✔️Add sub-tasks for better ✔️No sub-task functionality
Subtasks and task
task management (tasks are standalone)
dependencies

✔️Tags with color-coding and

task filtering
✔️Custom labels, boards, ✔️Custom fields and
Customization
and backgrounds tags

✔️Integrates with Google ✔️Syncs with

Integration with ❌ No third-party integrations
Calendar, Slack, and other Google Calendar,
Other Tools currently
tools Dropbox.

UI & UX ✔️Modern, intuitive, easy- ✔️Simple yet feature- ✔️Simple UI with task board

7
 to-navigate rich interface and filtering options

Fig.2.1 : Literature Review structure for Task-track Management Application

8
 CHAPTER – 03
TECHNOLOGY STACK

3.1 Front End Technologies :

1) React:
a. Purpose: React was chosen as the main framework due to its component-based structure,
which allows for creating reusable UI elements and makes the application scalable and
maintainable.
b. Role in Application: It serves as the core of the application, managing state (like task data)
and rendering components, such as task columns and individual task cards, based on task
status.
c. Component-Based Architecture: Encourages modular design, making each part of the UI
manageable and reusable.
d. Virtual DOM: Enhances performance by reducing direct DOM manipulation and only re-
rendering changed components.
e. Declarative UI: Simplifies development with components that update automatically based on
state changes.

Fig. 3.1 UI View of the project

9
 2) JavaScript (JS):
a. Functionality: JavaScript enables dynamic interactions, making the application more
responsive and interactive.
b. Implementation: JavaScript powers functions like task creation, status updates, and deletion,
allowing smooth updates to the UI as the user interacts with tasks.
c. Event Handling: Provides dynamic interactivity, enabling responsive features like adding or
deleting tasks instantly.
d. DOM Manipulation: JavaScript can directly manipulate the DOM for real-time updates,
enhancing user experience.
3) CSS:
a. Objective: CSS was used for styling to enhance the visual appeal and improve the user
experience.
b. Application: CSS styles elements across the application, such as task cards, columns, and the
task form, ensuring a clean and organized layout.
c. Layout Control: Flexbox and Grid allow precise, responsive layout designs that work across
screen sizes.
d. Responsive Design: CSS media queries make the app adaptable to different devices (e.g.,
mobile, tablet, desktop).
4) HTML:
a. Structural Basis: HTML provides the structure and layout of the web application, allowing
content to be displayed meaningfully.
b. Usage in Layout: HTML is used in the component templates, giving structure to the task
columns, task form, and buttons, making it easier for users to understand and interact with the
app
c. Structure: HTML provides the foundational layout, creating a clear structure for elements
like headers, footers, and sections.
d. Semantic Elements: HTML5 elements (like <article>, <section>, <header>) improve
accessibility and SEO.

3.2 Icons and Assets :

In this task-tracking application, several icons and assets were incorporated to enhance the user
interface, making the application more engaging and easier to navigate.

1) Icons
a. Key icons used in the app include:

10
 i. Add Task Icon: This icon is placed in the TaskForm component, symbolizing the action of
adding a new task.
ii. Delete Icon: Found in the TaskCard component, this icon represents the option to remove
tasks.
iii. Edit Icon (if applicable): If included, this icon appears next to tasks in the TaskCard
component, allowing users to quickly edit a task’s details. .
2) Images/Assets :
a. Examples of assets used include:
i. Logo/Branding: The logo or brand image appears at the top of the application, helping to
establish the identity of the app.
ii. Background Images: Subtle background images or patterns are incorporated to improve the
visual experience without distracting from the primary functionality of the app.
iii. Task Tag Icons: Custom icons for different task tags are displayed next to each task in the
TaskCard component, visually representing task categories.
3) Custom Assets :
a. Custom-designed assets like icons, illustrations, or images are tailored to match the app's
unique style and branding.
b. For example, custom icons could be used for special actions like task prioritization or
deadlines.

ICONS USED :

Fig. 3.2: CHECK – MARK – BUTTON :

Fig. 3.3 : DELETE ICON :

11
 Fig. 3.4 : DIRECT – HIT - BUTTON :

Fig. 3.5 : FIRE – ICON :

Fig. 3.6 : GLOWING – STAR – IMAGE :

3.3 State Management and Local Storage :

In this application, Local Storage and State Management play key roles in managing data
effectively and ensuring a smooth user experience.

1) Local Storage
12
 a) Purpose: Local Storage is used to store data on the user’s device, allowing information to
persist even after the app is closed or refreshed.
b) Implementation: In this app, Local Storage is used to save task data, which means tasks
remain available even when the page is reloaded.
 When a new task is added or an existing task is deleted, the data is updated in Local Storage,
ensuring it reflects the latest state of tasks.

c) Key Code Snippets:

 Using localStorage.setItem to save tasks to Local Storage whenever they are updated.
 localStorage.getItem is used to retrieve tasks when the app loads, ensuring the saved tasks are
immediately displayed in TaskColumn and TaskCard.
2) State Management with React Hooks
a. Purpose: State Management in React is essential for managing data that changes within the
application, like tasks, tags, and their statuses.
 This allows the app to respond to user actions in real-time, such as adding, updating, or
deleting tasks.
b. Implementation:
i. useState: The useState hook manages the state of tasks, tags, and form inputs across
components.
 For example, it’s used in TaskForm to handle input fields and in TaskColumn to track the list
of tasks.
ii. useEffect: The useEffect hook is utilized for syncing data between Local Storage and the
state.
 For instance, useEffect is triggered to load tasks from Local Storage when the app initializes,
and it updates Local Storage when the tasks array changes.
c. Example Code Snippets:

i. const [tasks, setTasks] = useState([]); in the App component initializes the task list.

ii. useEffect(() => { localStorage.setItem('tasks', JSON.stringify(tasks)); }, [tasks]); ensures tasks

are saved to Local Storage whenever the task list changes.

d. Together, Local Storage and State Management create a seamless experience where users’
data persists reliably and updates instantly across components like TaskForm, TaskColumn,
and TaskCard.
e. This combination allows users to manage tasks without losing progress, even if they refresh or
revisit the app.
13
3.4 JavaScript ES6+ Features :

In developing this task-tracking application, several ES6+ JavaScript features were utilized to write
cleaner, more efficient, and organized code.

1. Arrow Functions
a. Usage in the Application: Arrow functions are used throughout the application for handling
user interactions, such as adding or deleting tasks.
b. For example, const handleDelete = (taskId) =>{ ... } in the task deletion logic. This keeps the
code concise and improves readability.
2. Destructuring
a. Usage in the Application:Destructuring is used in components to pull out specific properties
from objects.
b. For example, in TaskCard, destructuring is used to extract title, description, and other task
properties, so they can be directly accessed.
c. Example: const { title, description, status } = task; extracts these properties in one line for use
in TaskCard.
3. Template Literals
a. Usage in the Application: Template literals are used in various parts of the app, particularly
for displaying dynamic content.
b. For instance, if there is a need to show the task count in a message, template literals like `You
have ${tasks.length} tasks` help in creating this message quickly without complex
concatenation.
4. Array Methods (e.g., map, filter, forEach)
a. Usage in the Application: These methods are used extensively to manage tasks.
b. For instance, the filter method is used in the handleDelete function to remove tasks by
creating a new array without the deleted task.
c. The map method is used to render task components dynamically in TaskColumn.
d. Example:tasks.filter(task => task.id !== taskId); filters out the task to be deleted.
5. Spread and Rest Operators
a. Usage in the Application: The spread operator is commonly used to add a new task to the
existing list of tasks without mutating the original array.
b. For example, setTasks([...tasks, newTask]) creates a new array with the existing tasks plus the
new task, keeping the original array unaltered.

14
3.5 Development Tools :

To build and manage this task-tracking application effectively, several development tools were
utilized. Each tool played a specific role in improving productivity, debugging, and maintaining
code quality.

1. Visual Studio Code (VS Code)

a. Usage in the Application: VS Code was used as the main editor to write and organize the
code for components like TaskForm, TaskColumn, and TaskCard.
b. Extensions such as Prettier for code formatting and ESLint for linting were added to ensure
clean, consistent code throughout the project.
2. Node.js and npm
a. Usage in the Application: Node.js and npm were used to initialize the project, install
essential packages, and run the development server. npm scripts, like npm start and npm
build, helped in starting the app locally and preparing it for production.
3. React DevTools
a. Usage in the Application: React DevTools was used to debug components such as TaskCard
and TaskColumn, allowing inspection of props and state changes.
b. It was particularly useful in verifying that data flows correctly between components and in
troubleshooting why certain tasks might not display correctly.
4. Git and GitHub
a. Usage in the Application: Git was used to commit code changes regularly, and GitHub was
used to host the project repository.
b. By pushing updates to GitHub, it was easy to keep track of code versions and collaborate on
improvements.
c. Each main feature, such as task creation or the notification system, could be committed
separately, making development more organized and trackable.
3.6 Browser Developer Tools :

Browser Development Tools were essential in building, testing, and debugging this task-tracking
application. They provided powerful features to inspect the code, troubleshoot issues, and refine
the app’s visual and functional aspects.

1. Console
a. Usage in the Application: The Console was used to verify that functions like handleDelete
were working as expected by logging task data and checking for any unexpected behavior.

15
b. For example, logging messages were added to confirm that tasks were being successfully
added or deleted.
2. Elements Panel (Inspector)
a. Usage in the Application: The Elements panel was used to inspect and modify styles for
components like TaskCard and TaskForm, ensuring they were displayed correctly.
b. Temporary CSS adjustments were made to test colors, spacing, and layouts, which helped
refine the appearance of each component before finalizing the styles in the code.
3. Network Panel
a. Usage in the Application: Although this app is mostly local, the Network panel was helpful
when checking how Local Storage loads task data on startup.
 By observing any loading times or network-related messages, it was easy to confirm data was
accessed efficiently without unnecessary delays.
4. Sources Panel
a. Usage in the Application: The Sources panel was used to set breakpoints and examine how
the state of tasks changes during operations like adding or deleting tasks.
 It allowed step-by-step debugging, helping to ensure that each component, like TaskColumn
and TaskCard, was displaying data as expected.
5. Application Panel
a. Usage in the Application: The Application panel was used to inspect Local Storage and
verify that tasks were saved and loaded correctly.
 By viewing the stored task data, it was easy to confirm that each change made in the app (like
adding or deleting tasks) was accurately reflected in Local Storage, ensuring data persistence
across sessions.

Fig3.7 : Browser Developer Tools

16
 CHAPTER – 04
SYSTEM DESIGN
4.1 Architecture Overview :
My task-tracking application is built with a modular, component-based architecture, typical of React
applications. It relies on core components for task creation, management, and display, with Local
Storage integration for data persistence. Here’s an overview:

1. Frontend Structure
a. App Component: Acts as the root component, orchestrating the data flow and state between
child components.
b. TaskForm Component: Handles task input, allowing users to create new tasks.
c. TaskColumn Component: Manages the categorization and display of tasks, grouped by their
status.
d. TaskCard Component: Displays individual task details within each TaskColumn.
e. Tag Component: Represents task tags, providing visual context (with colors) for different
task types.
2. State Management and Local Storage
a. State Management: Manages real-time updates and user interactions through useState and
useEffect hooks.
b. Local Storage Integration: Stores task data persistently, ensuring tasks are retained across
browser sessions.
3. Data Flow
 Task data flows from TaskForm (creation) to TaskColumn and TaskCard (display and
deletion), with each action reflected in both the local state and Local Storage.

4.2 Component Design :

My task-tracking application uses a component-based design in React, making each feature

modular, reusable, and easy to manage. Here’s a summary of how it works:

1. State Management and Data Flow

 The main App component manages the state, with task data flowing through components as
props.
 For example, when a task is created in TaskForm, it updates the state in App, and
TaskColumn and TaskCard reflect the changes.

17
2. Reusability

 Components like TaskCard and Tag are designed for reuse, displaying tasks consistently and
assigning color-coded tags based on task categories.

3. Ease of Updates and Styling

 Centralized styling in components allows for quick adjustments.

 New features can also be added (e.g., editing tasks) by updating individual components
without affecting the overall structure.
4. Component Interaction Diagram :
a. App Component as the Root
 The App component serves as the central hub for managing state and coordinating interactions
between components.
 It initiates data flow to and from child components.
b. TaskForm Component for Task Creation
 This component enables users to create new tasks. User inputs are collected here, which are
then sent to App for state management and data persistence.
c. TaskColumn Component for Organizing Tasks
 The TaskColumn component categorizes and displays tasks based on their status (e.g., To-Do,
In Progress, Completed).
 It acts as a container, dynamically updating as tasks are created, updated, or deleted.
d. TaskCard Component for Individual Task Display
 Each task is represented as a TaskCard within TaskColumn.
 This component shows specific task details, such as title, description, and tags, allowing users
to view and interact with individual tasks.
e. Tag Component for Task Classification
 This component assigns color-coded tags to tasks, helping users visually differentiate task
types.
 It is embedded within TaskCard for easy identification.
f. Flow of Data and Actions
 The diagram illustrates how data flows from task creation in TaskForm to display in
TaskColumn and TaskCard.
 Updates (like deletion or tag addition) are managed through component interactions, ensuring
consistent state updates across the application.

18
 Fig.4.1 : Component Interaction Diagram

4.3 Data Flow And State Management :

In this task-tracking application, data flow and state management play key roles in keeping the
interface responsive and organized. Here’s how they work within the app:

1. State Management with App Component

a. Usage: When a user creates, updates, or deletes a task, the changes are managed in App’s
state.
b. This makes sure that all components relying on task data, like TaskColumn and TaskCard,
have access to the most current information.
2. Data Flow with Props
a. Data flows from App down to child components via props, ensuring each component receives
only the specific data it needs to function.
b. Example: When a task is created in TaskForm, the data is passed up to App, which then
distributes the task data to TaskColumn (for categorization) and TaskCard (for individual
display) through props. This one-way data flow keeps the app organized and predictable.
3. Updating State and Reflecting Changes
a. When a task is modified (e.g., marked as complete or deleted), App updates the state, which
triggers a re-render of relevant components.
b. This ensures changes are instantly visible in TaskColumn and TaskCard.
c. Example: If a task is deleted in TaskCard, App updates the state to remove it from the task
list, and TaskColumn immediately reflects this change.
4. Local Storage Integration

19
 a. To maintain tasks even after the app is closed, task data is stored in Local Storage, allowing
persistence across sessions.
b. Example: Each time a task is added or modified, the app updates Local Storage, so when
reopened, the app retrieves the data and re-populates the state.

4.4 Local Storage Integration :

Local Storage is used in this application to ensure that tasks persist even when the app is closed or
refreshed, providing a continuous user experience. Here’s how it’s implemented:

1. Purpose of Local Storage

 Local Storage is used to keep tasks saved on the user’s device, so data remains available
across sessions
2. Storing Task Data
 Whenever a new task is created, modified, or deleted, the app saves the updated task list to
Local Storage.
3. Retrieving Data on Load
 When the app loads, it checks Local Storage for any saved tasks and initializes the app’s state
with this data if it exists.
 Example: In App, a function runs on load to retrieve tasks from Local Storage, allowing the
app to populate TaskColumn with saved tasks.
4. Updating Local Storage Automatically
 The application automatically updates Local Storage whenever there is a change in the state,
so it always mirrors the current state.

Fig.4.2 :User Interaction Flow in Task-Tracking Application with Local Storage Integration

4.5 Styling and User Interface Design :

20
1. Consistent Component Styling

a. Typography Choices
 Selected fonts and sizes maintain readability and a professional look across all components,
helping users easily read and interact with the app.
b. Spacing and Alignment
 Uniform spacing around elements in each component helps prevent clutter and makes the
interface look clean and well-organized.

c. Button and Card Styles

 Each button (e.g., add, edit, delete) and task card is styled similarly throughout the app,
promoting a sense of continuity and improving user understanding of actions.

d. Shadow and Border Use

 Light shadows and borders on TaskCard components add depth, making tasks stand out
without overwhelming the user visually.

2. Use of Color for Task Categories

a. Color Psychology
 Thoughtful color choices are made for different tags (e.g., blue for “In Progress,” green for
“Completed”) to intuitively indicate status.
b. Accessibility in Color Choices
 Colors are chosen with contrast in mind to ensure readability and accessibility for users with
visual impairments, enhancing inclusivity.

3. Responsive Layout

a. Grid System for Layout Flexibility

 A responsive grid layout is used in TaskColumn and other sections to maintain a structured
display across screen sizes.
b. Flexbox for Adaptive Display
 Flexbox is applied to make sure that components resize or reflow based on screen width,
ensuring all information remains accessible.

5. Hover Effects and Button Design

a. Hover Animation for Button Interactivity

 Buttons use subtle animations, such as scaling or color changes, on hover to improve visual
feedback and guide user actions.
b. Icon Integration in Buttons
21
 Icons are added to buttons (like delete or add) to visually clarify each action and improve
understanding at a glance.

c. Clickable Feedback

 Buttons also change appearance slightly when clicked, confirming interactions and giving the
app a responsive feel.

d. Accessible Button Colors and Sizes

 Button colors and sizes are chosen with accessibility in mind, ensuring ease of use across a
range of devices and user needs.

CHAPTER – 05

22
 IMPLEMENTATION OF TASK – TRACKING
APPLICATION
5.1 Application Overview :

This task-tracking application is designed to help users effectively manage and organize tasks
through a simple, intuitive interface.

Each feature is crafted to ensure ease of use, quick task tracking, and reliable data storage for user
convenience. Here’s a breakdown of the application's core features and design principles:

1. Task Creation and Management

 Users can create new tasks by entering relevant details, such as task name, description, and
category.
 The application allows users to set tags, status, and other identifiers, enabling quick task
sorting and retrieval.
2. Real-Time State Management
 The app uses efficient state management to handle task data dynamically.
 Any action a user performs, such as adding, editing, or deleting a task, is immediately
reflected in the UI.
 This real-time management ensures a seamless user experience, where updates are instantly
visible, making task tracking fluid and intuitive.
3. Local Storage Integration
 For data persistence, the application leverages Local Storage.
 This allows tasks to remain saved even after the application is closed, ensuring that users can
return to their saved tasks without needing to re-enter data.
 This feature enhances usability and ensures that task data is available across sessions without
requiring a backend server.
4. User Interface and Styling
 The app’s interface is designed with a focus on simplicity and ease of use. Key UI
components include the TaskForm for task entry, TaskColumn for categorized task display,
and TaskCard for individual task details.
 A clean, organized layout and color-coded tags help users quickly identify task status and
priorities.
5. Accessibility and Responsiveness

23
  Accessibility features, such as high-contrast colors for tags and intuitive button placement,
help users interact effortlessly with the app, regardless of their device.
 The app is responsive and designed to work on both desktop and mobile, giving users the
flexibility to manage tasks wherever they are.
6. Error Handling and User Feedback
 The application includes basic error handling to notify users of any issues (e.g., missing task
information) before submission.
 User feedback elements, such as hover effects and color changes on buttons, improve
interactivity and make it clear when actions are being performed.

5.2 Setting up the development environment :

For this task-tracking application, a carefully set up development environment was essential to
streamline coding, testing, and deployment.

Here’s an overview of the key tools and configurations used:

1. Code Editor (VS Code)

 I used Visual Studio Code (VS Code) as the main code editor. VS Code’s rich extensions,
such as syntax highlighting, IntelliSense, and code snippets, made coding faster and easier.
 Extensions specific to React and JavaScript also provided auto-completion, helping me write
cleaner, error-free code for components like TaskForm and TaskCard.
 VS Code was selected as the code editor for this project because of its robust features and
developer-friendly environment.
 It provides essential tools and extensions that enhanced my productivity and simplified
complex tasks during development.

Fig5.1. : Visual Studio Code for this project

2. Node.js and npm

24
  Node.js and npm were installed to manage dependencies, run development scripts, and
compile the application.
 I used npminit to set up the project and npm install to install necessary packages like React.
 The package manager was crucial for installing libraries and tools that streamlined building
and running the app, such as React and other supporting dependencies.

Fig.5.2 : Node js version 20 has been used in this project

3. React Development Server

 To work with React, I initialized the project with create-react-app, which set up a React
development server.
 Running npm start launched a local server, providing live reload for testing changes
immediately.
 This helped speed up development, allowing me to instantly view updates in the browser as I
made changes to components like TaskColumn and App.
4. Version Control (Git and GitHub)
 Git was used for version control, allowing me to track changes and revert if needed.
 Regular commits were made for each significant change, like adding features or fixing bugs.
 GitHub was used for remote backup, enabling me to safely store and share my code and
collaborate if necessary.
 This also allowed me to experiment with new features without affecting the main codebase.
5. Browser Development Tools
 Browser DevTools (primarily Chrome DevTools) were used extensively for debugging,
testing, and inspecting UI elements.
 These tools allowed me to view component structures, monitor state changes, and identify
layout issues in the TaskForm and TaskColumn.
 The Console and Network tabs in DevTools helped in catching errors and verifying data flow
across components, especially useful when working with Local Storage.

5.3 Component Architecture :

25
The component architecture of the task-tracking application is built around several functional
components that manage different aspects of the application.

The application is divided into smaller, reusable components, each handling a specific aspect of the
task management process.

1. App.jsx (Root Component):

 Purpose: This is the entry point of the application, where the central task state is managed.
 It serves as the parent component that holds the list of tasks and controls data flow throughout
the app.
 Implementation: In this component, a state variable is used to store tasks, and functions are
passed down as props to handle task operations such as adding, updating, and deleting tasks.
 It acts as the communication bridge between child components.

Fig.5.3 : Implementation of App.jsx

2. Main Component:
 Purpose: It serves as a container that lays out the overall structure of the application. It
includes the TaskForm for creating new tasks and the TaskColumn for displaying tasks.
 Implementation: The Main component receives the task data from App.jsx and passes it
down to TaskColumn for displaying.
 It ensures the proper layout by managing how tasks are organized and displayed within
columns based on their status.

26
 Fig.5.4 : Implementation of main.jsx

3. TaskForm Component:
 Purpose: This component provides the user interface for adding new tasks.
 Implementation: It includes input fields for the task’s title, description, and other details.

Fig.5.5 : Implementation of TaskForm.jsx

4. TaskColumn Component:

27
 Purpose: The TaskColumn groups tasks by their status (e.g., Pending, In Progress,
Completed) and handles filtering.
 Implementation: The TaskColumn component receives the task data from App.jsx and uses
filtering logic to display tasks based on their current status.

Fig.5.6 : Implementation of TaskColumn.jsx

5. TaskCard Component:
 Purpose: The TaskCard displays individual task details and allows the user to
interact with the task (e.g., delete or change its status).
 Implementation: Each TaskCard receives a task as a prop and displays its
information.

Fig.5.7 : Implementation of TaskCard.jsx

28
5.4 State Management And Data Flow :

In the Implementation Phase, State Management and Data Flow are fundamental to ensuring the
smooth operation and interactivity of the task-tracking application.

Proper management of the application’s state and a clear, predictable data flow are essential for
maintaining performance, scalability, and the overall user experience.

1.State Management

State management refers to how data (tasks in this case) is stored, updated, and shared between
various components in the application.

a. Centralized State in App.jsx:

 The central state holds an array of tasks, where each task contains details such as the task
name, description, due date, and its current status (e.g., Pending, In Progress, Completed).
 The state is initialized in App.jsx using React’suseState hook.
 The task data is passed to child components like TaskColumn and TaskForm via props.
 This ensures that all child components have access to the most up-to-date task data.

b. State Updates:
 State updates in the application occur when the user interacts with the UI (e.g., adding a new
task, deleting a task, or updating a task's status).
 App.jsx contains functions like addTask, deleteTask, and updateTask that modify the task
state.
 These functions are passed down to child components as props and are triggered by events
(e.g., form submission, button click).
 After each update, React automatically re-renders the components that rely on the modified
state, ensuring the UI reflects the most recent changes.
c. Local State in Child Components:
 Some components may manage their own local state to handle temporary values.
 For example, TaskForm may store the form inputs in local state to track user input before
submitting.
2. Data Flow

Data flow in the application follows a unidirectional (one-way) pattern, where the flow of data
moves from parent components to child components and updates propagate through function
calls.

a. Top-Down Data Flow:

29
  App.jsx, as the root component, holds the main state and passes it down to child components
via props. .
 For example, the list of tasks stored in App.jsx is passed down to TaskColumn and
TaskForm so they can display and update the task data.
b. Task Creation (Flow from TaskForm to App.jsx):
 When a user submits a new task via the TaskForm, the form calls a function (e.g., addTask)
passed from App.jsx to add the new task to the state.
 App.jsx updates the main state, and the updated task list is passed down to TaskColumn for
rendering.
c. Task Update or Deletion (Flow from TaskCard to App.jsx):
 When a task is updated (e.g., its status changes) or deleted, the corresponding action is
triggered in the TaskCard component.
 TaskCard calls a function (e.g., updateTask or deleteTask) passed from TaskColumn, which
then updates the main state in App.jsx.
 App.jsx updates the state and re-renders the necessary components, such as TaskColumn and
TaskCard, to reflect the changes.
d. Task Filtering and Display (Flow from App.jsx to TaskColumn):
 App.jsx passes the entire list of tasks to TaskColumn.
 TaskColumn filters the tasks based on their status (e.g., Pending, In Progress, Completed)
and then passes each filtered task down to TaskCard for rendering.
 TaskCard displays each task and can trigger updates (such as status changes or deletions),
which flow back to App.jsx to update the state.

Data Flow Example:

1. Task Creation:
 User enters task details in TaskForm and clicks "Add Task."
 TaskForm triggers the addTask function from App.jsx, which updates the main task state.
 App.jsx passes the updated task list down to TaskColumn for display.
2. Task Deletion:
 User clicks "Delete" on a TaskCard.
 TaskCard calls the deleteTask function from TaskColumn, which updates the state in App.jsx.
 App.jsx updates the task list and re-renders the UI with the updated data.
3. Task Status Update:

 User changes the status of a task in TaskCard (e.g., from Pending to In Progress).

30
 TaskCard triggers the updateTask function, which modifies the task's status in App.jsx.

 The updated task list is passed back down to TaskColumn for re-rendering.

5.5 Event Handling and User Interaction :

In the Implementation Phase, Event Handling and User Interaction are essential aspects of the
task-tracking application, as they directly influence how users interact with the system and trigger
various actions such as adding, deleting, or updating tasks.

Event Handling in the Task-Tracking Application

Event handling is crucial for enabling interaction within the app, allowing users to trigger specific
actions like submitting forms, clicking buttons, and changing task statuses.

In React, event handling is typically done by defining event handlers that are passed to the relevant
components as props.

1. Handling Form Submission (Task Creation)

 Event: When the user submits the task creation form, the onSubmit event is triggered.

 Implementation:

a. The TaskForm component listens for the submit event using the onSubmit attribute on the
form element.

b. When the form is submitted, the event handler function (e.g., handleSubmit) is called.

c. handleSubmit collects the user input from the form, prevents the default form submission
behavior (using event.preventDefault()), and passes the task data back to App.jsx via a
function prop (e.g., addTask).

d. User Interaction: The user enters task details (like name, description, and due date) and
clicks the "Add Task" button. This triggers the form submission event.

2. Handling Task Deletion

 Event: When the user clicks the "Delete" button on a TaskCard, the onClick event is
triggered.

 Implementation:

a. Each TaskCard has a delete button with an associated event handler, typically an onClick
function.

b. When the delete button is clicked, the event handler (e.g., handleDelete) is called.

31
 c. The handleDelete function updates the state in App.jsx by removing the task from the task
list.

d. The updated task list is then passed down to TaskColumn to re-render the tasks without the
deleted one.

 User Interaction: The user clicks on the "Delete" button next to a task. This action triggers
the deletion event, removing the task from the application.

3. Handling Task Status Update (Toggle Status)

 Event: When the user clicks to change the status of a task (e.g., from "Pending" to "In
Progress"), the onClick or onChange event is triggered.

 Implementation:

a. Each TaskCard displays a button or toggle for changing the task's status.

b. When the user interacts with this button (e.g., clicking a "Mark as Done" button), the onClick
event triggers an event handler (e.g., handleStatusChange).

c. The event handler updates the task's status in the main state in App.jsx.

d. The updated task list, with the new status, is passed down to TaskColumn, which re-renders
the task list with the updated task status.

 User Interaction: The user clicks a button to change the task's status, which triggers an event
that updates the status and re-renders the tasks.

4. Handling Task Editing

 Event: When the user clicks on a "Edit" button to modify the task details, the onClick event is
triggered.

 Implementation:

a. TaskCard has an edit button that triggers the handleEdit function when clicked.

b. The handleEdit function typically opens an input form pre-filled with the task’s existing
details, allowing the user to modify them.

c. Once the user submits the form with updated information, the event handler updates the task
in the state (via a function passed down from App.jsx).

 User Interaction: The user clicks the "Edit" button on a task, which triggers the edit event.
After editing the details, the task is updated in the application.

User Interaction Flow

32
 1. Adding a New Task:

a. The user interacts with the TaskForm by entering task details (e.g., title, description,
deadline).

b. After filling out the form, the user clicks the "Add Task" button.

c. This triggers the form submission event, and the new task data is passed to App.jsx to update
the state and re-render the application.

2. Deleting a Task:

a. The user clicks on the "Delete" button of a task in TaskCard.

b. This triggers the deletion event, calling the event handler (e.g., handleDelete), which removes
the task from the main task list in App.jsx.

c. The updated list is passed down to TaskColumn for re-rendering.

3. Updating a Task's Status:

a. The user clicks a button (e.g., "Mark as Done") to update the status of a task.

b. This triggers the event handler that updates the task’s status in App.jsx.

c. The updated status is passed down to TaskColumn and TaskCard, and the UI reflects the
new status.

4. Editing a Task:

a. The user clicks the "Edit" button on a task in TaskCard.

b. The edit form appears, allowing the user to change the task details.

c. After the user updates the task, the changes are passed to App.jsx to update the task state and
re-render the UI.

5.6 Input Validation And User Feedback :

In the Implementation Phase, Input Validation and User Feedback are crucial to ensure that the
task-tracking application behaves predictably, maintains data integrity, and provides a smooth and
engaging user experience.

Input Validation

Input validation is the process of verifying that user inputs meet the required criteria before being
processed.

33
In the task-tracking app, input validation is used to ensure that tasks are created, updated, or modified
correctly. The validation is primarily implemented in the TaskForm component, where users enter
task details.

1. Task Creation Validation

 Validation Criteria:

o Task name: Cannot be empty or contain special characters.

o Description: Optional, but if provided, should not exceed a certain character limit (e.g., 500
characters).

o Due date: Must be a valid date and cannot be a past date.

 Implementation:

o When the user submits the task creation form, an event handler (e.g., handleSubmit) is triggered.

o Inside this function, checks are performed to ensure that the inputs meet the validation criteria.

o If validation fails, an error message is displayed, and the task is not added to the state.

 Example:

Fig. 5.8 : Example Code Snippet of Task Creation Validation

34
2. Task Edit Validation

 Validation Criteria:

o Ensure that edited task data, such as the task name and description, meet the same criteria as
when creating a new task.

 Implementation:

o When a user updates a task, the new values are validated before saving the changes.

o If the data is invalid, an error message is displayed, preventing the task from being updated until
valid data is provided.

3. Displaying Error Messages

 If validation fails, error messages should be displayed to inform the user about what went wrong
and guide them in correcting the issue.

 Implementation: Error messages are conditionally rendered based on the validation outcome.
For example:

Fig. 5.9: Example Code Snippet of Displaying Error Message

6. Notification System

 A notification system can be used to show temporary success or error messages. These
notifications should automatically disappear after a set duration to avoid cluttering the
interface.

 Implementation: Implement notifications that appear at the top of the screen when an action
is successfully completed or when an error occurs.

For Example :

Fig. 5.10: Example Code Snippet of Notification System

35
 7. Visual Cues for Invalid Inputs

 When an invalid input is detected (e.g., empty fields or incorrect formats), visually highlight
the invalid fields by changing their border color or displaying an error icon.

 Implementation: Use CSS to apply a red border or error icon next to invalid inputs to provide
immediate feedback.

5.7 Design and UI / UX Considerations :

In the Implementation Phase, Design and UI/UX Considerations play a pivotal role in ensuring
that the task-tracking application is not only functional but also easy to use and visually appealing.

1. User-Centered Design

 Goal: The application should be designed with the user’s needs and behaviors in mind.

 By understanding the target audience (e.g., professionals, students, or general users managing
personal tasks), the UI can be tailored to provide the most relevant features in an intuitive manner.

 Implementation:

o Conduct user research to gather insights into the needs and preferences of your target audience.

o Develop user personas to represent typical users and their goals, behaviors, and challenges when
managing tasks.

o Create wireframes and mockups based on these personas to ensure the application’s design
addresses the users' needs.

2. Simple and Intuitive Layout

 Goal: The interface should be easy to navigate, with clear and simple layouts that do not
overwhelm users with too much information at once.

 Implementation:

o Use a clean layout that prioritizes essential actions (e.g., adding, editing, and deleting tasks)
and presents them in a logical order.

o Provide clear call-to-action (CTA) buttons for tasks like "Add Task," "Edit," and "Delete,"
which should be prominently visible and easy to access.

o Ensure that the most frequently used features are easily accessible, while less critical features
are tucked away in menus or additional tabs.

36
3. Consistency

 Goal: Consistent design across the application ensures that users are not confused by
unexpected changes in appearance or functionality.

 Implementation:

o Use consistent colors, fonts, and UI elements (buttons, forms, icons) throughout the
application.

o For example, the primary action button (e.g., "Add Task") should always be the same color
across screens.

o Ensure that task lists, task status indicators, and action buttons are consistently displayed
across different views (e.g., TaskColumn, TaskCard, etc.).

o Follow a design system or UI framework (e.g., Material UI or Bootstrap) to maintain

consistency in UI components and layout.

4. Visual Hierarchy

 Goal: The UI should clearly guide the user’s attention to the most important elements or
actions in the application.

 Implementation:

o Use typography (font size, weight, and color) to differentiate between headings, subheadings,
and task descriptions.

o This allows users to quickly scan for important information.

o Use contrast to highlight critical actions, such as "Add Task" buttons or task status indicators,
making them stand out from less important elements.

o Create a visual flow that guides the user through their task management process.

o For instance, the form to add a task should be at the top of the page, followed by the task list,
and then options for task editing or deletion.

5. Responsive Design

 Goal: The application should be fully functional and user-friendly across a range of devices,
from desktops to tablets and smartphones.

 Implementation:

37
 o Use media queries to adjust the layout for different screen sizes, ensuring that the
application’s interface looks good and remains usable on both large and small screens.

o Prioritize mobile-first design, ensuring that key actions (e.g., adding tasks, task editing) are
easily accessible on smaller screens.

o For example, a floating action button for adding tasks can be added on mobile to enhance
usability.

o Optimize task cards and form fields for mobile use, ensuring that users can easily interact with
elements like checkboxes, buttons, and input fields without unnecessary scrolling or zooming.

6. Task Organization and Visualization

 Goal: The app should help users quickly understand and organize their tasks.

 Implementation:

o Task Columns: Use columns to categorize tasks by status (e.g., “To Do,” “In Progress,” and
“Completed”).

o This allows users to quickly track task progress and manage their work effectively.

o Tagging and Color Coding: Implement task tags with color coding to help users categorize
tasks by priority, type, or project.

o These visual cues enhance task identification at a glance.

o Task Cards: Present each task as a TaskCard with key information (e.g., task name, due
date, status, and tags).

o Task cards should be interactive, allowing users to edit or delete tasks with a click or tap.

o Drag-and-Drop: Allow users to drag and drop tasks between columns to change their status.

o This provides a highly interactive and intuitive way to manage tasks.

7. Notifications

 Goal: Provide clear feedback to users after they perform any action, ensuring they understand
whether it was successful or if something went wrong.

 Implementation:

o Use toast notifications or modal popups to alert users about the success or failure of their
actions, such as "Task Added Successfully" or "Error: Task Name Cannot Be Empty."

8. Minimalism and Clarity

38
 Goal: Avoid clutter and ensure that the interface remains clear and focused on the user’s task
management goals.

 Implementation:

o Keep the user interface clean by avoiding unnecessary elements or distractions. For example,
remove any superfluous features or information that does not directly contribute to task
management.

o Make sure buttons and icons are clearly labeled (e.g., “Add Task,” “Delete Task”) to
eliminate any ambiguity.

o Use tooltips or brief instructions to help users understand the functionality of certain features
without overloading them with information.

39
 CHAPTER – 06

TESTING AND DEBUGGING

6.1 Manual Testing :

In the task-tracking application, manual testing was used to ensure that all features work as
intended from the user’s perspective.

It helped identify issues in the user interface and interactions that automated tests might not catch.

1. Task Creation Verification (TaskForm)

 Objective: Ensure that users can add tasks correctly and that the form behaves as expected.

 Application:

o TaskForm Component: Tested the task creation form by entering both valid and invalid task
names.

o Validated that the form shows appropriate error messages when the task name is empty or too
long.

o Validation Logic: Confirmed that the "Add Task" button is only enabled when the task name
meets the required conditions.

2. Task Deletion Functionality (TaskCard)

 Objective: Confirm that tasks can be deleted smoothly and without errors.

 Application:

o TaskCard Component: Clicked the "Delete" button on various tasks to ensure the tasks were
removed from the task list and no errors were triggered.

o State Consistency: Checked that the deleted task was removed both visually and from the
internal state without any glitches.

3. Task Editing and Status Change Testing

 Objective: Verify that users can edit tasks and update their statuses (e.g., move between "To
Do", "In Progress", and "Completed").

 Application:

40
 o TaskCard Component: Manually edited task details and changed task statuses by interacting
with the available buttons.

o Real-time Updates: Ensured that any changes to task details or status were reflected
immediately in the user interface without requiring a page reload.

4. Workflow and Interaction Flow Testing

 Objective: Ensure a smooth and intuitive user experience throughout the task management
process.

 Application:

o Task Form to Task List: Tested the process of adding a task and observing its instant
appearance in the task list. Verified that editing and deleting tasks was seamless and intuitive.

o Task Transitions: Checked the fluidity of moving tasks between different columns, ensuring
that the user experience remained smooth throughout.

5. Responsiveness and Layout Testing

 Objective: Verify that the app functions correctly across different screen sizes, ensuring
accessibility and usability.

 Application:

o General Layout: Tested the layout across various devices, from mobile phones to desktops,
to ensure task cards and columns remained organized and readable on different screen sizes.

o Usability on Small Screens: Checked the size of clickable elements (like buttons) and made
sure they were appropriately sized for easy navigation on smaller devices.

6. Edge Case and Boundary Testing

 Objective: Ensure the application handles unexpected inputs or actions without breaking or
crashing.

 Application:

o Invalid Inputs: Tested scenarios where users tried to add tasks with missing or invalid data,
like blank task names or special characters, and verified that the app handled such cases
gracefully by showing appropriate error messages.

o Task Deletion Repeated Testing: Repeatedly deleted tasks and ensured that the UI and
internal state stayed synchronized and updated correctly after each deletion.

41
6.2 Debugging :

Debugging played a vital role in ensuring the proper functionality of the task-tracking application.
Throughout the development process, I faced several challenges and used debugging techniques to
resolve them and improve the application’s performance.

1. Task Deletion Issue

 Problem: The handleDelete function was not working as expected. The task was not being
removed from the task list even after clicking the delete button.

 Debugging Approach:

o I checked the state update in the handleDelete function to ensure the task array was properly
updated after the task was deleted.

o I used console.log to print out the task list before and after deletion to track if the array was
being modified correctly.

 Solution:

o I identified that the filtering logic was incorrect, so I corrected it to properly filter out the
deleted task and update the state.

2. Task Status Update

 Problem: Tasks were not updating their status when moved between columns (e.g., "To Do"
to "In Progress").

 Debugging Approach:

o I used console.log to verify that the status was being changed in the state when a task was
clicked.

o I also inspected the component’s re-rendering behavior to see if the updated state was being
reflected in the UI.

 Solution:

o After reviewing the code, I found that the state update was not triggering a re-render in the
component.
o I fixed the state update by ensuring the correct component re-rendered with the updated task
status.

42
3. Task Form Validation

 Problem: The task form was allowing users to submit empty tasks or tasks with invalid data.

 Debugging Approach:

o I tested the form submission with various inputs and used console.log to check if the
validation function was being triggered.

o I also verified that the “Add Task” button was enabled only when the input was valid.

 Solution:

o I discovered that the validation logic was incomplete.

o I updated it to ensure that tasks couldn’t be added without a valid task name and that proper
error messages were displayed.

4. UI Layout Issue on Mobile

 Problem: The layout of the task list was breaking on smaller screen sizes, causing task cards
to overlap.

 Debugging Approach:

o I used browser developer tools to simulate different screen sizes and checked the CSS
properties applied to the task cards.

o I inspected the layout using console.log to check if any CSS properties were not being applied
correctly on smaller screens.

 Solution:

o I identified a missing media query in the CSS for small screen sizes and added the necessary
styles to ensure the layout remained intact.

5. Slow Rendering of Large Task Lists

 Problem: The application was running slowly when displaying a large number of tasks,
causing a delay in rendering.

 Debugging Approach:

o I used performance profiling tools in the browser to analyze the rendering performance.

43
 o I checked the React components to see if there were unnecessary re-renders or excessive
computation in the render cycle.

6.3 No Automated Testing :

In the task-tracking application, automated testing was not implemented due to the focus on rapid
development and the scope of the project.

While automated tests are beneficial for larger-scale projects, the decision to proceed without them
was made for the following reasons:

1. Scope and Size of the Project

 Reason: The task-tracking application is a relatively small project, and it was developed with
fewer complex features. Since the application did not include extensive integrations or third-party
services, manual testing was sufficient for ensuring core functionality.

 Impact: With manual testing, I was able to quickly test core features like task creation, task
deletion, and status updates without the need for complex automated test setups.

2. Development Speed and Time Constraints

 Reason: Due to time limitations, I focused on writing functional code and testing manually.
Automated tests often require additional time for writing, setting up test cases, and maintaining
them throughout the development process.

 Impact: I prioritized completing the core features and conducting manual tests to make sure
everything worked as expected, allowing me to stay within the project deadlines.

3. Learning and Familiarity

 Reason: As this project is part of my ongoing learning in web development, I did not have much
experience with setting up automated testing frameworks for React applications at the time.

 Impact: While I recognized the value of automated testing for future projects, I focused on
improving my understanding of core development tasks, like task management and UI
responsiveness.

4. Manual Testing Sufficed for the Current Features

 Reason: The features of the application (task creation, deletion, status updates) are simple and do
not involve complex data flows or dependencies. Manual testing was effective in ensuring these
features worked correctly.

44
 Impact: I could efficiently validate that tasks were added, deleted, and updated as intended, using
basic manual tests without the need for automation.

5. Testing on Real Devices and Browsers

 Reason: The testing required for this project, such as ensuring the app works across different
screen sizes and devices, was more suited for manual testing.

 Impact: I tested the responsiveness and user interactions directly on real devices and different
browsers, which would have been time-consuming to replicate through automated testing.

45
 CONCLUSION AND FUTURE WORK
7.1 Conclusion :

 The task-tracking application has been successfully developed and implemented, addressing
the need for an efficient and intuitive way to manage tasks.
 Throughout the development process, I focused on creating a simple, user-friendly interface
that allows users to add, edit, update, and delete tasks, as well as manage their status (To Do,
In Progress, and Completed).
 Key features of the app, including task creation, deletion, and task status updates, were
thoroughly tested to ensure smooth functionality.
 Although the application does not include advanced features like automated testing or
complex back-end integrations, it meets the core requirements of a task management system.
 The application’s user interface was designed with responsiveness in mind, ensuring it works
seamlessly across different screen sizes, from mobile phones to desktop devices.
 The app also provides clear feedback to users, improving the overall experience.
 In conclusion, the project has met its objectives and was a great learning opportunity for me to
implement core concepts in React, state management, and UI/UX design.

7.2 Future Work :

While the task-tracking app is functional in its current state, there are several areas where the app can
be enhanced in the future:

1. Automated Testing: Although manual testing was sufficient for the current version,
implementing automated tests for critical functions such as task creation, deletion, and status
updates would improve the efficiency and reliability of future development and maintenance.

2. User Authentication and Authorization: In the future, user authentication can be added,
allowing users to register and log in to their accounts.

This would enable them to track tasks across different devices and maintain personalized task
lists.

46
 3. Task Reminders and Notifications: Adding a feature to set reminders for tasks would
improve the usability of the app. Users could receive notifications for upcoming deadlines or
pending tasks, helping them stay organized.

4. Data Persistence: Currently, the app does not save tasks after the page is refreshed. A
backend system (e.g., Node.js with MongoDB) can be integrated to store tasks persistently,
ensuring that users' tasks are saved and retrieved from a database.

5. Advanced Features: Future updates could include features such as task prioritization, tags for
categorizing tasks, or even team collaboration options where multiple users can share and
work on tasks together.

6. Performance Optimization: As the number of tasks grows, optimizing the app’s

performance (for example, by implementing lazy loading for tasks or optimizing the re-
rendering process) will help maintain a smooth user experience.

By incorporating these future improvements, the task-tracking app can evolve into a more robust and
scalable tool for personal and team task management.

47
 APPLICATION WALKTHROUGH
 The following screenshots showcase the final version of the task-tracking application,
highlighting its core features and user interface design.
 Each screen illustrates the essential functions available to users, including task creation,
editing, deletion, and status updates.
 These visuals offer an overview of the application’s layout, functionality, and responsiveness
across different devices, providing a complete look at the app in action.

Fig.8.1 : Task Tracking Web Application without Due date Feature

Fig.8.2 : Task Tracking Application With Due date Feature

48
 REFERENCES
1. Wieruch, R. (2021). The road to React: Your journey to master plain yet pragmatic React.js. Self-
published.
2. Mozilla Developer Network. (2024). React documentation. Retrieved from
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises
3. Meta Platforms, Inc. (2024). React documentation. Retrieved from https://react.dev/
4. Figma, Inc. (2023). A guide to building intuitive user interfaces. Retrieved from
https://www.figma.com/blog
5. Stack Overflow. (n.d.). Technical Q&A and solutions for React development. Retrieved from
https://stackoverflow.com/
6. Cohn, M. (2009). Succeeding with agile: Software development using Scrum. Addison-Wesley
Professional.
7. GitHub. (2024). GitHub guides on project management and version control. Retrieved from
https://docs.github.com/
8. World Wide Web Consortium (W3C). (2023). Web Content Accessibility Guidelines (WCAG)
overview. Retrieved from https://www.w3.org/WAI/standards-guidelines/wcag/

49
50