Majestic Nail Care — Storefront Shopify headless & CMS riêng

Cửa hàng móng tay giả (press-on) chạy headless trên Shopify: storefront Next.js giá theo thị trường Canada và Mỹ, cùng trang quản trị riêng có chế độ sửa trực quan để chủ shop tự cập nhật nội dung và sản phẩm.

ĐANG PHÁT TRIỂNFreelance
Năm
2026
Tech stack
13 công nghệ

Xem qua sản phẩm

Desktop Preview

Ảnh desktop của Majestic Nail Care — Storefront Shopify headless & CMS riêng

Mobile Mockup

Ảnh mobile của Majestic Nail Care — Storefront Shopify headless & CMS riêng

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

Fullstack Developer (Solo / End-to-End)

Phạm vi sản phẩm

  • Storefront: trang chủ, bộ sưu tập có bộ lọc, trang sản phẩm, giỏ hàng, blog, trang hướng dẫn chọn size và cách dán móng, liên hệ, đăng ký nhận tin.

  • Trang quản trị: banner, menu, FAQ, chữ và ảnh các trang, sản phẩm và biến thể, bộ sưu tập, kiểu dáng móng, size, ưu đãi, đánh giá, đơn hàng và bảng tổng quan.

  • Tài khoản khách dùng Shopify Customer Account API: đăng nhập bằng mã gửi qua email, xem hồ sơ và đơn hàng ngay trên storefront.

  • Đánh giá sản phẩm qua Judge.me; SEO với metadata, canonical, sitemap và dữ liệu có cấu trúc cho sản phẩm.

  • Script kiểm tra cửa hàng Shopify trước khi triển khai, và script chuyển nội dung từ site cũ của khách sang.

  • Bộ video hướng dẫn dùng admin cho chủ shop, xem được ngay trong trang quản trị.

Luồng chính

  • Khách vào site, thấy giá theo thị trường của mình, lọc bộ sưu tập theo kiểu dáng và size, thêm vào giỏ rồi thanh toán trên Shopify.

  • Chủ shop mở chế độ sửa trực quan, bấm vào banner hoặc đoạn chữ trên trang, sửa và lưu, rồi thấy thay đổi ngay trong khung xem trước.

  • Chủ shop thêm một kiểu dáng móng mới, gắn sản phẩm và bộ sưu tập ngay trong cùng một màn.

Công nghệ

  • Next.js
  • React
  • TypeScript
  • Tailwind CSS
  • Shopify Storefront API
  • Shopify Admin API
  • Shopify Customer Account API
  • Upstash Redis
  • Judge.me
  • Radix UI
  • Embla Carousel
  • Vitest
  • Vercel

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

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

Majestic Nail Care bán móng tay giả (press-on) cho khách ở Canada và Mỹ trên Shopify. Khách muốn một storefront riêng, chủ động về giao diện, giữ cùng câu chuyện thương hiệu với site đang có, đồng thời có một trang quản trị đơn giản để tự sửa banner, chữ, ảnh, sản phẩm và bộ sưu tập mà không phải vào Shopify Admin.

Quyết định kỹ thuật

  • Nội dung lưu trong metaobject của Shopify thay vì một database riêng, để mọi dữ liệu của shop nằm một chỗ và không phải vận hành thêm hạ tầng.

  • Thông tin thương hiệu gom về một file cấu hình, vì khách đang đổi tên thương hiệu và cần đổi ở một chỗ thay vì nhiều file.

  • Giỏ hàng đọc lại giá và bỏ biến thể đã xoá trước khi sang checkout, để khách không thanh toán theo dữ liệu cũ.

  • Đánh giá chỉ đọc từ Judge.me, việc kiểm duyệt nằm trên dashboard của Judge.me.

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

  • Định tuyến theo thị trường: trang dựng sẵn cho từng thị trường nhưng URL công khai không đổi, nên cách làm mới trang sau khi sửa cũng phải tính lại.

  • Danh sách quyền của app quản trị phải khớp đúng khai báo trên Shopify; quyền với dữ liệu khách được bật ở mức Shopify yêu cầu.

  • Bộ sưu tập rỗng không hiện trên storefront, nên admin phải gộp thêm dữ liệu từ Shopify Admin để bộ vừa tạo vẫn chọn được.

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

Storefront Next.js đọc dữ liệu qua Shopify Storefront API, giá hiển thị theo thị trường Canada hoặc Mỹ, giỏ hàng chuyển sang checkout của Shopify. Trang quản trị tự viết lưu nội dung trong metaobject của Shopify và quản lý sản phẩm, biến thể, giá, bộ sưu tập, kiểu dáng móng, đánh giá và đơn hàng. Khách hàng đăng nhập bằng tài khoản Shopify để xem hồ sơ và đơn. Dự án đang chạy trên môi trường staging, kèm bộ video hướng dẫn dùng admin cho chủ shop.

Điểm nổi bật

  • Trang chủ, bộ sưu tập và sản phẩm được dựng sẵn cho từng thị trường; URL công khai vẫn gọn, thị trường chọn theo cookie.

  • Chế độ sửa trực quan: admin mở web khách trong khung xem trước, bấm vào vùng nào sửa vùng đó, lưu xong khung tự làm mới mà giữ nguyên vị trí cuộn.

  • Cache nội dung tách theo từng loại, lưu loại nào chỉ làm mới loại đó, nên mỗi lần sửa không bắt cả site gọi lại Shopify.

  • Bộ unit test Vitest cho giỏ hàng, định giá theo thị trường, dữ liệu có cấu trúc SEO, vùng sửa trực quan và kiểm tra dữ liệu đầu vào.

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