Hi mọi người, mình vừa làm xong một project nho nhỏ tên là MemorySite — một web app lưu giữ kỷ niệm mà mình vừa thử sức "vibe code" cùng AI.
Ý tưởng bắt đầu từ một câu hỏi: Nếu 10 năm nữa mở lại điện thoại, bạn có còn nhớ trọn vẹn câu chuyện phía sau những bức ảnh này không?
Ảnh thì ngày càng nhiều, nhưng những câu chuyện và cảm xúc phía sau chúng lại rất dễ bị trôi mất. Vì thế mình muốn tạo ra một “cuốn album online” có cảm xúc, có âm nhạc và có thể chia sẻ dễ dàng qua link hoặc mã QR để in lên thiệp, quà tặng:
Hành trình tình yêu đôi lứa
Kể câu chuyện ngày cưới
Ghi lại cột mốc lớn lên của con
Quà tặng kỷ niệm riêng cho bạn bè, người thân
Bộ mã nguồn & Tech stack mình dùng:
:
MemorySite hiện vẫn đang hoàn thiện, toàn bộ dữ liệu trên web đều là mock để test tính năng. Mọi người ghé trải nghiệm thử và cho mình xin góp ý thật lòng nhé!
Nếu là bạn, bạn sẽ dùng MemorySite để lưu kỷ niệm gì?
Tình yêu
Ngày cưới
Hành trình của con
Làm quà tặng
Ý tưởng khác
(Link trải nghiệm mình để ở bình luận đầu tiên bên dưới ạ).
Ý tưởng bắt đầu từ một câu hỏi: Nếu 10 năm nữa mở lại điện thoại, bạn có còn nhớ trọn vẹn câu chuyện phía sau những bức ảnh này không?
Ảnh thì ngày càng nhiều, nhưng những câu chuyện và cảm xúc phía sau chúng lại rất dễ bị trôi mất. Vì thế mình muốn tạo ra một “cuốn album online” có cảm xúc, có âm nhạc và có thể chia sẻ dễ dàng qua link hoặc mã QR để in lên thiệp, quà tặng:
- Framework: Next.js 15 (App Router) & React 19
- Giao diện & Hiệu ứng: Tailwind CSS, Lucide Icons, hiệu ứng hạt Falling Hearts & khung ảnh Polaroid xoay góc ngẫu nhiên
- Ngôn ngữ: TypeScript & Zod (validate dữ liệu)
- Cơ sở dữ liệu: Drizzle ORM + PostgreSQL
- Tính năng phụ trợ: Next-Auth v5 (quản lý phiên đăng nhập) & thư viện tạo mã QR tự động
- Pha lệch sóng giao diện: Mình bảo AI “làm web kỷ niệm lãng mạn”, kết quả nó nhả ra giao diện khối hộp xám xịt chẳng khác gì phần mềm kế toán . Mình phải đổi cách prompt: đưa moodboard chi tiết, khóa palette màu hồng ấm kết hợp xanh thẫm, ép hiệu ứng rơi hạt trái tim và thẻ ảnh Polaroid thì nó mới ra đúng chất thơ.
- Bẫy Server vs Client Component: Lúc deploy dính lỗi màn hình trắng xóa của Next.js 15 do AI gom nhầm animation vào Server Component. Mình phải tự tay bóc tách các interactive component sang "use client" thì app mới mượt mà.
- Database linh hoạt: Nhiều mẫu kỷ niệm có cấu trúc dữ liệu khác nhau. Mình cùng AI chọn Drizzle ORM với một schema lõi kết hợp metadata JSON để dễ mở rộng mẫu mới mà không phải migrate DB liên tục.
- Pha lệch sóng giao diện: Mình bảo AI “làm web kỷ niệm lãng mạn”, kết quả nó nhả ra giao diện khối hộp xám xịt chẳng khác gì phần mềm kế toán
MemorySite hiện vẫn đang hoàn thiện, toàn bộ dữ liệu trên web đều là mock để test tính năng. Mọi người ghé trải nghiệm thử và cho mình xin góp ý thật lòng nhé!
Nếu là bạn, bạn sẽ dùng MemorySite để lưu kỷ niệm gì?
(Link trải nghiệm mình để ở bình luận đầu tiên bên dưới ạ).