Maxaboom 🎶 is a fun and dynamic online store that offers a wide variety of musical instruments.
From guitars 🎸 and drums 🥁 to keyboards 🎹, microphones 🎙 and trumpets 🎺, Maxaboom has everything a musician needs to create their own unique sound. With high-quality products and exceptional customer service; a perfect destination for anyone looking to unleash their inner rockstar.

Checkout Maxaboom →

---

boutique-en-ligne

IMPORTANT: This is a working progress and subject to major changes until the specified deadline below.

A school project to create an online shop using JavaScript with a fully functioning MySQL database.

This project is to be done by a group of 3 4 (including me), and my partners / collaborators for the next 3-4 weeks are Axel Vair, Morgane Marechal and Catherine Tranchand (our latest member).

So, we've decided to name our online shop 🥁... "MaxaBoom" (♾💥), and will a MySQL Database named db_maxaboom.sql.

Why MaxaBoom you might ask? #GoodQuestion !-: This is just a play-on-words with our first names and/or nicknames: Axel + Abraham + Momo (Morgane) === MaxaBoom 😜

The following tables (including a couple of TRIGGERS) were created in our db_maxaboom.sql database:

1. users: All currently registered users.
2. tags: All tags applied to each product.
3. addresses: All addresses of registered users.
4. cards: All cards of registered users.
5. orders: All orders of users.
6. categories: All categories of corresponding products.
7. sub_categories: All sub-categories related to product categories.
8. products: All producs created by the seller or administrator.
9. colors: All officially supported colors of Maxaboom.
10. products_colors: All product colors.
11. orders_items: All items or specific orders.
12. comments: All comments (or reviews) made by users (or reviews) on all products.
13. likes: All likes of corresponding products.
14. cart: The customers' cart

NOTE: For more info, read the Database section of this README.

Description

Original text in French: Votre entreprise décide de mettre en place une boutique en ligne (Thème et produits au choix).

Your company decides to set up an online shop (Theme and products to choose from).

Requirements

These are a couple of the main requirements for this school project:

1. An well-designed / attractive homepage with several sections including a highlighting of flagship products on the homepage / latest products put online.

2. Contemporary design and respecting the graphic charter of your company

3. The site must be responsive!

4. Product search bar with autocompletion in asynchronous javascript

5. Access to the shop presenting all the products with the possibility of filtering them by category / subcategories without page reloading.

6. On clicking on each product: a complete “detail” page dynamically generated (name, image, price, description, add to cart button, etc.)

7. A system for creating user accounts:

   • Registration / Connection module (Use of Javascript and Asynchronous mandatory in this part)
   • User profile management page (Summary and possibility to modify information, view purchase history, basket consultation, etc.)

8. Administrator dashboard area:

   • Product management using back office (Addition / Deletion / Modification of products, stocks, etc.)
   • Management of categories and subcategories of products (Addition / Deletion / Modifications…)

9. Cart / basket validation system (You do not have to implement a real payment solution, a simulation of the process is enough)

NOTE:

Target Skills

• Project / application modeling
• MCD / MLD database design
• Object Oriented Programming: use of Classes
• Detail a user journey on a “business” feature of your site (purchase action…)
• Structuring a project and thinking about its architecture
• Do asynchronous with JS
• Pitching a project: oral expression / production of presentation slides

Jobs

MOTTO: We'll always do more 😜

The official deadline of the jobs below - according to intra - is 26-04-2023 at 09:25 A.M. Here is a list of all the specific files to be submitted as well as their corresponding / current status for this project:

