Skip to content

Latest commit

 

History

History
579 lines (434 loc) · 24.5 KB

README.md

File metadata and controls

579 lines (434 loc) · 24.5 KB

Maxaboom Logo on Light Maxaboom Logo on Dark

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
      • Database.php
      • ...
    • User.php
    • Product.php
    • Cart.php
    • Order.php
    • ...
  • views
      • 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
      • Controller.php
      • I18n.php
      • ResponseHandler.php
      • ...
    • UserController.php
    • HomeController.php
    • ShopController.php
    • ProductController.php
    • CartController.php
    • ...
  • assets
    • ...
      • fade-in-animation.css
      • pop-in-animation.css
      • slide-from-down-animation.css
      • color.css
      • typography.css
      • styles.css
      • home-styles.css
      • splash-screen-styles.css
      • login-styles.css
      • register-styles.css
      • profile-styles.css
  • src
    • app.js
    • server.js
    • ...
      • mediawatcher.js
      • ...
      • 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

  1. 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
  1. 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. Splash Screen - Mobile N/A Splash Screen - Mobile - Design Concept
2. Welcome Page - Mobile N/A Welcome Page - Mobile - Design Concept
3. Account Page - Overview - Mobile - Light Account Page - Overview - Mobile - Dark Account Overview Page - Mobile - Design Concept
4. N/A N/A -

On Laptop

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

Others

MCD / Initial Database Concept MCD - Maxaboom - Database

MLD / Logical Database Model ? MLD - Maxaboom - Database

MPD / Entity Relationship Diagram of Maxaboom Database MLD - Maxaboom - Database