mythiep

Chủ thiệp muốn tự hoàn thiện một tấm thiệp trong một ngày: chọn mẫu, cá nhân hóa, gửi link và nhận phản hồi — không phải thuê designer và không phải trả phí hằng năm để giữ thiệp trực tuyến.

1. 01

   Puck làm trình chỉnh sửa canvas, chỉ nạp ở phần editor; thiệp công khai render bằng <Render> của Puck

   Lý do

   Puck mặc định xếp bố cục theo luồng, trong khi mẫu thiệp dùng vị trí tuyệt đối, nên mình chạy một spike giới hạn thời gian trên canvas tối giản trước khi viết schema. Spike cho thấy vị trí tuyệt đối dùng được khi chỉ gắn react-moveable ở phía editor, và editor không bao giờ được tải xuống máy khách mời.

2. 02

   Thanh toán SePay: form POST có chữ ký (HMAC-SHA256) và thông báo thanh toán được xác thực bằng secret header, mỗi thiệp trả một lần, giá Basic/Pro theo từng loại thiệp

3. 03

   Ảnh thiệp lưu trên Cloudflare R2 dưới dạng webp nhiều kích thước (768/1200/1600 px), phục vụ bằng srcset thay vì next/image

4. 04

   Next.js 16 và Prisma 7 trên PostgreSQL: app và Redis chạy trên VPS, cơ sở dữ liệu ở Supabase chỉ dùng như Postgres thuần (không dùng Supabase Auth, Storage hay Realtime)

5. 05

   Cloudflare Turnstile cho form RSVP và lời chúc, để thiệp công khai nhận phản hồi mà không cần tài khoản và hạn chế spam

1. Chọn mẫu thiệp
2. Trả tiền một lần (SePay VietQR)
3. Tự sửa trên trình duyệt
4. Xuất bản tại /thiep/[slug]
5. Khách xác nhận tham dự (RSVP)

Dịch vụ hỗ trợ

Dữ liệu

Prisma 7 trên PostgreSQL (Supabase)

Đăng nhập

Auth.js

Thanh toán

SePay (VietQR)

Ảnh

Cloudflare R2

Cache và hàng đợi

Redis

Giám sát

Sentry

• 51 mẫu thuộc sáu loại thiệp: cưới, sinh nhật, thôi nôi, tân gia, sự kiện và tốt nghiệp.
• Gói Basic sửa qua form; gói Pro mở trình chỉnh sửa canvas đầy đủ.
• Mua một lần cho mỗi tấm thiệp, thanh toán qua SePay VietQR.
• Khối RSVP, sổ mừng và bản đồ trên thiệp đã xuất bản.
• Khu quản trị cho loại thiệp, mẫu, bảng giá, đơn hàng và hóa đơn.
• Đang chạy tại mythiep.com.

Thông tin thêm

mẫu thiệp

51

DB migration

75

commit

1.700+

file test

900+