No.	Name	File	Status
1	Splash Screen - View	splash-screen.php	Pending
2	Welcome Screen - View	welcome-screen.php	Pending
3	Home Page - View	home-page.php	In progress
4	Maxaboom Database - SQL	db_maxaboom.sql	Done
5	Shop Page - View	shop-page.php	In progress
6	Product Page - View	product-page.php	In progress
7	Color - Theme	color.css	Done*
8	Typography - Theme	typography.css	Done*
9	Styles - Theme	styles.css	In progress
10	Home - Controller	HomeController.php	Done*
11	Admin - Controller	AdminController.php	Done*
12	Shop - Controller	ShopController.php	Done*
13	Product - Controller	ProductController.php	Done*
14	Order - Controller	OrderController.php	In progress
15	Cart - Controller	CartController.php	Done*
16	Category - Controller	CategoryController.php	Pending
17	Checkout - Controller	CheckoutController.php	In progress
18	Profile - Controller	ProfileController.php	Pending
19	Product - Controller	ProductController.php	Pending
20	Settings - Controller	SettingsController.php	Pending
21	Payment - Controller	PaymentController.php	Pending
22	Address - Controller	AddressController.php	Pending
23	User - Model	User.php	Done*
24	Order - Model	Order.php	Done*
25	Review - Model	Review.php	Done*
26	Product - Model	Product.php	Done*
27	Cart - Model	Cart.php	Done*
28	Image - Model	Image.php	Pending
29	Category - Model	Category.php	Done*
30	Address - Model	Address.php	Done*
31	Tag - Model	Tag.php	Pending
32	Account - Controller	AccountController.php	In progress
33	API - Controller	APIController.php	In progress
34	Nav Bar - View Component	nav-bar.php	Done*
35	Footer - View Component	footer.php	Pending
36	App Bar - View Component	app-bar.php	Pending
37	Database - Model Helper	Database.php	Done*
38	Response - Controller Helper	ResponseHandler.php	Done*
39	Home - Route	home-route.php	Done*
40	Shop - Route	shop-route.php	Done*
41	Order - Route	order-route.php	In progress
42	Product - Route	product-route.php	Done*
43	Side Bar - View Component	side-bar.php	Done*
44	Admin - Route	admin-route.php	Done*
45	Account - Route	account-route.php	Done*
46	Cart - Route	cart-route.php	Done*
47	Order Item - Model	OrderItem.php	Done*
48	Login Page - View	login-page.php	Done*
49	Register Page - View	register-page.php	Done*
50	Validation - Controller Helper	ValidationHandler.php	Done*

WARNING: This list is a working progress and will change soon

NOTE: (*) = still needs to be updated

Structure

The MVC folder & file structure of this project:

• models
• • helpers
• • • Database.php
• • • ...
• • User.php
• • Product.php
• • Cart.php
• • Order.php
• • ...
• views
• • components
• • • nav-bar.php
• • • app-bar.php
• • • footer.php
• • • ...
• • splash-screen.php
• • welcome-screen.php
• • home-page.php
• • shop-page.php
• • cart-page.php
• • checkout-page.php
• • product-page.php
• • admin-page.php
• • ...
• controllers
• • helpers
• • • Controller.php
• • • I18n.php
• • • ResponseHandler.php
• • • ...
• • UserController.php
• • HomeController.php
• • ShopController.php
• • ProductController.php
• • CartController.php
• • ...
• assets
• • logos
• • images
• • ...
• • animations
• • • fade-in-animation.css
• • • pop-in-animation.css
• • • slide-from-down-animation.css
• • theme
• • • color.css
• • • typography.css
• • • styles.css
• • stylesheets
• • • home-styles.css
• • • splash-screen-styles.css
• • • login-styles.css
• • • register-styles.css
• • • profile-styles.css
• src
• • app.js
• • server.js
• • ...
• • helpers
• • • mediawatcher.js
• • • ...
• • scripts
• • • home.js
• • • checkout.js
• • • shop.js
• • ...
• LICENSE
• README.md
• manifest.json
• package.json
• ...
• index.php
• db_maxaboom.sql
• mb_translator.mjs

NOTE: This is just a looong snippet ;)

More

These are some of the things we did or plan to do, in addition to this project's job requirements:

No.	Name	File	Status
1	Pop In - Animation	pop-in-animation.css	Done
2	Fade In - Animation	fade-in-animation.css	Done
3	Slide From Down - Animation	slide-from-down-animation.css	Done
4	Slide From Up - Animation	slide-from-up-animation.css	Done
5	Slide Left - Animation	slide-left-animation.css	Done
6	Slide From Left - Animation	slide-from-left-animation.css	Done
7	Slide Right - Animation	slide-right-animation.css	Done
8	Slide From Right - Animation	slide-from-right-animation.css	Done
9	Manifest - JSON File	manifest.json	Done
10	Package - JSON File	package.json	Done
11	Fade Out - Animation	fade-out-animation.css	Done
12	Slide Down - Animation	slide-down-animation.css	Done
13	Slide Up - Animation	slide-up-animation.css	Done
14	Translator - Script	mb_translator.mjs	Done

NOTE: (*) = still needs to be updated.
There's certainly a couple of file we must've forgot or not added yet, so we'll keep the above list updated obv. :)

Database

