Website nhecafe.com

Tổng quan dự án

Dự án website cho nhẹ cafe là một hành trình giàu cảm xúc và cảm hứng, được phát triển dựa trên tinh thần gìn giữ và lan tỏa giá trị văn hóa “Trăm Nghề” của vùng Kinh Bắc.

Trong dự án này, team đảm nhận vai trò phát triển (development) dựa trên thiết kế Figma có sẵn. Tuy nhiên, quá trình hiện thực hóa thiết kế không chỉ dừng lại ở việc chuyển đổi giao diện, mà còn là cơ hội để tiếp cận sâu hơn với tinh thần thương hiệu và câu chuyện văn hóa mà nhẹ cafe hướng tới.

Thông qua việc tối ưu trải nghiệm người dùng, xử lý tương tác và đảm bảo tính nhất quán giữa thiết kế và sản phẩm thực tế, website được hoàn thiện với mục tiêu giữ trọn vẹn bản sắc văn hóa Việt trong một diện mạo hiện đại, tinh tế.

Sản phẩm cuối cùng đóng vai trò như một cầu nối, giúp đưa những giá trị truyền thống đến gần hơn với giới trẻ thông qua trải nghiệm số mượt mà, trực quan và giàu cảm hứng.

Dự án không thể hoàn thành nếu thiếu sự đồng hành và nỗ lực từ toàn bộ team. Xin gửi lời cảm ơn đến chị Dung Đỗ, ux/ui designer Duong Tran Anh, cùng team content vì sự tận tâm và làm việc chăm chỉ trong suốt quá trình thực hiện. Chính sự phối hợp chặt chẽ và tinh thần trách nhiệm của mọi người đã góp phần tạo nên một sản phẩm hoàn chỉnh và giàu giá trị.

Thách thức

Ban đầu, cả phía client và team phát triển đều định hướng sử dụng WordPress với Full Site Editing cho dự án, nhờ vào tính phổ biến và khả năng bàn giao dễ dàng. Tuy nhiên, trong quá trình triển khai, một số thách thức đã xuất hiện.

Thiết kế Figma của dự án chứa nhiều yếu tố trang trí phức tạp, đặc biệt là các chi tiết hoa văn và SVG mang đậm tính thủ công. Những yếu tố này khó có thể tái hiện chính xác bằng hệ thống builder của WordPress. Bên cạnh đó, việc đảm bảo tính đồng nhất giữa giao diện thiết kế và giao diện chỉnh sửa (builder/live editing) cho team content cũng là một bài toán không đơn giản.

Trong thực tế, việc sử dụng builder template thường gây khó khăn cho team content, đặc biệt trong việc phân biệt đâu là layer nội dung cần chỉnh sửa. Điều này ảnh hưởng trực tiếp đến trải nghiệm vận hành và hiệu quả làm việc của team sau khi bàn giao.

Giải pháp

Trước những thách thức đó, team đã quyết định chuyển hướng sang kiến trúc Headless CMS.

Next.js được lựa chọn để phát triển frontend, cho phép kiểm soát tốt hơn việc hiển thị giao diện và đảm bảo độ chính xác so với thiết kế ban đầu. Ở phía CMS, WordPress được sử dụng theo hướng headless, kết hợp với ACF plugin để quản lý nội dung. Giải pháp này giúp team content vẫn có thể làm việc trên một giao diện quen thuộc như Gutenberg, đồng thời giữ được sự linh hoạt và rõ ràng trong việc cập nhật nội dung.

Sau một năm vận hành, team tiếp tục tối ưu hệ thống bằng cách chuyển CMS sang Sanity. Dù việc rời bỏ WordPress - một stack quen thuộc - là một quyết định không dễ dàng, Sanity đã chứng minh được những lợi thế vượt trội trong cả trải nghiệm cho team content lẫn hiệu quả phát triển cho team dev.

Với khả năng tùy biến cao, cấu trúc dữ liệu linh hoạt và hiệu năng tốt, Sanity không chỉ đáp ứng tốt nhu cầu hiện tại mà còn mở rộng tiềm năng cho các sản phẩm trong tương lai, bao gồm cả ứng dụng mobile và các nền tảng số khác.