Quản lý ảnh Cloudinary
Admin upload ảnh sản phẩm lên Cloudinary với preset tối ưu.
Báo cáo project
FruitHub.
Trang thương mại điện tử thực phẩm tươi sống full-stack tích hợp giỏ hàng thông minh, theo dõi đơn hàng và quản lý phương tiện truyền thông qua Cloudinary.
1 thành viên (Cá nhân)React 19Tailwind CSSNode.jsMongoDBCloudinary
Cuộn xuống để khám phá
Chức năng chính
Tự động tính giá sản phẩm, phí vận chuyển và số lượng.
Theo dõi đơn hàng
Khách hàng theo dõi trạng thái đơn từ đặt hàng đến giao thành công.
Admin product CRUD
Admin thêm/sửa/xóa sản phẩm, danh mục, ảnh và thông tin bán hàng.
User auth & profile
Đăng ký, đăng nhập, quản lý tài khoản và địa chỉ giao hàng.
Review sản phẩm
Người mua đánh giá sản phẩm, giúp trang bán hàng có dữ liệu phản hồi.
Order status admin
Admin cập nhật trạng thái đơn, hỗ trợ flow từ đặt hàng tới giao thành công.
Route/service backend
Backend tách controller, routes, models, middleware và services để dễ bảo trì.
Chức năng chính
Tự động tính giá sản phẩm, phí vận chuyển và số lượng.
01
Quản lý ảnh Cloudinary
Admin upload ảnh sản phẩm lên Cloudinary với preset tối ưu.
02
Theo dõi đơn hàng
Khách hàng theo dõi trạng thái đơn từ đặt hàng đến giao thành công.
03
Admin product CRUD
Admin thêm/sửa/xóa sản phẩm, danh mục, ảnh và thông tin bán hàng.
04
User auth & profile
Đăng ký, đăng nhập, quản lý tài khoản và địa chỉ giao hàng.
05
Review sản phẩm
Người mua đánh giá sản phẩm, giúp trang bán hàng có dữ liệu phản hồi.
06
Order status admin
Admin cập nhật trạng thái đơn, hỗ trợ flow từ đặt hàng tới giao thành công.
07
Route/service backend
Backend tách controller, routes, models, middleware và services để dễ bảo trì.
Situation - Bối cảnh
FruitHub là bước nâng cấp sau các landing page bán hàng: không chỉ hiển thị sản phẩm mà có auth, cart, order, review và admin.
Người dùng hai phía
Khách hàng cần tìm sản phẩm, thêm giỏ, đặt hàng, theo dõi đơn và review; admin cần quản lý sản phẩm, ảnh, đơn và user.
Domain e-commerce rõ
Thực phẩm tươi cần ảnh sản phẩm tốt, trạng thái đơn dễ hiểu, giỏ hàng chính xác và quản trị nhanh.
Stack fullstack thực tế
React 19/Tailwind ở client, Node/Express/MongoDB/Mongoose ở server, Cloudinary cho media và JWT/bcrypt cho auth.
Source có tách lớp
Server có controllers, models, routes, middlewares, services và utils, giúp project đáng tin hơn cấu trúc demo một file.
Giá trị học được
FruitHub giúp tôi luyện các nghiệp vụ web phổ biến trong một app hoàn chỉnh: auth, CRUD, upload, cart, order và admin.
Situation - Bối cảnh
FruitHub là bước nâng cấp sau các landing page bán hàng: không chỉ hiển thị sản phẩm mà có auth, cart, order, review và admin.
01
Người dùng hai phía
Khách hàng cần tìm sản phẩm, thêm giỏ, đặt hàng, theo dõi đơn và review; admin cần quản lý sản phẩm, ảnh, đơn và user.
02
Domain e-commerce rõ
Thực phẩm tươi cần ảnh sản phẩm tốt, trạng thái đơn dễ hiểu, giỏ hàng chính xác và quản trị nhanh.
03
Stack fullstack thực tế
React 19/Tailwind ở client, Node/Express/MongoDB/Mongoose ở server, Cloudinary cho media và JWT/bcrypt cho auth.
04
Source có tách lớp
Server có controllers, models, routes, middlewares, services và utils, giúp project đáng tin hơn cấu trúc demo một file.
05
Giá trị học được
FruitHub giúp tôi luyện các nghiệp vụ web phổ biến trong một app hoàn chỉnh: auth, CRUD, upload, cart, order và admin.
Task - Nhiệm vụ
Giỏ hàng cần đồng bộ số lượng, tổng tiền, phí vận chuyển và thay đổi khi user thêm/xóa sản phẩm.
Order có vòng đời
Đơn hàng không chỉ tạo record; cần trạng thái, hủy/thanh toán/giao hàng và hiển thị đúng cho customer/admin.
Upload ảnh không thể thủ công
Admin cần upload ảnh sản phẩm ổn định; dùng link ảnh thủ công dễ lỗi, khó quản lý và không chuyên nghiệp.
Auth cần tách customer/admin
Một số API chỉ admin được gọi như thêm sản phẩm hoặc cập nhật đơn; nếu middleware yếu sẽ mở lỗ hổng quyền.
Review cần ràng buộc
Review sản phẩm phải gắn user/product/order context để tránh feedback trôi nổi không có giá trị.
Frontend nhiều trạng thái
Các màn hình cần xử lý loading, empty cart, lỗi API, hết hàng hoặc trạng thái đơn thay đổi.
Task - Nhiệm vụ
Giỏ hàng cần đồng bộ số lượng, tổng tiền, phí vận chuyển và thay đổi khi user thêm/xóa sản phẩm.
01
Order có vòng đời
Đơn hàng không chỉ tạo record; cần trạng thái, hủy/thanh toán/giao hàng và hiển thị đúng cho customer/admin.
02
Upload ảnh không thể thủ công
Admin cần upload ảnh sản phẩm ổn định; dùng link ảnh thủ công dễ lỗi, khó quản lý và không chuyên nghiệp.
03
Auth cần tách customer/admin
Một số API chỉ admin được gọi như thêm sản phẩm hoặc cập nhật đơn; nếu middleware yếu sẽ mở lỗ hổng quyền.
04
Review cần ràng buộc
Review sản phẩm phải gắn user/product/order context để tránh feedback trôi nổi không có giá trị.
05
Frontend nhiều trạng thái
Các màn hình cần xử lý loading, empty cart, lỗi API, hết hàng hoặc trạng thái đơn thay đổi.
Action - Quyết định & Thực thi
Tôi tổ chức User, Product, Cart, Order, Review thành model/route/controller riêng để dễ bảo trì.
Xây cart/order flow
Tôi triển khai luồng thêm giỏ, cập nhật số lượng, tạo đơn, theo dõi trạng thái và admin cập nhật đơn.
Tích hợp Cloudinary
Tôi dùng Multer/Cloudinary để admin upload ảnh sản phẩm, giảm phụ thuộc vào URL ảnh thủ công.
Bảo vệ API bằng middleware
Tôi dùng JWT/bcrypt và middleware kiểm tra quyền để tách API customer/admin.
Xử lý dynamic API URL
Tôi chỉnh cấu hình API URL để frontend có thể chạy local/deploy mà không hardcode backend.
Refactor endpoint nghiệp vụ
Tôi gom logic cart/order/review vào service/controller rõ hơn, tránh frontend tự quyết định trạng thái quan trọng.
Thiết kế admin dashboard
Tôi đưa product CRUD, order status và user management vào admin flow để dự án có mặt vận hành.
Action - Quyết định & Thực thi
Tôi tổ chức User, Product, Cart, Order, Review thành model/route/controller riêng để dễ bảo trì.
01
Xây cart/order flow
Tôi triển khai luồng thêm giỏ, cập nhật số lượng, tạo đơn, theo dõi trạng thái và admin cập nhật đơn.
02
Tích hợp Cloudinary
Tôi dùng Multer/Cloudinary để admin upload ảnh sản phẩm, giảm phụ thuộc vào URL ảnh thủ công.
03
Bảo vệ API bằng middleware
Tôi dùng JWT/bcrypt và middleware kiểm tra quyền để tách API customer/admin.
04
Xử lý dynamic API URL
Tôi chỉnh cấu hình API URL để frontend có thể chạy local/deploy mà không hardcode backend.
05
Refactor endpoint nghiệp vụ
Tôi gom logic cart/order/review vào service/controller rõ hơn, tránh frontend tự quyết định trạng thái quan trọng.
06
Thiết kế admin dashboard
Tôi đưa product CRUD, order status và user management vào admin flow để dự án có mặt vận hành.
Result - Kết quả đạt được
FruitHub có cả customer và admin flow, đủ để demo hành trình từ xem sản phẩm tới quản lý đơn.
Bằng chứng fullstack rõ
Source có client/server riêng, Express backend, MongoDB models, Cloudinary service và route theo domain.
Nhiều kỹ năng web thực tế
Project chứng minh CRUD nâng cao, auth, upload file, order lifecycle, validation và phân quyền admin.
Liên kết học tập tốt
FruitHub cho thấy quá trình phát triển từ Cái Tiệm Trái Cây static UI lên app bán hàng có dữ liệu thật.
Limitation thật
Chưa thấy payment gateway production và inventory reservation chặt; nếu nhiều user mua cùng lúc có thể cần khóa tồn kho tốt hơn.
Hướng phát triển
Có thể thêm payment thật, coupon, stock reservation, test e2e checkout và dashboard doanh thu cho admin.
Tôi học được vòng
Tôi học được vòng đời đơn hàng ảnh hưởng nhiều tầng: UI, cart service, order service, admin status và lịch sử người dùng.
Dự án giúp tôi
Dự án giúp tôi hiểu rõ hơn tầm quan trọng của service layer và validation trong backend e-commerce.
Tôi cũng thấy rõ
Tôi cũng thấy rõ khác biệt giữa landing page bán hàng và một hệ thống e-commerce có dữ liệu/đơn hàng/admin thật.
Result - Kết quả đạt được
FruitHub có cả customer và admin flow, đủ để demo hành trình từ xem sản phẩm tới quản lý đơn.
01
Bằng chứng fullstack rõ
Source có client/server riêng, Express backend, MongoDB models, Cloudinary service và route theo domain.
02
Nhiều kỹ năng web thực tế
Project chứng minh CRUD nâng cao, auth, upload file, order lifecycle, validation và phân quyền admin.
03
Liên kết học tập tốt
FruitHub cho thấy quá trình phát triển từ Cái Tiệm Trái Cây static UI lên app bán hàng có dữ liệu thật.
04
Limitation thật
Chưa thấy payment gateway production và inventory reservation chặt; nếu nhiều user mua cùng lúc có thể cần khóa tồn kho tốt hơn.
05
Hướng phát triển
Có thể thêm payment thật, coupon, stock reservation, test e2e checkout và dashboard doanh thu cho admin.
06
Tôi học được vòng
Tôi học được vòng đời đơn hàng ảnh hưởng nhiều tầng: UI, cart service, order service, admin status và lịch sử người dùng.
07
Dự án giúp tôi
Dự án giúp tôi hiểu rõ hơn tầm quan trọng của service layer và validation trong backend e-commerce.
08
Tôi cũng thấy rõ
Tôi cũng thấy rõ khác biệt giữa landing page bán hàng và một hệ thống e-commerce có dữ liệu/đơn hàng/admin thật.
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
Project preview
Ảnh này dùng làm bằng chứng cho flow FruitHub. Màn hình "Project preview" 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