Final Project Title:

MallMart
By BayTech: Luis Jimenez-Barrios, Warren Ngoun, Yukio Rivera, Jennah Yasin

Description:
MallMart is an online store that sells several categories of products ranging from camping items
to bathroom items and many more. The website is made to be easy to navigate through for
users to have a soothing experience browsing through the site. Here is a breakdown of each
page of the website:

1. Home Page:
a. On the top of the Home page, there is a promotion section displayed as a
carousel where a few items are showcased with details about what sale each of
those items has.
b. Towards the bottom, there is a “sale of the day” section that displays one specific
item every time the page is reloaded from the database as the best sale of the
day and the user has the ability to add that item to their cart, if wanted.
2. Products Page:
a. Under the navigation bar of the webpage, there is a section of categories that can
be chosen from to narrow down all of the products that are sold in the store,
taken from the table items from the database.
b. There is also a search feature on this page that allows the user to search for a
specific product by its name and find the corresponding item and its details.
c. A user is able to add an item to their cart by first clicking on the item name that
will open up a corresponding Modal that displays more information about that
particular item, which is also pulled from the items table.
d. On the bottom of the Modal, there is an “Add to Cart” button that allows the user
to add that item to their cart, and this increments the blue label on the top right
corner of the webpage that shows the number of items in the users cart.
e. We used the fetch() call to be able to pull the corresponding information of a
product being clicked on in the modal from our local API, which is the table items
in the database.
3. Account Page:
a. The account page gives the user the choice to either log in with an existing
account, if already registered, or create a new account.
b. The create a new account button opens up a separate page which contains a
form. Everytime an account is created (form is submitted), the user’s registered
information is added to the table called user_info in the database.
c. Once a user is logged in, they have the ability to edit every field of their account’s
information (besides the username) and their records will be updated in the
database.
 d. The second fetch() call was used in the create account page to use the external
API of Unsplash where a user is able to keep refreshing the image option and a
new image appears from that API until a user decides on an image to use as
their profile picture.
e. The user also has the ability to log out of their account on this page.
4. Cart Page:
a. The cart page displays all of the items that were added to the cart and calculates
all of the totals (shipping, subtotal, tax, and total) values.
b. The user is able to select a shipping method and this will change the totals
corresponding to the amount.
c. Once a user is ready to checkout, they can click on the checkout button. This
button will open up another Modal that allows the user to confirm their cart by
displaying the totals again. If the user decides to proceed with the purchase, they
can click the checkout button, otherwise there is a back button that will take them
back to the cart.
i. In order to successfully checkout, the user must be logged into their
account. If the user attempts to checkout without logging in, they will be
redirected to the account page where they can now log in and continue
with the checkout.
d. Finally, the last feature of the cart page is the empty cart button. This button will
clear the cart’s storage and reset it to empty.

This is the complete breakdown of the website by pages.

Task Distribution:
- When our team initially started this project, we thought we would split into teams of two
where two of us would work front-end and the other two would work back-end. However,
we realized that it would be more efficient if we were to do the back-end work together
and leave the front-end part and detailing to the end since functionality is important for
this project.
- We met up five times and worked on each page of the website together. We would be in
a meeting and give each other feedback as well as work through completing the
functions and routes of the pages together. Towards the end of the project, we realized
we can then split into two teams.
- Warren and Luis worked on the details of the account page where the form of
creating an account was implemented and added those created accounts to the
table user_info in the database.
- Jennah and Yukio worked on the product page, to display the corresponding
Modal of each product which showed its extra details and the ability to further
add that item to the cart.
- We felt that splitting into two during this time was very beneficial because it felt like we
got two things done at once.
 - With the rest of the project, we continued to work like this and whenever someone had
an issue with part of the code, other team members would join in and help figure it out.
- We were able to work together as a team and get the website to function and look as
great as we were able to.

Changes from original design:

- In terms of changes from our original design, there wasn’t too much. We originally
designed the layout of what we want our website to look like through the website Figma.
This helped with actually visualizing what our web page would look like and encouraged
us to think of how we would actually implement it through code.
- The only major thing that was changed from the original design was the way that users
were able to add items to their cart. We initially were going to make each item’s image
clickable and open up the cart page directly from there, but decided that adding it to the
cart first and then having the user decide when to view their cart would be a better idea
in terms of user friendliness.
- Other than that, we made minimal changes like the way the category list looked like and
more of the physical appearance of the website.

Database Schema

SET NAMES utf8;

SET time_zone = '+00:00';
SET foreign_key_checks = 0;
SET sql_mode = 'NO_AUTO_VALUE_ON_ZERO';

SET NAMES utf8mb4;

DROP TABLE IF EXISTS `user_info`;

