1

​ Spring 2025 - CMPT 276 D200​​

Introduction to Software Engineering

TABMARK.COM
Group Members
Saad Usmani
Fujai Shamshir
Tri Ho

Github Repository Link:

https://github.com/CMPT-276-SPRING-2025/final-project-13-bays
[video-demo-link]
https://tabmark-d081a.web.app/
 2

Analysis of User Needs and Problems

Analysis of Project Success in Meeting User Needs

The TabMark application was designed to solve a clear user problem: helping users manage
their open browser windows and deadlines through an intelligent, streamlined bookmarking and
task-tracking system. Through OAuth login, project management views, and SendGrid-based
reminders, the application aimed to create a seamless productivity tool.

User Testing Summary

To evaluate how well TabMark met user needs, we conducted a peer testing session with 4
classmates. Each tester was given 5 key tasks to complete, and their responses were collected
via a structured feedback form. Tasks included signing up, resetting a password, creating and
managing projects, and evaluating the app’s usability and design.

Quantitative Feedback
Task Avg. Rating (out of 5)

Task 1: Signup/Login 5.00

Task 2: Password Reset 5.00

Task 3: Create Project 5.00

Task 4: Archive/Complete Project 5.00

Task 5: Delete Project 5.00

Overall Usability 5.00

Visual Design/Aesthetic 4.75

The data clearly shows that users found all major features highly functional and smooth. The
UI/UX design was also positively received, with an average aesthetic rating of 4.75.
 3

Qualitative Feedback
●​ Bugs Encountered: None reported​

●​ Positive Comments:​

○​ “I like it, it’s cool!”​

●​ Improvement Suggestion:​

○​ “The pages look a bit bland — could use more visual appeal.”​

Adjustments Made Based on Feedback

In response to this feedback, we significantly improved the visual styling and interactivity of
the application. One of the key enhancements was the addition of animated icons
representing task difficulty:

●​ Easy tasks now show a running character, symbolizing light effort.​

●​ Medium tasks feature a climbing character, implying moderate challenge.​

●​ Hard tasks are represented by a drowning character animation, communicating high

difficulty and urgency.​

These animations bring the dashboard to life, make the difficulty levels instantly recognizable,
and enhance the overall user experience. The updated color scheme, category tags, and button
animations further addressed the visual blandness noted in the feedback.

Conclusion
The feedback gathered from real users indicates that TabMark effectively met its core goal of
providing a smooth, intuitive platform for managing projects and deadlines. Every tested task —
from signing up to managing projects — received perfect functionality scores.

Users highlighted the need for a more visually engaging interface, which we addressed by
introducing animations and improving UI elements. These changes not only improved the
aesthetic appeal but also made the app more expressive and user-friendly — especially through
animated difficulty indicators.
 4

SDLC Model Analysis

For our project, we adopted the Scrum framework, which provided the flexibility and structure
needed to manage our work effectively in a small team setting. Initially, our team consisted of four
members—three of us living near each other and one remotely located. We began with weekly
sprint planning meetings to define goals and review progress.

Midway through the project, one team member had to withdraw due to personal reasons. This
change impacted our sprint planning and required us to adjust our team roles and workload
distribution. However, since the remaining three members lived close by, we shifted to more
frequent in-person stand-ups, often meeting daily or every other day. These meetings allowed for
quicker communication, faster sprint adjustments, and more efficient problem-solving.

We used a GitHub Kanban board to manage our product backlog and track sprint tasks. This helped
us maintain a clear overview of our progress and priorities. As the project progressed, we adapted
by shortening our sprints and focusing more on delivering incremental, working features with each
iteration.

The Scrum model encouraged continuous feedback and flexibility, which was essential given the
change in team size. One key takeaway was the value of consistent communication and having
clear sprint goals. For future projects, we would improve by setting contingency plans for
unexpected team changes and integrating automated sprint retrospectives to better reflect and
adapt after each cycle.
 5

Feature Implementation Details

Firebase Authentication (API 1):

●​ Feature 1: Allows for native account creation, as well as,
authentication with third-party providers
●​ Feature 2: Allows for verification of email and user’s ability
to reset password

Sendgrid Emails (API 2):

●​ Feature 1: Sends daily email to remind user of any upcoming
urgent projects
●​ Feature 2: Sends weekly email to congrat user on any
completed projects of the week

Chrome Tabs (API 3):

