Growtrics

Growtrics là một EdTech startup hướng tới thị trường Singapore. Website đòi hỏi sự kết hợp giữa ngôn ngữ thương hiệu hiện đại, nội dung giáo dục và các hiệu ứng chuyển động mượt mà. Dự án do Phúc Bùi (phucbm) đảm nhận phát triển kỹ thuật độc lập dưới dạng freelance, trước khi thành lập Perxel.

Chỉ số kỹ thuật và tổng quan

• Thị trường mục tiêu: Singapore (EdTech startup)
• Phát triển kỹ thuật: Phúc Bùi
• Thời gian thực hiện: 3 tháng, từ khởi tạo đến bàn giao
• Frontend: Next.js 16 (App Router, TypeScript), Tailwind CSS, shadcn/ui
• Chuyển động: GSAP
• CMS: TinaCMS (Git-backed)
• Xử lý biểu mẫu: Google Sheets API
• Triển khai: Static Generation và client-side features trên Vercel

Bối cảnh dự án và quá trình bàn giao

Các điểm trọng tâm trong quá trình triển khai:

• Hiện thực hóa giao diện và tương tác. Chuyển bản thiết kế thành sản phẩm web thực tế, tích hợp các hiệu ứng chuyển động GSAP để tăng trải nghiệm tương tác với nội dung.
• Kiến trúc tinh gọn không phụ thuộc database. Tối ưu chi phí vận hành cho startup bằng cách loại bỏ hoàn toàn cơ sở dữ liệu và hệ thống backend phức tạp.
• Bàn giao cho team kỹ thuật nội bộ. Growtrics có tech team riêng, nên toàn bộ mã nguồn Next.js 16, cấu trúc TinaCMS và hệ thống component được tổ chức gọn gàng để việc tiếp quản diễn ra thuận lợi.

Chuyển động thị giác với GSAP và Next.js 16

Với một creative website, các hiệu ứng chuyển động đóng vai trò quan trọng trong việc truyền tải tinh thần sản phẩm. Dự án dùng GSAP kết hợp Next.js 16.

• Kể chuyện qua chuyển động. Các khối nội dung, hình ảnh và chỉ số phát triển được kích hoạt chuyển động theo thao tác cuộn trang của người dùng.
• Hiệu năng hiển thị. Dù chứa nhiều hiệu ứng, các kịch bản GSAP được tinh chỉnh để giữ tốc độ khung hình ổn định trên thiết bị di động.
• Hệ thống UI component chuẩn hóa. Tailwind CSS kết hợp shadcn/ui giúp nhất quán cấu trúc giao diện và giữ mã nguồn dễ bảo trì.

Hạ tầng tinh gọn: TinaCMS và Google Sheets API

Để hệ thống vận hành nhẹ mà không phát sinh chi phí máy chủ hàng tháng, dự án áp dụng mô hình không backend, không database.

Quản trị nội dung bằng TinaCMS

Toàn bộ nội dung bài viết và trang giới thiệu được lưu dưới dạng mã nguồn ngay trên Git repository, giúp việc biên tập và cập nhật diễn ra trực quan. Đây cũng là stack Perxel cung cấp trong dịch vụ Website Next.js & Headless CMS.

Thu thập biểu mẫu qua Google Sheets API

Thay vì dựng một database riêng chỉ để lưu danh sách đăng ký tư vấn hay nhận tin, các form trên website kết nối trực tiếp với Google Sheets API. Dữ liệu khách hàng điền trên website được đẩy thẳng về tệp Google Sheets của team Growtrics, loại bỏ chi phí lưu trữ database và giúp team vận hành tại Singapore quản lý dữ liệu trên công cụ quen thuộc.

Static Generation và triển khai trên Vercel

• Tốc độ tải trang. Website dùng cơ chế Static Generation của Next.js 16. Toàn bộ các trang được biên dịch thành tệp tĩnh từ quá trình build, cho tốc độ phản hồi nhanh khi người dùng truy cập.
• Triển khai tự động trên Vercel. Mỗi khi nội dung được xuất bản từ TinaCMS hoặc mã nguồn được cập nhật, Vercel tự động build và phân phối phiên bản mới lên CDN toàn cầu.

Kết quả

Growtrics kết hợp công nghệ hiển thị hiện đại (Next.js 16 và GSAP) với giải pháp dữ liệu tinh gọn (TinaCMS và Google Sheets API), mang đến cho một EdTech startup tại Singapore một website hoàn chỉnh và tối ưu chi phí vận hành. Quá trình chuyển bản vẽ lên sản phẩm thực tế bám sát cách Perxel làm việc với designer, xem thêm bàn giao thiết kế từ Figma.