CREATE TABLE `user_info` (
`userId` int NOT NULL AUTO_INCREMENT,
`fullName` varchar(100) NOT NULL,
`username` varchar(50) NOT NULL,
`password` varchar(72) NOT NULL,
`bday` varchar(50) NOT NULL,
`email` varchar(100) NOT NULL,
`phoneNumber` varchar(50) NOT NULL,
`address` varchar(200) NOT NULL,
`imgUrl` varChar(200) NOT NULL,
PRIMARY KEY (`userId`));

DROP TABLE IF EXISTS `items`;

CREATE TABLE `items` (
`itemId` int NOT NULL AUTO_INCREMENT,
`name` varchar(100) NOT NULL,
`price` int NOT NULL,
`category` varchar(50) NOT NULL,
`imgName` varchar(50) NOT NULL,
`description` varchar(100) NOT NULL,
`availability` varchar(50) NOT NULL,
PRIMARY KEY (`itemId`));

INSERT INTO `items` (`itemId`, `name`, `price`, `category`, `imgName`, `description`,

`availability`) VALUES
(1, 'Tent', '25', 'camping', 'tent.png', 'Waterproof,Spacious, Lightweight Portable Backpacking
Tent for Outdoor Camping/Hiking.', 'in stock'),
(2, 'Sleeping Bag', '15', 'camping', 'sleepingBag.png', 'Ultralight Backpacking Sleeping Bag for
Hiking Cold Weather & Warm - Lightweight Compact Camping Gear Equipment Summer &
Winter.', 'in stock'),
(3, 'Canteen', '20', 'camping', 'canteen.png', 'Stainless Steel Water Bottle with Nested Camping
Cup and Lid for Bug Out Bag, Bushcraft Gear, Metal Canteen with a Wide Mouth Water Bottle
and Mess Kit.', 'in stock'),
(4, 'Backpack', '23', 'camping', 'backpack.png', 'Hiking Backpack, Waterproof Camping
Essentials Bag with Rain Cover, 45+5 Liter Lightweight Backpacking Back Pack.', 'in stock'),
(5, 'Pan', '10', 'kitchen', 'pan.png', 'Hard Anodized Aluminum with Anti-Warp Base, Stainless
Steel Handle - Classic Nonstick Fry Skillet for Gas/Electric/Induction Cooktops-Dishwasher &
Oven-Safe-Black/9.5 IN.', 'in stock'),
(6, 'Shampoo', '3', 'bathroom', 'shampoo.png', 'Moisturizing Shampoo for Dry Hair Ultimate
Moisture Silicone-Free, Moisturizing ProteinFusion with Elastin Protein and Green Caviar 33.8
oz.', 'in stock'),
(7, 'Couch', '80', 'bedroom', 'bedr.png', 'Modern Fabric Loveseat Sofa with 2 USB Charging
Ports, Love Seats Furniture Suitable for Small Spaces, Living Room, Office, Soft Couch Easy to
Install.', 'in stock'),
(8, 'Lamp', '13', 'bedroom', 'lamp.png', 'Nightstand Lamp with 3-Prong AC Outlet for Bedroom
Living Room Office.', 'in stock'),
(9, 'Knife Set', '20', 'kitchen', 'kset.png', ' Knife set, 23 Pcs Kitchen Knife Set with Block &
Sharpener Rod, High Carbon Stainless Steel Chef knife set, Ultra Sharp, Full-Tang Design.', 'in
stock'),
(10, 'Fishing Pole', '50', 'fishing', 'fishingPole.png', 'Slingshot Spincast Reel and Fishing Rod
Combo, 5-Foot 6-Inch 2-Piece Fishing Pole, Size 30 Reel, Right-Hand Retrieve, Pre-Spooled
with 10-Pound Zebco Line.', 'in stock'),
(11,'Fishing Bait', '2', 'fishing', 'bait.png', 'Fishing Lures Shallow Deep Diving Swimbait Crankbait
Fishing Wobble Multi Jointed Hard Baits for Bass Trout Freshwater and Saltwater.', 'in stock'),
(12, 'Towel Set', '12', 'bathroom', 'towels.png', 'American Soft Linen, 6 Piece Towel Set, 2 Bath
Towels 2 Hand Towels 2 Washcloths, Super Soft and Absorbent, 100% Turkish Cotton Towels
for Bathroom and Kitchen Shower Towel, Bright White.', 'in stock');

DROP TABLE IF EXISTS `purchase_history`;

CREATE TABLE `purchase_history` (
`transactionId` int NOT NULL AUTO_INCREMENT,
`shipping` varchar(200),
`subtotal` varchar(200),
`tax` varchar(200),
`total` varchar(200),
`userId` int NOT NULL,
`purchase_date` varchar(200),
PRIMARY KEY (transactionId),
FOREIGN KEY (userId) REFERENCES user_info(userId)
);

Screenshots of Finished Project

1. Home Page

2. Products Page
3. Product Modal

4. Account Page (login)

5. Account Page while logged in:

6. Edit Account:
7. Create an Account Page

8. Cart/Checkout Page
9. Checkout Modal

10. Purchased Page(receipt)