●​ Feature 1: Query current browser window for all active tabs
and save their URLs+Titles as tab objects in our database
●​ Feature 2: Open the tabs posted by our database for the
projects
 6

CI/CD Pipeline Overview

1.​ Build & Test Workflow (build.yml):
●​ Trigger: Runs on push and pull_request events targeting the main branch.
●​ Steps:
-​ Check out the code.
-​ Sets up Node.js with versions 18.x, 20.x, and 22.x using a matrix strategy.
-​ Installs dependencies for the root, backend, and frontend directories.
-​ Builds the project (npm run build) and runs tests (npm test).

2.​Deployment Workflow (deploy.yml):

●​ Trigger: Executes after the successful completion of the Build & Test workflow.
●​ Steps:
-​ Installs dependencies for all project components.
-​ Builds the project and deploys it to Firebase Hosting using the
firebase-tools CLI.

3.​ Email Notification Workflows:

●​ Daily Email Job (daily-email.yml):
-​ Trigger: Scheduled to run every Monday at 8:00 AM UTC.
-​ Executes a Node.js script (dailyEmailJob.js) to send daily emails.
●​ Weekly Email Job (weekly-email.yml):
-​ Trigger: Scheduled to run daily at 8:00 AM UTC.
-​ Executes a Node.js script (weeklyEmailJob.js) to send weekly emails.

4.​Code Quality Workflow (super-linter.yml):

●​ Trigger: Runs on push and pull_request events targeting the main branch.
●​ Steps:
-​ Check out the code.
-​ Executes the Super Linter to validate code quality for changed files.

This pipeline ensures robust testing, automated deployments, and regular email
notifications, while maintaining code quality through linting.
 7

Testing Strategy and Implementation

1.​ Unit Testing:
●​ Frontend: React components were tested using Jest and React Testing Library to
validate UI behavior and state management.
Test: CalculateTimeLeft.test.jsx tested the calculateTimeLeft function for various scenarios.
●​ Backend: Node.js services and routes were tested using Jest and Supertest.
Test: server.test.js verified the response of the root endpoint.

2.​ Integration Testing:

●​ Verified the interaction between the frontend and backend APIs.
Test: Ensured that the Signup component correctly validated inputs and communicated with
the backend for user registration.

3.​ Edge Case Testing:

●​ Tested scenarios such as invalid email formats, weak passwords, and unaccepted terms
in the Signup component.
Test: The validateInputs function in Signup.jsx was tested for various invalid inputs.

4.​ Stress Testing:

●​ Simulated high traffic to test the backend's ability to handle multiple concurrent requests.
Test: Stress-tested the email notification system (dailyEmailJob.js and weeklyEmailJob.js) to
ensure reliability under load.

5.​ Mocking External Services:

●​ Mocked external services to test email functionality without sending actual emails.
Test: sendGridService.test.js mocked the sgMail.send function to validate sending logic.

6.​ User Acceptance Testing:

●​ Conducted by live peer reviewing with other groups to validate the application’s usability
and functionality.
●​ Feedback was collected and incorporated into the final iteration.

7.​ Documentation:
●​ All test cases, results, and identified issues were documented.
●​ Improvements were made based on testing outcomes, such as refining input validation
and optimizing the site based on test outcomes and feedback..
 8

Project Architecture Diagram

Data Flow Diagram:

 9

MVC Model:
 10

Bugs and Issues Tracking

Bug Description Replicate Severity Github
Issue

Images Rendering Images such as the Tabmark logo and user Log into the home page and observe the Low https://github.c
TabMark logo (more commonly) and the om/CMPT-276
Inconsistencies profile picture occasionally fail to load -SPRING-202
profile picture
5/final-project-
13-bays/issue
s/35

Categories Due to extraneous and difficult debugging, left Create a new category, and attempt to Medium https://github.c
delete category, and observe that there om/CMPT-276
inconsistencies out the functionality for deleting -SPRING-202
unused/unwanted functionality is no delete option
5/final-project-
13-bays/issue
s/36

Project creation and Due to difficult debugging, left out the Create a new project in a user-created High https://github.c
category and observe that it is not added om/CMPT-276
deletion functionality for automatically adding a project to -SPRING-202
inconsistencies a category, when created in that category. to that category - has to be done
5/final-project-
manually. Also cannot be observed by
Additionally, when a project is deleted, the project 13-bays/issue
the user by admin of our Firebase s/37
ID is not deleted from the category object in our project can see the console Firestore
database, which could cause wasted storage in having the project array not be cleared
the long run. upon deletions.

