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.

`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:

users: All currently registered users.
tags: All tags applied to each product.
addresses: All addresses of registered users.
cards: All cards of registered users.
orders: All orders of users.
categories: All categories of corresponding products.
sub_categories: All sub-categories related to product categories.
products: All producs created by the seller or administrator.
colors: All officially supported colors of Maxaboom.
products_colors: All product colors.
orders_items: All items or specific orders.
comments: All comments (or reviews) made by users (or reviews) on all products.
likes: All likes of corresponding products.
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:

An well-designed / attractive homepage with several sections including a highlighting of flagship products on the homepage / latest products put online.
Contemporary design and respecting the graphic charter of your company
The site must be responsive!
Product search bar with autocompletion in asynchronous javascript
Access to the shop presenting all the products with the possibility of filtering them by category / subcategories without page reloading.
On clicking on each product: a complete “detail” page dynamically generated (name, image, price, description, add to cart button, etc.)
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.)
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…)
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.

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

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

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

README.md

README.md

`boutique-en-ligne`

Description

Requirements

Target Skills

Jobs

Structure

More

Database

`users` - MySQL Table

`addresses` - MySQL Table

`cards` - MySQL Table

`orders` - MySQL Table

`categories` - MySQL Table

`sub_categories` - MySQL Table

`products` - MySQL Table

`colors` - MySQL Table

`products_colors` - MySQL Table

`orders_items` - MySQL Table

`tags` - MySQL Table

`likes` - MySQL Table

`comments` - MySQL Table

Installation

Testing

TODOs

Some Random Screenshots

On Mobile

On Laptop

Others

Files

README.md

Latest commit

History

README.md

File metadata and controls

boutique-en-ligne

Description

Requirements

Target Skills

Jobs

Structure

More

Database

users - MySQL Table

addresses - MySQL Table

cards - MySQL Table

orders - MySQL Table

categories - MySQL Table

sub_categories - MySQL Table

products - MySQL Table

colors - MySQL Table

products_colors - MySQL Table

orders_items - MySQL Table

tags - MySQL Table

likes - MySQL Table

comments - MySQL Table

Installation

Testing

TODOs

Some Random Screenshots

On Mobile

On Laptop

Others

`boutique-en-ligne`

`users` - MySQL Table

`addresses` - MySQL Table

`cards` - MySQL Table

`orders` - MySQL Table

`categories` - MySQL Table

`sub_categories` - MySQL Table

`products` - MySQL Table

`colors` - MySQL Table

`products_colors` - MySQL Table

`orders_items` - MySQL Table

`tags` - MySQL Table

`likes` - MySQL Table

`comments` - MySQL Table