Cấu trúc cửa hàng
Xây dựng SPA React bằng component TypeScript và điều hướng phía client với React Router.
Về danh sách dự án
02 / Đồ án học thuật2025 — 2026
The Bad Hats.
Website bán hàng React với giỏ hàng, trạng thái đăng nhập và kiểm tra dữ liệu thanh toán.
Trưởng nhómĐồ án học thuật · API giả lập
Mã nguồnTHE BAD HATSBộ sưu tập 03
EVERYDAY ORIGINALS / 2026
Đội chất riêng.
↗01
The Everyday320.000 ₫
02
The Weekender350.000 ₫
03
The Original290.000 ₫
Đã thêm The Everyday01
Bài toán
Xây dựng SPA thương mại điện tử phục vụ đồ án, kết nối duyệt sản phẩm, giỏ hàng, trạng thái đăng nhập và luồng checkout có kiểm tra dữ liệu.
Đóng góp của tôi
State & tích hợp API
Quản lý giỏ hàng bằng React Context và useState; dùng Redux Toolkit cho trạng thái đăng nhập, sản phẩm và đơn hàng. Tích hợp JSON Server qua Axios client dùng chung.
Form & route quản trị
Bổ sung trường bắt buộc khi checkout và kiểm tra giỏ hàng rỗng, xác nhận mật khẩu khi đăng ký, cùng bảo vệ route phía client cho danh sách đơn hàng quản trị.
Kết nối các thành phần
- 01React / Router
- 02Context: giỏ hàng · Redux: đăng nhập / sản phẩm / đơn hàng
- 03Axios client dùng chung
- 04JSON Server
State giỏ hàng và state Redux được tách riêng; Axios client kết nối ứng dụng với API giả lập.
Một quyết định triển khai
CartProvider chia sẻ sản phẩm, số lượng và tổng tiền giữa cửa hàng và checkout. Redux Toolkit quản lý đăng nhập, sản phẩm và đơn hàng theo từng slice. Axios client dùng chung tập trung cấu hình kết nối API giả lập.
Minh họa giao diện
THE BAD HATSBộ sưu tập 03
EVERYDAY ORIGINALS / 2026
Đội chất riêng.
↗01
The Everyday320.000 ₫
02
The Weekender350.000 ₫
03
The Original290.000 ₫
Đã thêm The Everyday01
Giao diện được tái dựng cho portfolio. Toàn bộ dữ liệu chỉ dùng để minh họa.
Kết quả & giới hạn
Kết quả thực hiện
Triển khai cửa hàng, state giỏ hàng và ứng dụng, tích hợp API giả lập, kiểm tra form cơ bản và bảo vệ route quản trị phía client. Repository công khai cho phép xem mã nguồn triển khai.
Giới hạn của dự án
JSON Server cung cấp API giả lập. Bảo vệ route phía client không phải phân quyền backend. Bài viết không khẳng định có thanh toán thật, backend production hay triển khai thương mại.
05 / Liên hệ
Cùng xây dựng sản phẩm hữu ích.
Tôi đang tìm cơ hội fresher để đóng góp với React và TypeScript, đồng thời phát triển năng lực full-stack.
Gửi email