HEADS-UP: We do love me some TRIGGERS, so do not be shocked to see a couple in this database #LOL

The following tables were created in a MySQL database named db_maxaboom.sql via PDO on phpmyadmin:

NOTE: ⨁ = FOREIGN_KEY

users - MySQL Table

This table has a one-to-many relationship with addresses.

No.	Name	Type	Length	Null	Default	Extra
1	id 🔑	INT	255	No	None	AUTO_INCREMENT
2	firstname	VARCHAR	30	No	None	-
3	lastname	VARCHAR	30	No	None	-
4	email	VARCHAR	60	No	None	-
5	dob	VARCHAR	255	No	None	-
6	role	VARCHAR	255	No	None	-
7	created_at	DATETIME	-	Yes	NULL	-

NOTE:

addresses - MySQL Table

This table has a many-to-one relationship with users.

No.	Name	Type	Length	Null	Default	Extra
1	id 🔑	INT	11	No	None	AUTO_INCREMENT
2	title	VARCHAR	100	No	None	-
3	address	VARCHAR	100	No	None	-
4	address_complement	VARCHAR	100	Yes	NULL	-
5	postal_code	INT	11	No	None	-
6	city	VARCHAR	100	No	None	-
7	country	VARCHAR	100	No	None	-
8	user_id	INT	11	No	None	-
9	created_at	DATETIME	-	No	None	-
10	deleted_at	DATETIME	-	Yes	NULL	-

NOTE:

cards - MySQL Table

No.	Name	Type	Length	Null	Default	Extra
1	id 🔑	INT	11	No	None	AUTO_INCREMENT
2	type	VARCHAR	100	No	None	-
3	user_id	INT	11	No	None	-
4	card_no	BIGINT	16	No	None	-
5	expiry_month	INT	2	No	None	-
6	expiry_year	INT	4	No	None	-
7	cvv	INT	4	No	None	-
8	created_at	DATETIME	-	No	None	-
9	updated_at	DATETIME	-	Yes	NULL	-
10	deleted_at	DATETIME	-	Yes	NULL	-

NOTE:

orders - MySQL Table

No.	Name	Type	Length	Null	Default	Extra
1	id 🔑	INT	11	No	None	AUTO_INCREMENT
2	user_id	INT	11	No	None	-
3	status	VARCHAR	100	No	None	-
4	address_id	INT	11	No	None	-
5	card_id	INT	11	No	None	-
6	delivery_method	VARCHAR	100	No	None	-
7	payment_method	VARCHAR	100	No	None	-
8	total	DECIMAL	10,2	No	None	-
9	discount_percentage	INT	11	No	None	-
10	total_discounted	DECIMAL	10,2	No	None	-
11	tax_amount	DECIMAL	10,2	No	None	-
12	delivery_amount	DECIMAL	10,2	No	None	-
13	total_price	DECIMAL	10,2	No	None	-
14	deleted_at	DATETIME	-	Yes	NULL	-
15	updated_at	DATETIME	-	Yes	NULL	-
16	created_at	DATETIME	-	No	None	-

NOTE:

categories - MySQL Table

⚠️ WARNING: This table may be used by one or more TRIGGERs from the products table.

No.	Name	Type	Length	Null	Default	Extra
1	id 🔑	INT	11	No	None	AUTO_INCREMENT
2	title	VARCHAR	100	No	None	-
3	name	VARCHAR	100	No	None	UNIQUE
4	is_top	TINYINT	1	No	0	-
5	image	VARCHAR	200	Yes	NULL	-

NOTE:

sub_categories - MySQL Table

⚠️ WARNING: This table may be used by one or more TRIGGERs from the products table.

No.	Name	Type	Length	Null	Default	Extra
1	id 🔑	INT	11	No	None	AUTO_INCREMENT
2	title	VARCHAR	100	No	None	-
3	name	VARCHAR	255	No	None	UNIQUE
4	category_id	INT	11	No	None	-

NOTE:

products - MySQL Table

This table has a many-to-one relationship with categories table.

No.	Name	Type	Length	Null	Default	Extra
1	id 🔑	VARCHAR	11	No	None	-
2	category_id ⨁	TINYINT	10	No	None	-
3	author_id ⨁	INT	255	No	None	-
4	cover_image_id ⨁	INT	255	No	None	-
5	title	VARCHAR	60	No	None	-
6	text	TEXT	2000	No	None	-
7	likes	INT	10	Yes	NULL	-
8	created_at	DATETIME	-	Yes	NULL	-
9	updated_at	DATETIME	-	Yes	NULL	-

