Boilerplate tĩnh để phát triển skin e-commerce Hàn Quốc (HTMX + Vite + TypeScript)

Xin chào, mình là một lập trình viên đang làm backend trong lĩnh vực e-commerce!

Trong e-commerce Hàn Quốc, frontend thường được xây dựng dưới dạng skin trên các nền tảng như cafe24, Godomall & Shopby, hay Makeshop.
Vì đa phần chỉ hỗ trợ static serving nên ở quy mô doanh nghiệp vừa và nhỏ, việc dùng các framework SPA như React đôi khi khá khó khăn.

Hiện vẫn còn nhiều nơi sử dụng legacy stack dựa trên jQuery hoặc Handlebars, và cũng có không ít trường hợp cấu trúc file hoàn toàn không được tổ chức, khiến hàng chục file bị rối tung trong thư mục. Việc tái sử dụng component cũng thường rất khó, huhu.

Vì vậy mình đã thử tạo một boilerplate e-commerce được tổ chức gọn gàng chỉ với HTML/JS/CSS.
Đây là cấu trúc mà bạn chỉ cần viết thêm phần code liên quan đến API rồi gắn vào để dùng!

Tech stack

• HTMX 2.0 — điều hướng SPA dựa trên HTML fragment
• Vite 7 — công cụ build + máy chủ phát triển HMR
• TypeScript — bundle độc lập theo từng component
• Embla Carousel — banner parallax, carousel sản phẩm
• CSS thuần — hệ thống design token dựa trên CSS custom properties, không dùng Tailwind

Các trang đã được triển khai

• Trang chủ (carousel banner, danh mục, carousel sản phẩm, bảng xếp hạng, review, thông báo)
• Danh sách sản phẩm (sidebar danh mục, bộ lọc, bố cục lưới)
• Chi tiết sản phẩm (gallery ảnh, cascade option, điều chỉnh số lượng, tab, review lightbox)
• Bảng tin (thông báo, FAQ, chi tiết bài viết)
• Sự kiện (danh sách sự kiện, đồng hồ đếm ngược, chi tiết)
• Trang cá nhân (hạng thành viên, thống kê đơn hàng, coupon/điểm tích lũy)
• Lịch sử đơn hàng (bộ lọc theo ngày, danh sách thẻ đơn hàng)

Demo & mã nguồn

• Demo: https://hebububu.github.io/static-htmx-ecommerce/
• GitHub: https://github.com/Hebububu/static-htmx-ecommerce

Bạn có thể tự do clone và sử dụng mà không cần giấy phép!
Mình cũng rất hoan nghênh mọi góp ý hoặc ý tưởng cải tiến!