Criterion B

Task Planned Action Planned Time Target Criterion

Number Outcome Estimated Completion
date
1 Meeting Client Discuss the 1 Hour 15 25th April, A
[A.1] issue with my minutes 2024
client and
finding a
possible
solution.
2 Reflection To create a 1 hour 45 25th April, A
basic outline minutes 2024
on how to
resolve the
issues
3 Drafting Criterion Drafting the 2 hours 45 27th April, A
A criterion A, minutes 2024
with the
rationale and
methodology.
4 Meeting my Meeting my IA 20 minutes 28th April, A
supervisor supervisor 2024
and approving
it.
5 Design thinking, Creating UML 2 Hours 30 15th May, B
using diagrams diagram and minutes 2024
and flowcharts flowcharts for
my criterion B
6 Creating a Brainstorm all 1 hour 16th May, B
database the database 2024
dictionary fields I would
use in my
Firestore
Database.
7 Developing a Create all the 8 hours 17th May, B
prototype for my design pages, 2024
product to help me
plan in the
development
stage
8 Discuss design Meeting my 20 minutes 19th May, B
overview with my client to 2024
client. showcase my
design
overview and
approving it
9 Creating React Creating a 30 minutes 1st July 2024 C
Application react
application
 using Next JS
Learning how to Learn to use 5 hours C
use Next JS. Next JS for
dynamic
routing.
Setting up Install and 10 minutes C
Firebase Project initialize my
Firebase
project
Installing tailwind Installing 10 minutes C
CSS in my tailwind using
application CLI
Creating a favicon A favicon is 20 minutes C
for the website very
significant in
distinguishing
the website
from other
tabs
Installing the A react cookie 10 minutes C
react-cookie API is used to save
your login
information.
Makes it more
easier for the
user to use
the
application
Start coding the A navbar will 25 minutes C
navbar which will be styled,
contain all the coded and
hyperlinks connected to
all other
hyperlinks in
the website.
Code the login A login or 2 hours C
and sign up for sign-up page
the website will be coded
to connect to
the firebase
authentication
API
Code the other Coding the 10 hours C
informative header, hero,
sections of the e- footer, contact
commerce forms of the
website website

Coding the e- Coding the 10 hours C

commerce checkout page
functionality. and adding
the
functionality
of adding
products to a
cart.
Adding an admin An admin 5 hours C
panel. panel would
be
implemented
and only
accessed by
authorized
users. This
admin panel
will allow
them to
access the
database.
Adding or
deleting
products or
projects
Adding image Adding the 2 hours C
processing admin ability to add
panel images to a
specific
product or
project.
Adding a coupon The user will 1 hours C
code input be able to
input coupon
codes to
discount the
total value
accordingly.
Implementing I will be using 1 hour 30 C
various payment payment to minutes
methods using allow
Stripe checkout and
transfer the
payment to
the client.
Code the order Allow buyers 4 hours C
workflow to create
orders.
Update the
order status;
Allow
authorized
users to view
 order details.
Coding a review Users will be 3 hours C
system. able to rate
the client in
the forms of
stars and
additional
feedback
Test all the Testing all the 2 hours C
functions in components
different devices created on the
website to
make sure the
website is
responsive.
Integrate Integrating 45 minutes
Analytics on the analytics using
website firebase.
Record product Record a video 1 hour D
functionality demonstrating
video the full
functioning of
all the success
criteria in the
product
Gather client Conduct an 1 hour E
feedback on the interview with
product the client,
functionality displaying that
video the video
confirms with
the success
criteria and
solves the
problem
Host the product Using firebase 30 minutes E
in firebase to host the
website
Training the client Walkthrough 3 hours E
on using the on how to use
product the
administrator
panel
Gather client Based on the 1 hour E
feedback and Clients
recommendations interviews and
for the product feedback.
and evaluate the Learn about
product using the the limitations
success criteria of my website
Complete Based on the 3 hours E
 criterion E client
writeup feedback,
write the
Criterion E
draft

DESIGN

This will be the authentication page in the website in order to access the
checkout tab or to access the admin panel if you are an authorized user.
This page allows you to create a new account in a database or sign in with your
previous account.

This will be the catalog on the website where the user can browse through
different products with a filter function to narrow their query.
 This will be the product page layout.
(The grey box will consist of the product image)

This is the admin panel for authorized users where they have access to the
database, allowing to either modify or delete a product.
Start: This is the beginning of the process.

Input username and password: The user enters their username and password credentials.

If username and password in database: This decision diamond checks if the entered username and
password combination exists in the database.

Yes - Authenticate user: If a match is found in the database, the user is authenticated and granted
access to the system.

No - Output 'Error message': If there is no match in the database, an error message is displayed,
indicating that the login attempt failed.

Terminator: This symbol signifies the end of the process.]’

Start: This is the beginning of the process.

Is user.email an authorized user: This decision diamond checks if the user's email is authorized to
access the system.

Yes: If the user's email is authorized, the process continues.

No: If the user's email is not authorized, the process terminates.

Showcase admin panel: This step displays the admin panel to the authorized user.

Toggle on project: This action button allows the user to view all projects.

Show all projects in the database: This action retrieves and displays a list of all projects from the
database.
Database: This represents the database that stores the project information.

Modify and delete them: This indicates that the user can modify or delete any of the listed projects.

Start: This is the beginning of the process.

Toggle Checkout Button: This indicates the point where a customer clicks a button to initiate the
checkout process.

If Product Available && Authorized: This decision diamond checks if the product is in stock and if the
purchase is authorized by the system.

Yes: If both conditions are met, the process proceeds to payment.

No: If either condition is not met, the process goes to the output error.

Input Payment: This represents the step where the customer enters their payment information.

Yes - Payment Validated: If the payment information is valid, the process goes to the successful
output.

No - Output Error Processing Payment: If the payment information is not valid, an error message is
displayed to the user.

Output Success to User and Mail Invoice: If the payment is successful, a confirmation message is sent
to the user and an invoice is emailed.

Test Plan

Action Needed to be Test Method Expected Result Success Criteria

tested
Clients can create an Input two data fields User’s credentials are 13
account or log in with and redirect them to stored in the database
their previous account the e-commerce and can be used to
platform. login. A cookie
corresponds to the
appropriate user
To show a robust Display all the The user will be able 1
catalogue of products products and projects to see all the products
in the e-commerce to the user and projects listed in
panel the website
Admins are able to input new entry of a The product/project 3,5,7 ,6
modify products or project/product and is shown in the
projects store it in the ecommerce panel and
database the admin panel
Adding images to the authorized users to The image is displayed 4
entry input an image in an in the ecommerce
entry panel and the admin
panel
Adding products to User can browse the The products are 8
the cart catalogue and place correctly placed in a
selected products in cart when pressing the
the cart ‘add to cart’ button
Calculating the total The cart will The cart will output 9
cost of the cart dynamically adjust the the correct result
pricing based on the when placing products
values of the products in the cart
inside it.
Adding coupons The user will be able The website will 10
to input coupons and accept the coupon
reduce the total cost code and deduct the
total cost accordingly
To create a checkout The checkout page will The checkout page 11,12
page to purchase the redirect the user to a redirects the user and
products in the cart payment page, where the payment will be
the data will be received by the client.
validated. Once, Then, an email will be
payment has been sent.
processed an invoice
will be sent my email.
Responsiveness The website will The website will work 15
function accordingly flawlessly in Google’s
regardless of the inspect element
dimensions of the
viewport
User reviews Allow the users to The users are able to 14
input their feedback in input their reviews
the form of reviews and it is sent to the
client