Wine Family — Web Bán Rượu Ngoại & Trang Quản Trị

Website bán rượu ngoại nhập khẩu: khách chọn hàng, đặt đơn để cửa hàng gọi lại xác nhận, còn chủ shop tự quản lý sản phẩm, đơn hàng, khuyến mãi và nội dung trong trang quản trị riêng.

LIVEFreelance
Năm
2026
Tech stack
8 công nghệ

Xem qua sản phẩm

Desktop Preview

Ảnh desktop của Wine Family — Web Bán Rượu Ngoại & Trang Quản Trị

Mobile Mockup

Ảnh mobile của Wine Family — Web Bán Rượu Ngoại & Trang Quản Trị

Phạm vi & vai trò của mình

Fullstack Developer (Solo / End-to-End)

Phạm vi sản phẩm

  • Thiết kế schema dữ liệu bằng Prisma trên PostgreSQL: sản phẩm, danh mục, đơn hàng, khách hàng, bài viết, banner, chi nhánh, thiết lập.

  • Xây dựng web bán hàng: trang chủ nhiều khối, danh mục có lọc và phân trang, trang sản phẩm, giỏ hàng, đặt đơn, tài khoản khách hàng và blog.

  • Tìm kiếm gợi ý sản phẩm ngay khi đang gõ, cả ở thanh header lẫn trang tìm kiếm.

  • Xây dựng trang quản trị: sản phẩm, đơn hàng, khách hàng, bài viết, banner, nội dung tĩnh, thiết lập và tài khoản admin, có lọc và phân trang.

  • Soạn bài viết và trang tĩnh bằng trình soạn thảo rich-text (Tiptap), nội dung HTML được lọc trước khi lưu.

  • Viết unit test cho tính đơn hàng, giảm giá, phiên đăng nhập, mật khẩu, múi giờ, lọc HTML và giới hạn tần suất.

  • SEO cơ bản, trang lỗi và trang 404. Triển khai production với HTTPS.

Luồng chính

  • Khách xem danh mục hoặc tìm sản phẩm, thêm vào giỏ, điền thông tin liên hệ và đặt đơn; cửa hàng nhận đơn trong trang quản trị rồi gọi lại xác nhận.

  • Khách đăng ký tài khoản để xem lại đơn đã đặt; đơn đặt khi đã đăng nhập được gắn vào tài khoản đó.

  • Admin đăng nhập, cập nhật trạng thái đơn, sửa sản phẩm, đăng bài viết, thay banner và đặt các mức giảm giá Big Sale.

Công nghệ

  • Next.js
  • React
  • TypeScript
  • PostgreSQL
  • Prisma
  • CSS Modules
  • Tiptap
  • Node.js test runner

Cách mình giải quyết

Bài toán cần giải quyết

Wine Family bán rượu vang và rượu ngoại nhập khẩu, chốt đơn bằng cách gọi lại cho khách chứ không thanh toán trực tuyến. Cửa hàng cần một web bán hàng có danh mục, tìm kiếm, giỏ hàng và đặt đơn, cùng trang quản trị để tự sửa mọi thứ: sản phẩm, banner, bài viết, FAQ, trang chính sách, chi nhánh. Danh mục hàng có sẵn trong file kho Excel nên cần đưa vào hệ thống mà không phải gõ tay.

Quyết định kỹ thuật

  • Tách root layout của web bán hàng và trang quản trị: trang admin không tải header, footer, giỏ hàng hay các truy vấn phục vụ menu, mà đường dẫn vẫn giữ nguyên.

  • Không dùng thư viện băm mật khẩu cần biên dịch native, chọn scrypt có sẵn trong Node để cài đặt trên máy chủ ổn định hơn.

  • Ngày giờ (mã đơn theo ngày, đếm đơn trong ngày) tính theo giờ Việt Nam thay vì giờ máy chủ.

  • Mức giảm giá Big Sale do admin nhập dạng chữ: mức nào nhập sai thì bỏ qua thay vì làm hỏng cả tính năng, hoá đơn đạt nhiều mức thì lấy mức có ngưỡng cao nhất.

Bài toán phức tạp

  • Không tin dữ liệu từ trình duyệt: giá, tên sản phẩm và chủ đơn đều do server tự xác định, kèm giới hạn số dòng và số lượng trong một đơn.

  • Script nhập kho đọc thêm thông tin nằm lẫn trong tên hàng và tên nhóm (nồng độ, xuất xứ), sinh slug tiếng Việt không dấu, giữ nguyên ảnh và mô tả đã có, và chưa đưa lên web sản phẩm thiếu giá.

  • Chuyển nội dung bài viết cũ sang HTML cho trình soạn thảo mới bằng script có chế độ xem trước, bỏ qua nội dung đã chuyển nên chạy lại an toàn.

  • Đăng nhập admin, tài khoản khách và đặt đơn đều có giới hạn tần suất.

Kết quả đạt được

Web chạy trên Next.js 16 với PostgreSQL qua Prisma, web bán hàng và trang quản trị là hai khu vực tách biệt. Đơn hàng được tạo ở server với giá tra từ database, giá chốt được lưu vào từng dòng đơn. Chủ shop quản lý sản phẩm, đơn hàng, khách hàng, bài viết, banner và mức giảm giá ngay trong trang quản trị. Logic quan trọng có unit test chạy bằng node:test.

Điểm nổi bật

  • Đặt đơn an toàn về giá: giỏ hàng nằm ở trình duyệt nên server chỉ nhận mã hàng và số lượng, tự tra giá hiện tại trong database và lưu giá chốt vào từng dòng đơn, để sau này đổi giá thì đơn cũ vẫn đúng.

  • Nhập sản phẩm từ file kho Excel: script đối chiếu theo SKU, chạy thử trước khi ghi, báo dòng trùng hoặc thiếu dữ liệu, chạy lại nhiều lần không tạo bản ghi trùng.

  • Mọi nội dung khách có thể muốn sửa (thông tin liên hệ, FAQ, trang chính sách, chi nhánh, banner, video) đều nằm trong database và sửa được trong trang quản trị, không viết cứng trong code.

Kết nối với mình

Cảm ơn bạn đã ghé thăm góc nhỏ của mình. Rất mong chúng ta sẽ có dịp trò chuyện và hợp tác!

Mình luôn cởi mở với những cuộc trò chuyện về phát triển sản phẩm, ứng dụng AI hay các ý tưởng khởi nghiệp. Cứ thoải mái ném thẳng một tin nhắn cho mình nhé!

Nhận hợp tác chọn lọc · trả lời trong ngày

Email

hello@thelittlecoder.dev
Bắt đầu trao đổi