Names length If user inputs are very long for either of the When prompted for any of the text inputs Medium https://github.c
i.e. name for a new/edited project, name om/CMPT-276
validation following: Project Name, Category Name, -SPRING-202
Category Description causes layout issues, such for a new/edited category or description
5/final-project-
for new/edit category, text overflowing
as text overflowing or being displayed in 13-bays/issue
will emerge, with structural issues being s/38
unintended areas, with no validations being in able to be observed
place currently to prevent this.

Password reset Since we have custom-made validation rules for After making a TabMark account, click High https://github.c
on Reset Password, and check the om/CMPT-276
inconsistency native accounts on TabMark, but the reset -SPRING-202
password process e-mail is sent by Firebase on email associated with the TabMark
5/final-project-
account. If resetted into something that
our behalf, with the reset form not having any 13-bays/issue
is smaller than 8 characters and/or no s/39
validations, so if a user tries to log back in, they uppercase characters and/or no
are unable to. numbers, then user cannot log back in,
as the password, even though is validly
linked to their account, is not valid under
our validation rules

New tabs always get When editing a project, the tabs on current When you clicked on “No” for the High https://github.c
om/CMPT-276
saved window will always be saved regardless of user form that’s asking the user to save -SPRING-202
inputs tabs or not, the tabs on your current 5/final-project-
window will still be saved onto that 13-bays/issue
particular project even if you did not s/41
want it to.

Excessive Toast alert Multiple toast notifications appear simultaneously After logging in and Medium https://github.c
creating/updating/deleting projects, once om/CMPT-276
popups on Logout when the user logs out., which originate from a -SPRING-202
different React component and are not rendered you log out, you will observe multiple
5/final-project-
Toast (alert library) pop ups appearing at
until the user logs out from the React component 13-bays/issue
once as a stack. s/40
for the homepage
 11

Future Work and Improvements

While TabMark currently meets all required functionality, there are several features and
improvements we plan to implement in future updates to enhance usability, performance,
and overall experience:

Planned Features

●​ AI-Suggested Projects:​
We plan to integrate an AI recommendation system that analyzes the user’s existing
projects and suggests new, relevant ones. This system would take into account
factors like project type, deadline urgency, and difficulty to provide intelligent
suggestions that keep users engaged and productive.​

●​ Helper Chrome Extension:​

A Chrome extension has been developed and tested, that enables browser-level tab
operations that the web app cannot perform natively. This includes:​

○​ Querying the current browser window for open tabs and saving them to
Firestore.​

○​ Retrieving and reopening saved tab sessions directly into the user's browser.​
The extension has already been built and submitted to the Chrome Web
 12

However, after publishing it for public installation on the Chrome Web Store, we were
informed it has to be reviewed, and thus we are in the stage of waiting for approval - should
be approved within the next few days.

Improvements to Existing Features

●​ Signup Page Zoom Issue:​

The current signup page is sized correctly and looks balanced at 80% zoom, but
appears too zoomed in at 100%. We plan to adjust the layout so that it displays
properly and is fully responsive at the default zoom level.​

●​ FAQ Button Functionality:​

While the FAQ button is present in the UI, it has not been activated yet. We are
waiting to collect more user feedback before finalizing the content for the FAQ
section.​

●​ Profile Picture Editing:​

Users are currently only able to select their profile picture during their first login.
We plan to allow users to change their profile image anytime through their profile
settings in future updates.Profile Picture Editing:​
Users are currently only able to select their profile picture during their first login.
We plan to allow users to change their profile image anytime through their profile
settings in future updates.

●​ Allow users to open projects by clicking on them in the calendar view

 13

Lessons Learned and Takeaways

Working on TabMark throughout the semester allowed us to apply software engineering principles
to a structured, real-world project. One of the biggest challenges we faced was the loss of a team
member halfway through the course due to unforeseen personal circumstances. This reduced our
team from four to three people, which naturally increased the workload for each remaining
member. Despite this, we made the decision to move forward with implementing all six core
features that were expected from every group, and we were able to complete them as planned.

