Cosmetic React Store

A full-featured e-commerce web application for cosmetics, built with React + TypeScript + Vite. The platform supports three roles: Customer, Admin, and Shipper, each with their own dedicated portal.

---

Table of Contents

• Features
• Screenshots
• Demo Accounts
• Tech Stack
• Project Structure
• Getting Started
• Environment Variables
• Available Scripts
• Routing Overview
• Modules
• Code Quality

---

Features

Customer

• Browse products with filter by category, brand, and price
• View detailed product information
• Add to cart and manage cart items
• Checkout with payment integration
• User authentication (login, register, forgot/reset password)
• Personal profile management

Admin

• Dashboard with revenue charts, order statistics, and recent orders
• Manage products (create, edit, delete)
• Manage orders and track order status
• Manage shipments
• Manage user accounts
• View and moderate product reviews
• Sales reports

Shipper

• View assigned delivery list
• Update delivery status in real time
• View delivery history

---

Screenshots

My Account — Personal Information

Users can view and edit their personal details (full name, phone number, email, address) directly from the profile page.

Checkout — Place an Order

Users fill in shipping information, review their order summary (items, subtotal, shipping fee, total), choose a payment method, and place the order.

Admin — Product Management

Admins can view inventory stats (total, available, low stock, out of stock, warehouse value), search and filter products by category and status, and perform actions (view, edit, disable) on each product.

---

Demo Accounts

The system supports three roles. Use the accounts below to log in and explore each portal:

Role	Portal	Email	Password
Customer	/auth	user@cosmetic.com	(your password)
Admin	/admin	admin@cosmetic.com	(your password)
Shipper	/shipper-management	shipper@cosmetic.com	(your password)

These accounts must exist in your database. Ask your backend team for the actual credentials or seed them via the backend setup scripts.

---

Tech Stack

Category	Library / Tool
Framework	React 18
Language	TypeScript 4
Build Tool	Vite 2
Styling	Tailwind CSS 3, Ant Design 5
Routing	React Router DOM v7
State Management	Zustand 5
Data Fetching	TanStack React Query 5 + Axios
Charts	Recharts 3
Icons	Lucide React, FontAwesome
Auth	JWT via jwt-decode
Linting	ESLint 8 + Prettier 2
Git Hooks	Husky 9 + lint-staged

---

Project Structure

cosmetic-react-store/
├── src/
│   ├── app/
│   │   └── router.tsx          # All route definitions
│   ├── assets/
│   │   └── imgs/               # Static images and banners
│   ├── components/
│   │   └── Layout/
│   │       ├── Header.tsx
│   │       └── Footer.tsx
│   ├── data/                   # Mock/seed data
│   ├── lib/
│   │   ├── axios.ts            # Axios client with JWT interceptor
│   │   └── utils.ts
│   ├── modules/
│   │   ├── Admin/              # Admin portal
│   │   ├── Auth/               # Authentication flows
│   │   ├── Customer/           # Customer-facing storefront
│   │   └── Shipper/            # Shipper delivery portal
│   ├── App.tsx
│   ├── main.tsx
│   └── index.css
├── index.html
├── package.json
├── tsconfig.json
├── postcss.config.js
├── .eslintrc
└── .prettierrc

Each module follows a consistent internal structure:

modules/<Module>/
├── api/          # API call functions (axios)
├── component/    # UI components
├── views/        # Page-level view components
├── hooks/        # Custom React hooks
└── <Module>Page.tsx  # Module entry / layout component

---

Getting Started

Prerequisites

• Node.js >= 16
• npm or yarn
• Backend API running at http://localhost:8000 (FastAPI)

Installation

1. Clone the repository:

git clone https://github.com/HongDiep18/Cosmetic-react-store.git
cd Cosmetic-react-store

2. Install dependencies:

npm install
# or
yarn install

3. Create your environment file and set the API base URL:

# Create a .env file in the project root
VITE_API_BASE_URL=http://localhost:8000

4. Start the development server:

