BrickShop - Building Block Toy Paradise 🧱

Welcome to BrickShop, an e-commerce website project dedicated to providing creative building block toys from leading brands like Qman, Keeppley, and LEGO. Explore a world of creativity with diverse themes ranging from Superheroes, Conan, Sanrio, Doraemon to Ninjago, Chima, City, and many more! This README is available in English and Vietnamese. Please expand the section for your preferred language.

Project Link: https://github.com/TranHuuDat2004/BrickShop

---

👤 Author

• [Team Engineering]
  • Trần Hữu Đạt - Full-Stack Web Developer - @TranHuuDat2004
  • Lê Tấn Huy ( Huy Lê ) - Member - @CodeSades
  • Dương Thị Thùy Linh - Member - @thuylinh1501

Table of Contents

• Introduction
• Technology Stack
• Customer Experience
  • Key Features (For Customers)
  • Main Pages Description (User)
  • Customer Interface (Bootstrap)
• Admin Panel
  • Key Features (For Administrators)
  • Main Pages Description (Admin)
  • Admin Interface (Tailwind CSS)
• Installation & Setup Guide
  • Prerequisites
  • Installation Steps
  • Environment Variables
  • Running the Project
• License
• Contact

Introduction

BrickShop is an e-commerce platform where building block enthusiasts can find an extensive collection from Qman, Keeppley, and LEGO brands. The project offers a complete online shopping experience, from product discovery to payment and order tracking, along with a robust administration system for efficient business management.

Technology Stack

• Frontend:
  • HTML5
  • CSS3
    • Bootstrap: Main CSS framework for the user-facing interface (customer pages).
    • Tailwind CSS: Main CSS framework for the administrator interface (admin pages).
  • JavaScript
• Backend:
  • Node.js, Express.js
• Database:
  • MySQL

Customer Experience

Key Features (For Customers)

• 👤 Authentication & Account Management:
  • Register, Login, Logout.
  • Profile Settings: Update personal information (name, email), change password, manage shipping addresses, customize profile picture (upload or choose from available collections), add/edit social media links.
• 🧱 Browsing & Shopping:
  • View introductions to Qman, Keeppley, and LEGO brands on the homepage.
  • Browse all products or filter by brand/theme.
  • View product details: Images (gallery), description, price, SKU, suitable age, supplier, variations (if any), add to cart.
  • Product Search.
• 🛒 Cart & Checkout:
  • View/edit products in the shopping cart.
  • Apply valid Voucher/Coupon codes for discounts.
  • Proceed through the checkout process.
  • QR Code Payment option.
• 🚚 Order Management:
  • Review past order history.
  • Track order details: View recipient information, address, shipping method, total amount, order date, and the list of products in the order.

Main Pages Description (User)

• Home Page (Index): The first landing page, providing a general overview of BrickShop and featured brands (Qman, Keeppley, LEGO), along with promotions (e.g., Black Friday). Displays featured themes/products for exploration.
• Products Page: Lists the available building block toy products. Allows users to view multiple products, potentially with filtering or pagination.
• Product Detail Page: Shows comprehensive information about a specific product, including multiple images, detailed description, price, attributes (brand, theme, SKU, age...), quantity selection, and "Add to Cart" / "Buy Now" buttons.
• Account Settings Page: Enables users to manage their personal information, change passwords, update profile pictures (upload new or select from predefined collections like People, Cute, Lego Ninjago), and manage social media links (Twitter, Facebook, Google+, LinkedIn, Instagram).
• Order History/Detail Page: Provides detailed information about a specific order placed by the user, including shipping info, product list, quantities, prices, and the total amount.

Customer Interface (Bootstrap)

Home Page	LEGO Introduction	Qman Introduction
Keeppley Introduction	Products Page	Product Detail Page
Account Settings - Info	Account Settings - Avatar	Account Settings - Social Links
Order Detail

Admin Panel

Key Features (For Administrators)

