HolaWear

SDN301m Project - SE1740-NJ

---

Project Members

Name	Student ID	Role
Doan Thanh Chung	HE176077	Team Lead, Full Stack
Van Minh Tuan	HE170999	Full Stack
Nguyen Thanh Tung	HE172838	Back End
Ha Van Manh	HE176110	Full Stack
Do Duc Thien	HE176216	Full Stack

Overview

HolaWear is a professional e-commerce web application for purchasing clothing. It supports roles like Admin, Seller, and User, enabling product management, sales tracking, and user interaction. The platform ensures a seamless shopping experience with a responsive design, secure authentication, and modern UI components.

Demo Links

• Demo Video 1

Technologies Used

• Frontend: ReactJS, Tailwind CSS, Shadn UI
• Backend: NodeJS, ExpressJS, Mongoose, JWT
• Database & Storage: MongoDB Atlas(+ local), Cloudinary
• Architecture: MERN Stack

Key Features

User Functions:

• Account Management: Register, log in, and manage profiles.
• Product Browsing: Explore products with filters and search features.
• Cart & Checkout: Add items to the cart and securely process payments.
• Order Tracking: Track order history and delivery status.

Seller Functions:

• Product Management: Add, edit, and delete products.
• Sales Management: View order statistics and transaction history.

Admin Functions:

• User Management: Approve, ban, and manage users and sellers.
• System Monitoring: Generate performance reports and system logs.

Project Highlights

• Modern responsive UI with Tailwind CSS and Shadn UI components.
• Secure authentication with JWT and Bcrypt.
• REST API for seamless client-server communication.
• Cloud storage integration with MongoDB Atlas and Cloudinary.

Folder Structure

Backend

Folder Structure

└── backend/
    ├── controllers/
    │   ├── index.js
    │   ├── authController.js
    │   ├── userController.js
    │   └── ...
    ├── middlewares/
    │   ├── verifySignUp.js
    │   ├── verifyJWT.js
    │   └── ...
    ├── models/
    │   ├── index.js
    │   ├── user.model.js
    │   ├── role.model.js
    │   └── ...
    ├── routes/
    │   ├── index.js
    │   ├── authRoute.js
    │   ├── userRoute.js
    │   └── ...
    ├── .env
    ├── .prettierrc
    ├── note_BE.txt
    ├── package-lock.json
    ├── package.json
    └── server.js

Frontend

Folder Structure

└── frontEnd/
    ├── public/
    ├── src/
    │   ├── assets/
    │   ├── axios/
    │   ├── components/
    │   │   ├── ui/
    │   │   │   ├── accordion.jsx
    │   │   │   ├── badge.jsx
    │   │   │   ├── button.jsx
    │   │   │   └── ...
    │   │   └── admin/
    │   │       ├── formAddProduct.jsx
    │   │       ├── tableProduct.jsx
    │   │       ├── tableUser.jsx
    │   │       └── ...
    │   ├── lib/
    │   ├── pages/
    │   │   ├── admin/
    │   │   │   ├── dashboard.jsx
    │   │   │   ├── manageProduct.jsx
    │   │   │   └── ...
    │   │   ├── seller/
    │   │   ├── auth/
    │   │   │   ├── login.jsx
    │   │   │   ├── register.jsx
    │   │   │   └── ...
    │   │   ├── error/
    │   │   │   └── notFoundPage.jsx
    │   │   └── main/
    │   │       ├── home.jsx
    │   │       ├── cart.jsx
    │   │       └── ...
    │   ├── app.jsx
    │   ├── app.scss
    │   ├── index.scss
    │   └── index.jsx
    ├── .prettierrc
    ├── .gitignore
    └── components.json

Demo Images

Expand to View Screenshots

1. 
2. 
3. 
4. 
5. 
6. 
7. 
8. 

---

This project was developed as part of the SDN301m course, focusing on building a full-stack web application with a high level of professionalism and modern best practices.