npm run dev
# or
yarn dev

5. Open your browser at the link just run

Note: The frontend fetches all product, order, and user data from the backend API (http://localhost:8000). Make sure the backend server is running before you open the app — without it, pages will load but all data will be empty or show errors. See Run the Backend (FastAPI) for setup instructions.

---

Backend of project(service)

You have to clone this project: https://github.com/HongDiep18/Cosmetic-api-store.git

Environment Variables

Create a .env file in the project root:

VITE_API_BASE_URL=http://localhost:8000

Variable	Description	Default
VITE_API_BASE_URL	Base URL for the backend API	http://localhost:8000

---

Available Scripts

Command	Description
npm run dev	Start development server
npm run build	Type-check and build for production
npm run preview	Preview the production build locally
npm run lint	Check for lint errors
npm run lint:fix	Auto-fix lint errors
npm run prettier	Check code formatting
npm run prettier:fix	Auto-fix code formatting
npm run format	Fix both lint and formatting

---

Routing Overview

Path	Role	Description
/	Customer	Homepage / hero banner
/products	Customer	Product listing with filters
/products/:productId	Customer	Product detail page
/cart	Customer	Shopping cart
/checkout	Customer	Checkout & payment
/auth	Public	Login / Register
/auth/forgot-password	Public	Forgot password
/auth/reset-password	Public	Reset password
/profile	Customer (auth required)	User profile
/admin	Admin	Dashboard overview
/admin/orders	Admin	Order management
/admin/products	Admin	Product management
/admin/shipments	Admin	Shipment tracking
/admin/accounts	Admin	User account management
/admin/reviews	Admin	Review moderation
/admin/reports	Admin	Sales reports
/shipper-management	Shipper (auth required)	Delivery list
/shipper-management/deliveries	Shipper	Active deliveries
/shipper-management/history	Shipper	Delivery history

---

Modules

Auth Module (src/modules/Auth)

Handles all authentication flows. JWT access tokens are stored in localStorage and automatically attached to every API request via an Axios interceptor. On a 401 response, the token is cleared and the user is redirected to /auth.

• Login / Register form
• Forgot password (email-based)
• Reset password
• RequireAuth wrapper component for protected routes

Customer Module (src/modules/Customer)

The main storefront. Uses React Query for server-state caching and Zustand (via CartContext) for local cart state.

• HomeView — hero banner, featured products
• ProductPage — filterable product grid (by category, brand)
• ProductDetail — images, description, add to cart
• Cart — cart items, quantity control, totals
• Checkout — address input, payment
• Profile — user info and order history

Admin Module (src/modules/Admin)

Full back-office panel with sidebar navigation.

• DashboardView — stat cards, revenue chart (Recharts), recent orders table
• OrdersView — paginated order list, status updates
• ProductsView — product CRUD with inline form
• ShipmentsView — shipment tracking
• AccountView — user account list
• ReviewsView — product review moderation
• ReportsView — sales reports and data export

Shipper Module (src/modules/Shipper)

Lightweight portal for delivery personnel.

• DeliveryListView — list of active assigned orders
• DeliveryHistoryView — completed delivery history
• Status update actions per delivery

---

Code Quality

The project enforces consistent code style automatically.

On every commit (via Husky + lint-staged), all staged .ts/.tsx files are:

1. Auto-fixed with ESLint
2. Formatted with Prettier

ESLint rules include:

• @typescript-eslint recommended rules
• react-hooks rules (exhaustive deps, rules of hooks)
• jsx-a11y accessibility rules
• Import order enforcement

Path aliases — use ~/ to import from src/:

import apiClient from '~/lib/axios';
import HomeView from '~/modules/Customer/views/HomeView';

Configured in both tsconfig.json and vite.config.ts via vite-tsconfig-paths.

Manual checks:

# Check lint
yarn lint

# Fix lint
yarn lint:fix

# Check prettier
yarn prettier

# Fix prettier
yarn prettier:fix

# Fix both lint and prettier
yarn format