Website giới thiệu dịch vụ và sản phẩm của Voi 3D Lab, kết hợp storefront và hệ thống quản trị nội dung. Nền tảng cho phép quản lý sản phẩm, dự án, banner, thông tin doanh nghiệp và hình ảnh thông qua Admin Dashboard, sử dụng Next.js, Supabase và Cloudinary.
Câu chuyện dự án
Quá trình, quyết định và kết quả nổi bật của dự án.
Tổng quan
Voi 3D Lab là website được xây dựng nhằm giới thiệu xưởng in 3D, các sản phẩm và dự án đã thực hiện, đồng thời cung cấp một hệ thống quản trị để chủ website có thể chủ động cập nhật nội dung mà không cần chỉnh sửa source code.
Hệ thống gồm hai phần chính:
Storefront
và
Admin Dashboard
Storefront phục vụ người dùng cuối với các trang sản phẩm, dự án, giới thiệu, liên hệ và báo giá. Admin Dashboard chịu trách nhiệm quản lý dữ liệu, hình ảnh và nội dung hiển thị trên toàn website.
Kiến trúc tổng thể:
Visitor
↓
Next.js Storefront
↓
Server Components / Server Actions
↓
Supabase PostgreSQL
+
Cloudinary
Quyền quản trị được kiểm tra ở phía server trước khi thực hiện các thao tác ghi dữ liệu, thay vì chỉ dựa vào việc ẩn giao diện trên client.
Dashboard hỗ trợ quản lý:
Products · Projects · Banners · Site Information · SEO · Media
và có khu vực tổng quan để theo dõi dữ liệu chính của website.
Media Management
Hình ảnh sản phẩm, dự án và banner được lưu trữ bằng Cloudinary.
Pipeline upload:
Admin
↓
Select Image
↓
Request Signed Upload
↓
Cloudinary
↓
Image URL + Public ID
↓
Supabase
Signed upload chỉ được tạo sau khi server kiểm tra session và quyền admin.
Khi hình ảnh được thay thế hoặc record bị xóa, hệ thống có cơ chế dọn asset Cloudinary cũ.
Cách tổ chức này giúp media storage được tách khỏi application server và database.
Modular Next.js Architecture
Project được tổ chức theo kiến trúc modular monolith.
src/
├── app/
├── modules/
├── lib/
└── ui/
Trong đó:
app chịu trách nhiệm routing và metadata.
modules chứa business logic theo từng domain.
lib chứa integration với Supabase và Cloudinary.
ui chứa các component và layout dùng lại.
Các domain như products, projects, auth, home, site, contact và i18n được tách riêng thay vì đặt toàn bộ logic trong app/.
SEO & Internationalization
Website hỗ trợ nội dung:
Tiếng Việt / English
cho các thành phần chính như sản phẩm, dự án, thông tin doanh nghiệp và banner.
Bên cạnh đó project triển khai các thành phần SEO cơ bản:
Dynamic Metadata.
Open Graph.
Sitemap.
Robots.
SEO image.
Alt text cho hình ảnh.
Điều này phù hợp với một website doanh nghiệp cần hiển thị tốt trên công cụ tìm kiếm và khi chia sẻ lên mạng xã hội.
Điểm nổi bật
Storefront + CMS
Không chỉ xây dựng giao diện giới thiệu doanh nghiệp mà còn triển khai Admin Dashboard để quản lý nội dung thực tế.
Modular Next.js Architecture
Business logic được chia theo từng domain thay vì đặt trực tiếp vào route hoặc page component.
Supabase Integration
Sử dụng:
Supabase Auth · PostgreSQL · RLS
cho authentication, database và kiểm soát quyền truy cập.
Cloud Media Storage
Cloudinary chịu trách nhiệm lưu trữ hình ảnh, trong khi database chỉ giữ URL và public ID.
Dynamic Content & SEO
Thông tin doanh nghiệp, sản phẩm, dự án, banner và metadata đều có thể được quản lý từ backend.
Bilingual Website
Nội dung chính được thiết kế hỗ trợ đồng thời tiếng Việt và tiếng Anh.
Kết quả
Project hoàn thiện một website doanh nghiệp full-stack cho lĩnh vực in 3D, kết hợp giữa giao diện giới thiệu dịch vụ và hệ thống quản trị nội dung.
Các thành phần chính được kết nối theo luồng:
Storefront
→ Products & Projects
→ Admin Dashboard
→ Authentication
→ Content Management
→ Media Management
→ SEO & Internationalization
Điểm giá trị của project là chuyển một website doanh nghiệp thông thường thành một hệ thống có khả năng quản lý nội dung động, cho phép người quản trị cập nhật sản phẩm, dự án, hình ảnh và thông tin website mà không cần can thiệp trực tiếp vào source code.
Thông qua project, mình có cơ hội thực hành và củng cố các kỹ năng về Next.js Full-stack Development, Modular Architecture, Supabase, Authentication & Authorization, Cloud Storage, CMS Development và SEO.
