Thiết kế website quản lý bán lẻ đồ

WEBSITE BÁN ĐỒ NGHỀ - VẬT TƯ LÀM NAIL (SONG NGỮ VI/EN) Dự án trọn gói: tôi làm từ khảo sát yêu cầu, thiết kế kiến trúc, lập trình backend + frontend, đến đóng gói triển khai lên VPS và viết tài liệu hướng dẫn sử dụng cho chủ shop. --- BÀI TOÁN --- Shop bán đồ nghề làm nail (máy hơ, máy hút bụi, set sơn, đầu mài, cọ, base/top, phụ kiện...) cần một website vừa giới thiệu sản phẩm vừa nhận đơn. Chủ shop KHÔNG muốn thanh toán online và KHÔNG muốn khách phải đăng ký tài khoản - thực tế bán hàng của họ là nhân viên gọi điện tư vấn rồi chốt đơn, thu tiền khi giao (COD). Vì vậy tôi cắt bỏ hẳn phân hệ tài khoản khách và cổng thanh toán, thiết kế luồng "đơn liên hệ (lead)": khách chọn hàng vào giỏ -> để lại số điện thoại -> hệ thống lưu đơn kèm ảnh chụp giá tại thời điểm đặt -> nhân viên gọi lại. Cách này giảm đáng kể chi phí làm và chi phí vận hành, đồng thời đúng với cách shop đang bán. --- CHỨC NĂNG PHÍA KHÁCH --- * Trang chủ: slider banner do admin tự upload (kèm chọn điểm lấy nét ảnh để không bị cắt mất chủ thể), khu sản phẩm mới / sản phẩm hot, danh mục nổi bật, khu khuyến mãi, khối video giới thiệu. * Danh sách sản phẩm: lọc nhiều danh mục, lọc theo tag (chip gom nhóm: màu sắc, loại sơn, công suất...), thanh kéo khoảng giá, tìm kiếm, phân trang. * Chi tiết sản phẩm: gallery ảnh cuộn ngang có scroll-snap (vuốt mượt trên điện thoại, kéo chuột trên desktop), rê chuột vào ảnh nhỏ là ảnh lớn đổi ngay; khối mô tả full-width riêng bên dưới kèm video hướng dẫn. * Biến thể sản phẩm: 1 sản phẩm có nhiều cấu hình (sơn 8ml/15ml, đầu mài 80#/120#/180#...), mỗi biến thể có giá - giá giảm - tồn kho riêng; biến thể hết hàng bị mờ và không chọn được. * Tồn kho: hiển thị số lượng còn lại, hết hàng thì chặn thêm giỏ, và server từ chối đơn vượt tồn (không tin số liệu từ trình duyệt). * Giỏ hàng lưu ở trình duyệt (localStorage), không cần đăng nhập. * Trang đặt hàng: chọn khu vực giao để xem phí ship dự kiến (có ngưỡng freeship), nhập mã khuyến mãi, tùy chọn xuất hóa đơn (tên công ty, mã số thuế có kiểm tra định dạng). * Khuyến mãi: giá gốc gạch ngang + badge giảm %, khu "giảm giá sâu", flash sale có đồng hồ đếm ngược toàn site, danh sách mã giảm giá cho khách copy. * Song ngữ VI/EN: đổi ngôn ngữ đổi luôn tiền tệ (VI -> VNĐ, EN -> USD). Tỷ giá tự cập nhật qua API miễn phí, cache 24h, admin nhập tay đè được. Giá vẫn luôn lưu bằng VNĐ, USD chỉ là số quy đổi tham khảo. * Hệ thống trang chính sách do admin tự soạn (giá, bảo mật, đổi trả, giao hàng, thanh toán, khiếu nại...), có sẵn 9 trang mẫu song ngữ. * Hỗ trợ nhiều chi nhánh: mỗi cơ sở có tên/địa chỉ/SĐT/giờ mở cửa riêng + link Google Maps, hiển thị ở chân trang. * Khối thông tin chủ quản nền tảng ở chân trang theo quy định pháp luật về thương mại điện tử (tên công ty, mã số DN, ngày - nơi cấp, trụ sở, người đại diện), kèm huy hiệu Bộ Công Thương và DMCA. --- CHỨC NĂNG QUẢN TRỊ --- Khu /admin đăng nhập bằng JWT, gồm: quản lý danh mục, tag, sản phẩm (upload nhiều ảnh, biến thể, tồn kho, ẩn/hiện, nổi bật), banner, video, khu vực giao hàng, flash sale, mã khuyến mãi, trang chính sách, chi nhánh, link sàn TMĐT (Shopee/Lazada/Tiki...), cấu hình chung và đổi mật khẩu. Quản lý đơn: danh sách đơn mới nhất trước, xem chi tiết (món + số lượng + giá snapshot + thông tin liên hệ + hóa đơn), đổi trạng thái (mới / đã gọi / đã chốt / hủy) và ghi chú nội bộ. Thông báo đơn mới real-time về Discord (webhook) và/hoặc Telegram (bot): nhiều người nhận, mỗi dòng có nút "Gửi thử" và lưu trạng thái lần gửi gần nhất để admin tự sửa khi cấu hình sai. Việc gửi chạy nền - noti lỗi không bao giờ làm hỏng đơn của khách. --- CÔNG NGHỆ & KỸ THUẬT --- * Backend: Python 3.12 + FastAPI, SQLAlchemy 2.x, PostgreSQL 16. ~90 REST endpoint, 19 bảng dữ liệu, ~6.000 dòng code. * Frontend: ReactJS 18 + Vite, dựng tĩnh bằng vite-react-ssg - trang công khai được prerender ra HTML tĩnh nên tốt cho SEO, khu admin chạy client-side. ~70 component/trang, ~11.800 dòng code. CSS thuần, bộ icon SVG tự vẽ, không kéo thư viện UI nặng. * Bảo mật: mật khẩu bcrypt, JWT có hạn, toàn bộ route admin bọc kiểm quyền, CORS giới hạn origin, validate dữ liệu bằng Pydantic, rate-limit theo IP cho endpoint gửi đơn và đăng nhập, kiểm tra file upload bằng magic-bytes (không tin đuôi file) và giới hạn dung lượng. * SEO: meta/canonical/OG, JSON-LD Product, robots.txt và sitemap.xml sinh động theo dữ liệu thật. * Kiểm thử: 153 test case tự động (pytest + httpx) phủ đặt hàng, tồn kho, biến thể, khuyến mãi, tỷ giá, phân quyền, upload, sitemap... * Triển khai: đóng gói Docker Compose 3 service (PostgreSQL + FastAPI + nginx phục vụ React kiêm reverse proxy). Dữ liệu DB và ảnh upload nằm ngoài container nên xóa/dựng lại container không mất dữ liệu. Chạy toàn bộ hệ thống bằng 1 lệnh. --- CÁCH TÔI LÀM VIỆC --- Trước khi code, tôi viết PRD và tài liệu kiến trúc, mọi quyết định cắt bỏ phạm vi đều ghi lại lý do (ADR) để khách hiểu vì sao không làm cái này mà làm cái kia. Nguyên tắc xuyên suốt là tối giản: ưu tiên tính năng có sẵn của ngôn ngữ/trình duyệt trước khi thêm thư viện, tránh code thừa - vừa nhanh ra sản phẩm vừa dễ bảo trì về sau. Bàn giao kèm tài liệu hướng dẫn sử dụng cho người không rành kỹ thuật và hướng dẫn triển khai VPS.