NOTE:

colors - MySQL Table

No.	Name	Type	Length	Null	Default	Extra
1	id 🔑	VARCHAR	11	No	None	AUTO_INCREMENT
2	name	VARCHAR	60	No	None	-
3	hex	VARCHAR	6	No	None	-

NOTE:

products_colors - MySQL Table

No.	Name	Type	Length	Null	Default	Extra
1	id 🔑	INT	11	No	None	AUTO_INCREMENT
2	product_id ⨁	VARCHAR	11	No	None	-
3	color_id ⨁	VARCHAR	30	No	None	-

NOTE:

orders_items - MySQL Table

No.	Name	Type	Length	Null	Default	Extra
1	id 🔑	INT	11	No	None	AUTO_INCREMENT
2	order_id	INT	11	No	None	-
3	product_id	INT	11	No	None	-
4	quantity	INT	11	No	None	-
5	unit_price	DECIMAL	10,2	No	None	-

NOTE:

tags - MySQL Table

⚠️ WARNING: This table may contain one or more TRIGGERs

No.	Name	Type	Length	Null	Default	Extra
1	id 🔑	INT	255	No	None	AUTO_INCREMENT
2	name	VARCHAR	255	No	None	-

NOTE:

likes - MySQL Table

⚠️ WARNING: This table may contain one or more TRIGGERs

No.	Name	Type	Length	Null	Default	Extra
1	id 🔑	INT	255	No	None	AUTO_INCREMENT
2	user_id ⨁	INT	255	No	None	-
3	product_id ⨁	VARCHAR	30	No	None	-

NOTE:

comments - MySQL Table

⚠️ WARNING: This table may contain one or more TRIGGERs

No.	Name	Type	Length	Null	Default	Extra
1	id 🔑	INT	255	No	None	AUTO_INCREMENT
2	user_id ⨁	INT	255	No	None	-
3	comment	TEXT	500	No	None	-
4	product_id ⨁	INT	30	No	None	-
5	created_at	DATETIME	-	Yes	NULL	-

NOTE:

---

Installation

IMPORTANT: Make sure you have XAMPP already installed on your computer before proceeding.

1. Clone this project's repository

git clone https://github.com/abraham-ukachi/boutique-en-ligne.git

NOTE: There's no need to change the current working directory to boutique-en-ligne

2. Now, create a symbolic link of boutique-en-ligne in the XAMPP's htdocs folder:

• On Mac

ln -s "$(pwd)/boutique-en-ligne" /Applications/XAMPP/htdocs/boutique-en-ligne

• On Linux

ln -s "$(pwd)/boutique-en-ligne" /opt/lampp/htdocs/boutique-en-ligne

3. Open the boutique-en-ligne folder in your default browser:

open http://localhost/boutique-en-ligne

---

Testing

Browser	Version	Status	Date	Time
Arc	0.98.2	Tested	11/05/2023	19:34:05
Brave	1.47.186	-	-	-
Chrome	-	Pending	-	-
Firefox	-	Pending	-	-
Safari	-	Pending	-	-
Opera	-	Pending	-	-
Edge	-	Pending	-	-
IE	-	Pending	-	-

NOTE: IE = Internet Explorer = 👎🏽

TODOs

• Create a navigation flow diagram with FigJam.
• Create a project-specific logo
• Add localization / internationalization (at least: english & french)
• Add mobile compatibility to all pages (i.e. make it responsive)
• Optimize .svg doodles
• Optimize all .php files
• Optimize all .css files
• Optimize all .js files
• Remove unnecessary comments
• Add screenshots
• Create a shake animation (to be applied in eg.: forms during a failed validation process)

---

Some Random Screenshots

On Mobile

No.	Light Mode	Dark Mode	Note
1.		N/A	Splash Screen - Mobile - Design Concept
2.		N/A	Welcome Page - Mobile - Design Concept
3.			Account Overview Page - Mobile - Design Concept
4.	N/A	N/A	-

On Laptop

No.	Light Mode	Dark Mode	Note
1.		N/A	Splash Screen - Desktop - Design Concept
2.		N/A	Welcome Page - Desktop - Design Concept
3.	N/A	N/A	-

Others

MCD / Initial Database Concept

MLD / Logical Database Model ?

MPD / Entity Relationship Diagram of Maxaboom Database