Stella Acoustics — Showroom & CMS Cáp Âm Thanh Cao Cấp

Showroom trực tuyến cho cáp âm thanh thủ công cao cấp, không bán hàng trực tiếp: mỗi sản phẩm công bố thông số đo lường thực tế, giao diện song ngữ và CMS quản trị riêng có tự động dọn dẹp ảnh.

LIVEFreelance
Demo
Năm
2026
Timeline
1 month
Tech stack
8 công nghệ

Xem qua sản phẩm

Desktop Preview

Ảnh desktop của Stella Acoustics — Showroom & CMS Cáp Âm Thanh Cao Cấp

Mobile Mockup

Ảnh mobile của Stella Acoustics — Showroom & CMS Cáp Âm Thanh Cao Cấp

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ế giao diện showroom tối giản, quản lý màu sắc, typography và khoảng cách bằng design token trong Tailwind CSS v4, hướng tới chuẩn tương phản WCAG AA.

  • Thiết kế schema dữ liệu bằng Drizzle ORM trên SQLite, chạy được với file local hoặc LibSQL trên cloud.

  • Phát triển CMS Admin: quản lý sản phẩm, thông số đo kiểm, các bộ sưu tập, bộ cáp phối ghép sẵn cho dàn máy (looms) và hộp thư liên hệ.

  • Xây dựng form liên hệ và đặt lịch nghe thử bằng React 19 Server Actions, có honeypot chống spam, lưu vào database và gửi thông báo.

  • Viết bộ unit test Vitest cho i18n, tính hợp lệ của thông số đo kiểm, validation form và xác thực admin.

  • Tối ưu SEO: metadata động, JSON-LD (Organization, Product), sitemap, robots.txt và ảnh OpenGraph tự tạo.

Luồng chính

  • Khách khám phá showroom theo các bộ sưu tập (Interconnect, Loa, Nguồn, Tín hiệu số), tra bảng thông số đo kiểm, chọn chiều dài và chuẩn jack (làm theo đơn đặt), rồi gửi yêu cầu báo giá hoặc đặt lịch nghe thử.

  • Khách gửi form liên hệ, Server Actions xác thực dữ liệu và kiểm tra honeypot, lưu vào database rồi gửi thông báo cho chủ thương hiệu qua email và webhook.

  • Admin đăng nhập, quản lý sản phẩm và tải ảnh trực tiếp, hệ thống lưu ảnh lên Vercel Blob hoặc ổ đĩa và tự xóa ảnh cũ khi bị thay thế.

Công nghệ

  • Next.js
  • React
  • TypeScript
  • Tailwind CSS
  • Drizzle ORM
  • SQLite / LibSQL
  • Vitest
  • Vercel Blob

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

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

Stella Acoustics là thương hiệu cáp âm thanh thủ công cao cấp với định vị không bán hàng trực tiếp: không giỏ hàng, không thanh toán, không hiển thị giá, mọi tương tác tập trung vào tư vấn và đăng ký buổi nghe thử (listening session). Yêu cầu đặt ra là xây dựng một showroom số theo phong cách tối giản với hệ thống design token chặt chẽ, trình bày rõ thông số đo lường vật lý (C, L, R, Z) của từng sản phẩm, cùng cấu trúc song ngữ gọn và một CMS quản trị riêng.

Quyết định kỹ thuật

  • Next 16 App Router và Proxy: dùng Proxy của Next.js 16 thay cho middleware để xử lý rewrite theo ngôn ngữ, giữ URL công khai gọn.

  • Design token chặt chẽ: màu sắc, typography và khoảng cách quản lý tập trung trong @theme của CSS, kiểm soát tỉ lệ tương phản chữ theo hướng WCAG AA và hỗ trợ prefers-reduced-motion.

  • Drizzle ORM + SQLite/LibSQL: mô hình dữ liệu gọn, khởi động nhanh, chạy được với file local lẫn SQLite trên cloud.

  • Kiểm thử thông số bắt buộc: test báo lỗi nếu sản phẩm thiếu thông số nền tảng (dây dẫn, tiết diện, cấu trúc, điện môi) hoặc thiếu số đo điện học (C, L, R, Z).

  • Lưu media theo môi trường: nhận diện môi trường chạy để lưu ảnh cục bộ hoặc trên Vercel Blob.

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

  • Typography tiếng Việt có dấu: luôn nạp subset Vietnamese và giữ line-height từ 1.1 trở lên ở heading để không bị xén dấu khi chữ hoa cỡ lớn.

  • Vòng đời file tải lên: đồng bộ việc xóa hoặc thay ảnh trong CMS với việc xóa file vật lý tương ứng để không còn ảnh mồ côi.

  • Bảo mật khu vực quản trị: đăng nhập có giới hạn số lần thử để hạn chế dò mật khẩu.

  • Định tuyến song ngữ không tiền tố cho trang public: URL gọn (/collections, /philosophy) nhưng vẫn phục vụ đúng bản dịch, thẻ canonical và hreflang nhất quán.

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

Showroom chạy trên Next.js 16 và React 19, dữ liệu lưu bằng SQLite/LibSQL qua Drizzle ORM. Bộ unit test Vitest kiểm tra tính hợp lệ của thông số vật lý, dữ liệu song ngữ và luồng form liên hệ. CMS Admin riêng cho phép quản lý sản phẩm, bộ cáp phối ghép sẵn (looms) và tự động dọn ảnh không còn được dùng trên Vercel Blob hoặc ổ đĩa.

  • Mọi sản phẩm đều có đủ thông số đo kiểm và được kiểm thử tự động, dữ liệu trình bày nhất quán.

  • Bàn giao CMS trực quan để chủ thương hiệu quản lý danh mục sản phẩm, bộ cáp phối ghép và liên hệ từ khách.

  • Trình bày thông số đo kiểm minh bạch trên từng sản phẩm, phù hợp định vị showroom không bán hàng trực tiếp của thương hiệu.

Điểm nổi bật

  • Kiểm thử dữ liệu bằng Vitest: mỗi sản phẩm phải có đủ thông số đo lường vật lý (C, L, R, Z), cấu trúc song ngữ và tùy chọn chế tác.

  • Định tuyến song ngữ bằng Next 16 Proxy: URL công khai không có tiền tố ngôn ngữ, trong khi khu vực quản trị vẫn dùng tiền tố ngôn ngữ riêng.

  • CMS Admin quản lý vòng đời ảnh: khi thay hoặc xóa ảnh, file tương ứng trên Vercel Blob hoặc ổ đĩa cũng được xóa để không tồn đọng ảnh không dùng.

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