Faifo Art — Website Xưởng Vẽ Thủ Công Hội An
Website song ngữ Anh – Việt cho một xưởng vẽ ở Hội An: giới thiệu các trải nghiệm vẽ đèn lồng, nón lá, túi cói, tranh canvas kèm bảng giá, và form đặt lịch gửi email cho cả xưởng lẫn khách.
- Năm
- 2026
- Tech stack
- 5 công nghệ
Xem qua sản phẩm
Desktop Preview
Mobile Mockup
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ế và dựng giao diện theo nhận diện của xưởng, màu và typography quản lý bằng design token trong Tailwind CSS v4.
Định tuyến song ngữ /en và /vi, đặt đúng thuộc tính lang cho từng ngôn ngữ, có nút chuyển ngôn ngữ.
Trang các trải nghiệm vẽ với bảng giá theo từng loại sản phẩm.
Form đặt lịch bằng Server Actions, gửi email qua Resend cho xưởng và cho khách.
Thanh đặt lịch cố định trên mobile và ảnh OpenGraph tự tạo theo ngôn ngữ.
Luồng chính
Khách xem các trải nghiệm và giá, chọn ngày, ca, số người và loại trải nghiệm, rồi gửi yêu cầu đặt lịch.
Máy chủ kiểm tra dữ liệu, gửi email cho xưởng và email xác nhận cho khách, sau đó mới hiển thị thông báo thành công.
Công nghệ
- Next.js
- React
- TypeScript
- Tailwind CSS
- Resend
Cách mình giải quyết
Bài toán cần giải quyết
Faifo Art là xưởng vẽ thủ công ở Hội An, khách tự tay vẽ đèn lồng, nón lá, túi cói hoặc tranh canvas. Phần lớn khách là du khách nên website cần có cả tiếng Anh và tiếng Việt, trình bày rõ từng trải nghiệm và mức giá, và cho khách đặt lịch theo đúng lịch hoạt động của xưởng.
Quyết định kỹ thuật
Màu cam của logo chỉ đạt độ tương phản thấp trên nền kem, nên chữ dùng một tông cam đậm hơn đạt chuẩn WCAG, còn màu gốc chỉ dùng cho chi tiết trang trí.
Nội dung để trong các file dữ liệu thay vì viết thẳng trong JSX, để sau này sửa chữ hoặc giá không phải động vào component.
Validation đặt lịch tách thành module riêng để dễ đổi sang dịch vụ đặt lịch khác mà không viết lại form.
Kết quả đạt được
Website Next.js 16 phục vụ mọi trang ở /en và /vi, gồm trang chủ dạng editorial và trang đặt lịch. Form đặt lịch kiểm tra dữ liệu ở máy chủ, rồi gửi một email cho xưởng và một email xác nhận cho khách qua Resend.
Điểm nổi bật
Nội dung tách thành dữ liệu, mỗi đoạn chữ là một cặp { en, vi } có kiểu TypeScript, nên thiếu bản dịch sẽ báo lỗi khi build thay vì hiển thị sai.
Validation đặt lịch tách riêng khỏi React và Server Actions: chỉ nhận thứ Tư đến thứ Bảy, hai ca 9:00 và 15:00, không nhận ngày đã qua.
Nếu email không gửi được, form báo lỗi thay vì báo đặt thành công, để khách không tưởng đã có chỗ trong khi xưởng không nhận được gì.
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
- GitHubgithub.com/Finnng1104
- LinkedInlinkedin.com/in/finnng1104
- ResumeResume (PDF)