Cart popup
Cart trượt bên phải giúp theo dõi số lượng và giá tiền.
Báo cáo project
Cái Tiệm Trái Cây.
Landing page tĩnh giới thiệu cửa hàng nông sản sạch tích hợp slide danh mục SwiperJS, hiệu ứng giỏ hàng trượt và phần phản hồi khách hàng.
1 thành viên (Cá nhân)HTML5CSS3JavaScriptSwiperJS
Cuộn xuống để khám phá
Chức năng chính
Hiển thị nhóm trái cây, rau củ và giỏ quà bằng SwiperJS.
Đánh giá khách hàng
Khu vực review dạng slider tạo cảm giác đáng tin cậy.
Danh mục nhiều nhóm hàng
Tách trái cây, rau củ, hạt và combo để người xem scan sản phẩm nhanh.
Hero bán hàng rõ CTA
Hero truyền tải cửa hàng bán gì, vì sao đáng tin và hành động tiếp theo là gì.
DOM interaction thuần
Xử lý menu, popup, slider và event bằng JavaScript thuần để luyện nền tảng.
Responsive storefront
Layout thích nghi mobile/desktop cho một cửa hàng nhỏ có nhiều ảnh sản phẩm.
Payment trust visual
Hiển thị phương thức thanh toán như một tín hiệu tin cậy trong flow mua hàng.
Chức năng chính
Hiển thị nhóm trái cây, rau củ và giỏ quà bằng SwiperJS.
01
Cart popup
Cart trượt bên phải giúp theo dõi số lượng và giá tiền.
02
Đánh giá khách hàng
Khu vực review dạng slider tạo cảm giác đáng tin cậy.
03
Danh mục nhiều nhóm hàng
Tách trái cây, rau củ, hạt và combo để người xem scan sản phẩm nhanh.
04
Hero bán hàng rõ CTA
Hero truyền tải cửa hàng bán gì, vì sao đáng tin và hành động tiếp theo là gì.
05
DOM interaction thuần
Xử lý menu, popup, slider và event bằng JavaScript thuần để luyện nền tảng.
06
Responsive storefront
Layout thích nghi mobile/desktop cho một cửa hàng nhỏ có nhiều ảnh sản phẩm.
07
Payment trust visual
Hiển thị phương thức thanh toán như một tín hiệu tin cậy trong flow mua hàng.
Situation - Bối cảnh
Dự án được làm để luyện cách dựng một trang bán hàng có nhịp sản phẩm rõ, không chỉ là landing page giới thiệu.
Ngữ cảnh cửa hàng nhỏ
Một cửa hàng trái cây cần hiển thị nhiều mặt hàng, combo, review và tín hiệu thanh toán để người xem có cảm giác có thể mua ngay.
Tập trung UI trước backend
Ở giai đoạn này tôi cố ý làm static để luyện DOM, responsive, slider, cart popup và tổ chức asset trước khi sang e-commerce fullstack.
Asset sản phẩm phong phú
Repo có nhiều ảnh trái cây, rau củ, hạt, combo, giỏ quà và review, giúp giao diện có nội dung thật để xử lý layout.
Stack vừa đủ
HTML5, CSS3, JavaScript và SwiperJS phù hợp để làm slider/catalog mà không cần framework.
Vai trò trong portfolio
Project cho thấy quá trình đi từ static storefront lên FruitHub fullstack, giúp đường phát triển năng lực rõ hơn.
Situation - Bối cảnh
Dự án được làm để luyện cách dựng một trang bán hàng có nhịp sản phẩm rõ, không chỉ là landing page giới thiệu.
01
Ngữ cảnh cửa hàng nhỏ
Một cửa hàng trái cây cần hiển thị nhiều mặt hàng, combo, review và tín hiệu thanh toán để người xem có cảm giác có thể mua ngay.
02
Tập trung UI trước backend
Ở giai đoạn này tôi cố ý làm static để luyện DOM, responsive, slider, cart popup và tổ chức asset trước khi sang e-commerce fullstack.
03
Asset sản phẩm phong phú
Repo có nhiều ảnh trái cây, rau củ, hạt, combo, giỏ quà và review, giúp giao diện có nội dung thật để xử lý layout.
04
Stack vừa đủ
HTML5, CSS3, JavaScript và SwiperJS phù hợp để làm slider/catalog mà không cần framework.
05
Vai trò trong portfolio
Project cho thấy quá trình đi từ static storefront lên FruitHub fullstack, giúp đường phát triển năng lực rõ hơn.
Task - Nhiệm vụ
Cửa hàng có nhiều nhóm hàng nên nếu không chia category/slider, người xem sẽ khó scan và trang dễ dài vô tổ chức.
Cart chỉ là UI nhưng phải hợp lý
Dù chưa có backend, cart popup vẫn cần tạo cảm giác flow mua hàng: thêm sản phẩm, xem số lượng và quay lại catalog.
Responsive với nhiều ảnh
Ảnh sản phẩm nhiều kích thước dễ làm vỡ grid hoặc tràn text trên mobile nếu không kiểm soát layout.
Review cần tăng trust
Static site không có dữ liệu thật nên khu vực review/visual payment cần đóng vai trò social proof.
JS thuần phải gọn
Menu, popup và slider nếu viết rời rạc sẽ khó bảo trì; cần tách event theo chức năng.
Không nói quá phạm vi
Điểm mạnh là UI/interaction/static deploy, không phải order/payment thật.
Task - Nhiệm vụ
Cửa hàng có nhiều nhóm hàng nên nếu không chia category/slider, người xem sẽ khó scan và trang dễ dài vô tổ chức.
01
Cart chỉ là UI nhưng phải hợp lý
Dù chưa có backend, cart popup vẫn cần tạo cảm giác flow mua hàng: thêm sản phẩm, xem số lượng và quay lại catalog.
02
Responsive với nhiều ảnh
Ảnh sản phẩm nhiều kích thước dễ làm vỡ grid hoặc tràn text trên mobile nếu không kiểm soát layout.
03
Review cần tăng trust
Static site không có dữ liệu thật nên khu vực review/visual payment cần đóng vai trò social proof.
04
JS thuần phải gọn
Menu, popup và slider nếu viết rời rạc sẽ khó bảo trì; cần tách event theo chức năng.
05
Không nói quá phạm vi
Điểm mạnh là UI/interaction/static deploy, không phải order/payment thật.
Action - Quyết định & Thực thi
Tôi chia sản phẩm thành trái cây, rau củ, hạt, combo và giỏ quà để người xem scan nhanh hơn.
Dùng SwiperJS cho chuyển động
Tôi dùng SwiperJS cho product/review slider để tạo chuyển động có mục đích, tránh trang tĩnh quá phẳng.
Thiết kế cart popup
Tôi tạo cart trượt bên phải để mô phỏng bước xem giỏ hàng mà không rời trang.
Xử lý DOM bằng JS thuần
Tôi luyện event handling cho menu, popup, slider control và interaction thay vì dựa vào framework.
Dùng asset thật để kiểm UI
Tôi kiểm tra layout với nhiều ảnh sản phẩm khác nhau để tránh card méo, tràn hoặc mất cân bằng.
Thêm trust visual
Tôi đưa review và payment visual vào trang để mô phỏng tín hiệu tin cậy của một cửa hàng online.
Action - Quyết định & Thực thi
Tôi chia sản phẩm thành trái cây, rau củ, hạt, combo và giỏ quà để người xem scan nhanh hơn.
01
Dùng SwiperJS cho chuyển động
Tôi dùng SwiperJS cho product/review slider để tạo chuyển động có mục đích, tránh trang tĩnh quá phẳng.
02
Thiết kế cart popup
Tôi tạo cart trượt bên phải để mô phỏng bước xem giỏ hàng mà không rời trang.
03
Xử lý DOM bằng JS thuần
Tôi luyện event handling cho menu, popup, slider control và interaction thay vì dựa vào framework.
04
Dùng asset thật để kiểm UI
Tôi kiểm tra layout với nhiều ảnh sản phẩm khác nhau để tránh card méo, tràn hoặc mất cân bằng.
05
Thêm trust visual
Tôi đưa review và payment visual vào trang để mô phỏng tín hiệu tin cậy của một cửa hàng online.
Result - Kết quả đạt được
Dự án có hero, catalog, cart popup, review, payment visual và responsive layout.
Bằng chứng DOM/JS nền
Project chứng minh tôi hiểu event, popup, slider và layout trước khi chuyển sang React.
Nội dung dễ hiểu
Người xem có thể thấy ngay đây là bước học e-commerce UI, không bị mô tả mơ hồ như 'web bán hàng'.
Limitation thật
Cart chưa lưu server, không có auth/order/payment; đây là UI prototype cho cửa hàng nhỏ.
Liên kết với FruitHub
Dự án tạo nền để sau đó tôi nâng cấp tư duy sang FruitHub có backend, order, admin và Cloudinary.
Hướng phát triển
Có thể thêm localStorage cart, form contact thật, tối ưu ảnh và Lighthouse audit để tăng độ hoàn thiện.
Tôi học được giới
Tôi học được giới hạn của static e-commerce: UI có thể mô phỏng flow, nhưng để xử lý order/user/admin thật thì cần backend và database.
Dự án giúp tôi
Dự án giúp tôi rèn cảm giác layout, spacing và chuyển động UI trước khi bước sang React/Node ở các sản phẩm lớn hơn.
Result - Kết quả đạt được
Dự án có hero, catalog, cart popup, review, payment visual và responsive layout.
01
Bằng chứng DOM/JS nền
Project chứng minh tôi hiểu event, popup, slider và layout trước khi chuyển sang React.
02
Nội dung dễ hiểu
Người xem có thể thấy ngay đây là bước học e-commerce UI, không bị mô tả mơ hồ như 'web bán hàng'.
03
Limitation thật
Cart chưa lưu server, không có auth/order/payment; đây là UI prototype cho cửa hàng nhỏ.
04
Liên kết với FruitHub
Dự án tạo nền để sau đó tôi nâng cấp tư duy sang FruitHub có backend, order, admin và Cloudinary.
05
Hướng phát triển
Có thể thêm localStorage cart, form contact thật, tối ưu ảnh và Lighthouse audit để tăng độ hoàn thiện.
06
Tôi học được giới
Tôi học được giới hạn của static e-commerce: UI có thể mô phỏng flow, nhưng để xử lý order/user/admin thật thì cần backend và database.
07
Dự án giúp tôi
Dự án giúp tôi rèn cảm giác layout, spacing và chuyển động UI trước khi bước sang React/Node ở các sản phẩm lớn hơn.
Preview & Trải nghiệm thực tế
Mỗi màn hình đi kèm phần mô tả chi tiết để làm rõ luồng hoạt động và trải nghiệm người dùng thực tế.
Xem toàn màn hình
01
image
Ảnh này dùng làm bằng chứng cho flow Cái Tiệm Trái Cây. Màn hình "image" giúp giải thích rõ trạng thái UI, dữ liệu hiển thị và thao tác người dùng ở bước đó.
Xem toàn màn hình
02
image copy
Ảnh này dùng làm bằng chứng cho flow Cái Tiệm Trái Cây. Màn hình "image copy" giúp giải thích rõ trạng thái UI, dữ liệu hiển thị và thao tác người dùng ở bước đó.
Xem toàn màn hình
03
image copy 2
Ảnh này dùng làm bằng chứng cho flow Cái Tiệm Trái Cây. Màn hình "image copy 2" giúp giải thích rõ trạng thái UI, dữ liệu hiển thị và thao tác người dùng ở bước đó.
Xem toàn màn hình
04
image copy 3
Ảnh này dùng làm bằng chứng cho flow Cái Tiệm Trái Cây. Màn hình "image copy 3" giúp giải thích rõ trạng thái UI, dữ liệu hiển thị và thao tác người dùng ở bước đó.
Mã nguồn & DemoTrải nghiệm dự án
Trải nghiệm dự án
Source Code & Demo
Xem toàn bộ mã nguồn trên GitHub hoặc mở bản demo hoạt động thực tế.
DỰ ÁN TIẾP THEO