• 📊 Dashboard: Displays a quick overview: Total orders, user count, product count, comment count.
• 👥 Manage Users: View a list of all registered users with ID, Avatar, Username, Email. Provides actions like Edit and Delete user accounts.
• 🧱 Manage Products: Displays a list of all products with ID, Image, Name, Age, Provider, Price, Status (e.g., new, bestseller), and Edit, Delete actions.
• 💬 Manage Comments: Allows administrators to view and potentially approve/delete product comments.
• 📦 Manage Orders: Lists all placed orders with ID, Customer Name, Date, Price, Shipping Address, Delivery Method, Order Status. Allows viewing details for each order.
• 🏷️ Manage Discounts / Coupons: Manage discount programs or coupon codes (vouchers).
• ➕ Add Product: A form allowing administrators to input information to add a new product, including Product Number, Name (English, Vietnamese), and upload multiple product images.
• 📚 Add Category: Allows administrators to add new brands or product themes.
• 🎟️ Add Coupons: A form to create new discount codes/vouchers.

Main Pages Description (Admin)

• Dashboard: Offers a high-level view of the store's activity through key metric cards. Main interface for navigating to other management sections.
• Manage Users: Displays the user list in a table format, allowing admins to view basic information and perform management actions.
• Manage Products: Presents the product catalog in a table. Admins can easily search, review, and edit or remove products.
• Manage Order: Lists orders chronologically, showing their processing status. Provides quick access to order details.
• Add Product: A detailed form interface for adding new products, including multi-language name input and image uploads.

Admin Interface (Tailwind CSS)

Dashboard	Manage Users	Manage Products
Manage Orders	Add Product

Installation & Setup Guide

Prerequisites

• Node.js (Version >= 16.x recommended)
• npm / yarn
• MySQL Server (Installed and running)
• Git

Installation Steps

1. Clone the repository:

   git clone https://github.com/TranHuuDat2004/Keeppley_Nodejs # Or your actual repo name BrickShop
   cd your_project_directory_name
   

2. Install Backend Dependencies:

   cd backend # Or your backend directory name
   npm install
   

3. Database Setup:
   • Log in to your MySQL server.
   • Create a new database (e.g., brickshop_db).
   • Import the database schema (database.sql or similar, specify its location).

Environment Variables

1. In the backend directory, create a .env file.
2. Add the required environment variables:

   DB_HOST=localhost
   DB_USER=your_mysql_user
   DB_PASSWORD=your_mysql_password
   DB_NAME=brickshop_db
   DB_PORT=3306
   PORT=3001
   JWT_SECRET=your_super_secret_key_for_jwt
   

3. Replace placeholder values with your actual configuration.

Running the Project

1. Start the Backend Server:

   cd backend
   npm start
   

   The server will run (e.g., http://localhost:3001).

2. Access the Frontend (Served by Backend):

   • User Interface: http://localhost:3001/
   • Admin Interface: http://localhost:3001/admin (Note: URLs depend on your Express.js route configuration for EJS views.)

License

This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.

You are free to:

• Share — copy and redistribute the material in any medium or format
• Adapt — remix, transform, and build upon the material

Under the following terms:

• Attribution — You must give appropriate credit, provide a link to the license, and indicate if changes were made.
• NonCommercial — You may not use the material for commercial purposes.

Contact

• Trần Hữu Đạt: huudat.peashooer@gmail.com - GitHub: @TranHuuDat2004
• Lê Tấn Huy: GitHub: @CodeSades
• Dương Thị Thùy Linh: GitHub: @thuylinh1501

---

👤 Tác giả

• [Nhóm Kỹ thuật]
  • Trần Hữu Đạt - Lập trình viên Web Full-Stack - @TranHuuDat2004
  • Lê Tấn Huy ( Huy Lê ) - Thành viên - @CodeSades
  • Dương Thị Thùy Linh - Thành viên - @thuylinh1501

Mục lục

• Giới thiệu
• Ngăn xếp Công nghệ
• Trải nghiệm Khách hàng
  • Tính năng Chính (Dành cho Khách hàng)
  • Mô tả các Trang Chính (Người dùng)
  • [Giao diện Khách hàn