In Nhanh Phước Lộc Thọ — Nền tảng In Kỹ Thuật Số & Báo Giá Tự Động

Xây dựng lại website xưởng in 15+ năm kinh nghiệm: giữ nguyên cấu trúc URL cũ cho hơn 580 trang, công cụ tính giá in tức thì và hệ thống CMS quản trị riêng.

LIVEFreelance
Demo
Năm
2026
Timeline
2 months
Tech stack
9 công nghệ

Xem qua sản phẩm

Desktop Preview

Ảnh desktop của In Nhanh Phước Lộc Thọ — Nền tảng In Kỹ Thuật Số & Báo Giá Tự Động

Mobile Mockup

Ảnh mobile của In Nhanh Phước Lộc Thọ — Nền tảng In Kỹ Thuật Số & Báo Giá Tự Động

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ế lại giao diện theo nhận diện xưởng in (bản in chồng màu), responsive trên mobile, tablet và desktop.

  • Viết script di chuyển và chuẩn hóa dữ liệu của hơn 580 bài viết, dịch vụ, sản phẩm và trang tĩnh từ hệ thống cũ sang cơ sở dữ liệu mới.

  • Xây dựng pipeline xử lý ảnh bằng Sharp: lấy lại ảnh gốc độ phân giải cao thay cho thumbnail 280px và chuyển sang WebP.

  • Phát triển Admin CMS độc lập: quản lý sản phẩm, tin tức, dịch vụ, trang tĩnh, thông tin liên hệ và tin nhắn khách gửi.

  • Tích hợp trình soạn thảo Tiptap hỗ trợ định dạng bài viết và tải ảnh trực tiếp.

  • Triển khai production với HTTPS.

Luồng chính

  • Khách duyệt danh mục sản phẩm/dịch vụ, dùng công cụ tính giá in A4, rồi gửi form liên hệ hoặc yêu cầu báo giá.

  • Khách truy cập URL cũ từ Google (*.html), middleware 301 redirect sang trang chi tiết mới.

  • Admin đăng nhập (Auth.js), soạn thảo nội dung bằng Tiptap và lưu qua Server Actions, trang public được revalidate ngay sau khi lưu.

  • Khách gửi tin nhắn liên hệ, dữ liệu được lưu vào ContactMessage để admin theo dõi và đánh dấu đã đọc/chưa đọc.

Công nghệ

  • Next.js
  • React
  • TypeScript
  • Tailwind CSS
  • Prisma
  • PostgreSQL
  • Auth.js
  • Tiptap
  • Sharp

Cách mình giải quyết

Bài toán cần giải quyết

Website cũ vận hành từ năm 2013 trên nền PHP, giao diện và trải nghiệm di động chưa còn phù hợp, nhưng đã tích lũy lượng lớn nội dung được Google lập chỉ mục: hơn 580 URL gồm 14 dịch vụ, 102 sản phẩm và 466 bài viết. Yêu cầu đặt ra là xây dựng lại nền tảng trên Next.js App Router, bổ sung công cụ tính giá in nhanh và CMS riêng, đồng thời giữ nguyên cấu trúc URL cũ (đuôi .html) để không làm gián đoạn SEO.

Quyết định kỹ thuật

  • Next.js App Router và React 19: dùng React Server Components để render trang public nhanh, Server Actions cho các thao tác CMS.

  • Middleware xử lý 301 redirect: chặn ngay ở tầng request, trước khi vào render pipeline, để URL cũ chuyển hướng gọn cho cả người dùng và Googlebot.

  • Lấy lại ảnh gốc độ phân giải cao thay cho thumbnail mờ 280px trước khi chuyển sang WebP, để ảnh sắc nét hơn và tải nhẹ hơn.

  • Prisma + PostgreSQL cho dữ liệu có quan hệ (sản phẩm, dịch vụ, bài viết, tin nhắn liên hệ), Zod để validate form ở Server Actions.

Bài toán phức tạp

  • Chuẩn hóa dữ liệu từ hệ thống cũ: loại bỏ inline CSS thừa, thống nhất taxonomy danh mục bài viết và cập nhật lại liên kết ảnh nội bộ.

  • Đối chiếu công thức tính giá in ấn với hệ thống cũ để kết quả nhất quán ở các mức số lượng và loại giấy.

  • Giữ tính nhất quán SEO khi chuyển nền tảng: dynamic sitemap, JSON-LD LocalBusiness & Article, giữ nguyên slug bài viết.

  • Giữ form state trên React 19 khi Server Actions trả về lỗi validation từ Zod, để admin không mất nội dung đang nhập.

Kết quả đạt được

Nền tảng mới chạy trên Next.js 16 và React 19 với Prisma + PostgreSQL. Toàn bộ URL cũ được ánh xạ sang URL mới bằng middleware 301 redirect, công cụ tính giá in A4 cho kết quả khớp với hệ thống cũ trên các bộ test đối chiếu, và CMS tích hợp trình soạn thảo Tiptap cùng On-demand Revalidation giúp nội dung cập nhật ngay trên trang public.

  • Giữ nguyên cấu trúc URL cũ thông qua 301 redirect, hạn chế rủi ro mất index khi chuyển nền tảng.

  • Ảnh sản phẩm chuyển sang WebP, trang public tải nhẹ hơn.

  • Khách hàng ước tính được giá in ngay trên website thay vì trao đổi thủ công.

  • Bàn giao CMS trực quan để doanh nghiệp tự cập nhật nội dung và quản lý liên hệ từ khách.

Điểm nổi bật

  • Giữ nguyên SEO cũ: middleware Next.js nhận diện các URL đuôi .html và 301 redirect sang URL slug mới cho hơn 580 trang.

  • Công cụ tính giá in A4 tức thì: cài đặt công thức định giá bậc thang theo số lượng, kiểm thử bằng Vitest để đối chiếu kết quả với hệ thống cũ.

  • Cache trang public kết hợp On-demand Revalidation: trang tải nhanh từ server cache và được làm mới ngay khi admin cập nhật nội dung.

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

Email

hello@thelittlecoder.dev
Bắt đầu trao đổi