Cái Tiệm Trái Cây là storefront tĩnh cho trái cây và nông sản, được dùng để thực hành cấu trúc một trang bán hàng trước khi đưa dữ liệu và backend vào FruitHub. Trang có hero, nhóm danh mục, sản phẩm, đánh giá và giỏ hàng dạng popup.
Bài toán chính là biến một lượng lớn ảnh, tên hàng, giá và thông điệp bán hàng thành luồng đọc dễ quét trên nhiều kích thước màn hình.
Người xem có thể mở menu, duyệt nhóm trái cây, rau củ, hạt, combo và giỏ quà, thao tác với khu vực giỏ hàng và chuyển qua nội dung đánh giá. Những tương tác này được xử lý trực tiếp bằng sự kiện DOM.
Layout ưu tiên hình sản phẩm và tín hiệu mua hàng, nhưng vẫn giữ khu vực giới thiệu cửa hàng và bằng chứng xã hội. Trên mobile, các khối được chuyển từ nhiều cột sang một luồng dọc để tránh thu nhỏ chữ và nút.
Danh mục dễ quét. Trái cây, rau củ, hạt, combo và giỏ quà được phân nhóm để người xem tìm loại hàng nhanh hơn.
Tương tác storefront bằng JavaScript thuần. Menu, cart popup, slider và các event DOM được xây dựng mà không dùng framework.
Bước chuyển từ UI sang e-commerce. Dự án giữ lại những tín hiệu mua hàng cốt lõi trước khi các luồng đó được mở rộng trong FruitHub.
HTML, CSS và JavaScript thuần là lựa chọn phù hợp với mục tiêu học nền tảng. Không có lớp component hay state library, nên menu, popup, slider và cập nhật giao diện đều phải được mô hình hóa bằng phần tử và event cụ thể.
CSS chịu trách nhiệm cho grid sản phẩm, khoảng cách, trạng thái hover và reflow; JavaScript chỉ thêm hành vi vào cấu trúc đã có. Cách tách này giúp trang vẫn giữ nội dung đọc được khi script chưa chạy.
Công nghệ sử dụng: HTML5, CSS3, JavaScript, SwiperJS.
Dự án được xây như một mốc học tập có chủ đích: hoàn thiện storefront tĩnh trước, sau đó mang các khái niệm catalog, cart và review sang FruitHub với API, tài khoản, tồn kho và đơn hàng thật.
Việc giữ phiên bản này trong portfolio cho thấy phần tiến bộ giữa hai dự án, từ thao tác DOM trực tiếp đến kiến trúc client và server có ranh giới nghiệp vụ rõ hơn.