Another challenge came later in the semester during peer testing. While the application was
functionally sound, we received feedback that the UI felt a bit plain and could benefit from visual
enhancements. Based on that, we made targeted improvements — most notably, we added
animated icons to visually represent task difficulty (e.g., running for easy tasks, climbing for
medium, and drowning for hard). These small but impactful changes helped make the app feel more
polished and user-friendly.

Lastly, while we used a Kanban board to manage our workflow, we weren’t always consistent in
updating task statuses, especially during busy weeks. This sometimes led to confusion about what
was actually completed. Toward the end of the project, we started relying more on GitHub issues
and group chats to ensure everyone was aligned.

Overall, the project taught us the importance of adaptability, clear communication, and following
through with quality even when circumstances shift unexpectedly. We learned how to balance
development, design, and collaboration in a practical setting, and we finished the project with a
stronger understanding of what it takes to ship a complete, functioning application.
 14

Appendix

Members and Contribution:

Saad Usmani:
●​ Set up authentication using Firebase, configured for both native accounts, and Google
and Github accounts using popups. Further optimized, using verification email and reset
password email from Firebase Auth SDK
●​ Style and formatting for the Signup Page
●​ Created and linked Terms and Conditions page
●​ Added profile picture upload feature when signing up, as well as after logged in, and
stored using Firebase Storage
●​ Various styling and formatting tweaks for Home Page
●​ Set up user category system in Firestore database
●​ Developed, deployed and integrated TabMark Helper function that performs tab-related
operations
Fujai Shamshir:
●​ Designed and implemented the Signup Page UI, including input fields for login and
registration, as well as a preview of the app’s key features.
●​ Developed the Home Page interface, which includes both the List View and Calendar
View for managing user projects.
●​ Some built and styled frontend components include:
○​ Creating new projects
○​ Sorting projects by urgency and due date
○​ Organizing projects into custom categories
○​ Archiving/completing, and deleting projects
○​ A working Calendar View that dynamically displays user-created projects by
their due dates
Tri Ho:
●​ Set up sending emails using Sendgrid
●​ Set up Firestore from Firebase as the main database to store user data
●​ Created components and functions to be able to modify stored data with user’s inputs
●​ Made workflows for CI/CD pipeline: linting, build/test, deploying, automating emails

Changelog:

Previous Revision
Planned to use OAuth API for user Decided to go with Firebase’s authentication
 15

authentication

Planned to use Gemini API for AI-suggested Decided that

projects

Planned to use tab-related operations Understood that we had to defer to using a

natively from our web app. Chrome Extension for the tab-related
operations, for the main functionality of our
website

Peer Testing:

Survey Questions:
How functional/smooth was Task 1 – The Signup and Login process?​

How functional/smooth was Task 2 – Resetting your password process?​

How functional/smooth was Task 3 – Creating a new project?​

How functional/smooth was Task 4 – Archiving/completing a project?​

How functional/smooth was Task 5 – Deleting a project?​

How was the overall user experience using our app?​

How was the overall visual design/aesthetic of our app?​

Any bugs/inconsistencies you encountered? (Short answer)​

Any additional thoughts/opinions? (Short answer)

Survey Results:

Question Average Rating /

Response

Task 1 – Signup/Login process 5.00 / 5

Task 2 – Reset password process 5.00 / 5

Task 3 – Creating a new project 5.00 / 5

Task 4 – Archiving/completing a project 5.00 / 5

 16

Task 5 – Deleting a project 5.00 / 5

Overall user experience 5.00 / 5

Visual design/aesthetic 4.75 / 5

Responses to Open-Ended Questions:

●​ Any bugs/inconsistencies you encountered?​

○​ "N/A"​

○​ "No"​

○​ "I like it, it's cool!"​

​

●​ Any additional thoughts/opinions?​

○​ "The pages look a bit bland — could use more visual appeal."

EXTENSION GUIDE:

1.​ Go to chrome://extensions
2.​ Enable developer mode by toggling button in the top right
3.​ Click on the ‘Load unpacked’ option in the top left
4.​ Navigate to our repository and find the ‘chrome-extension’ folder and select it
5.​ Click on the Details under the ‘TabMark Helper’ extension and copy the ID
6.​ Open repository/frontend/src/components/home-paje.jsx
7.​ Replace the ID number value for EXTENSION_ID that is placed before all the imports at
the top of the file.
8.​ Make sure extension is enabled on their Chrome
9.​ Run both frontend and backend server by doing “npm start” in the root directory, and
then go “ http://localhost:5173/”
17