Web Bán Giày là một ứng dụng web bán hàng online được xây dựng dựa trên việc tham khảo và clone UI/UX cũng như một phần logic từ nhiều website thương mại điện tử nổi tiếng (như Nike, Adidas, v.v.). Ứng dụng hướng tới việc tạo ra một nền tảng trưng bày sản phẩm giày dép hiện đại, trực quan, giúp người dùng dễ dàng khám phá sản phẩm, đánh dấu yêu thích và mô phỏng trải nghiệm mua sắm online.
🔗 Demo trực tuyến:
https://tylerlucasvn.github.io/aestheticwebsite/
Xây dựng một ứng dụng web bán giày cho phép người dùng:
- Xem danh sách sản phẩm
- Lọc và sắp xếp sản phẩm theo danh mục
- Đánh dấu sản phẩm yêu thích Áp dụng kiến thức về HTML, CSS, JavaScript trong xây dựng giao diện và xử lý logic phía client Tối ưu trải nghiệm người dùng thông qua UI hiện đại và hiệu ứng tương tác Tạo giao diện thân thiện, dễ sử dụng, phù hợp với nhiều thiết bị
- Người dùng có nhu cầu tham khảo, mua sắm giày online
- Sinh viên học tập và nghiên cứu về thiết kế web và front-end
Ứng dụng hoạt động trên trình duyệt web Dữ liệu sản phẩm được lấy từ API mock hoặc file JSON Lưu trữ dữ liệu phía client (offline) thông qua localStorage (ví dụ: danh sách yêu thích) Không triển khai thanh toán và backend server
Hiển thị danh sách giày theo dạng lưới (grid layout) Thông tin sản phẩm bao gồm:
- Hình ảnh
- Tên sản phẩm
- Danh mục
- Giá bán
Phân loại sản phẩm theo:
- Men
- Women
- Kids
- Sale Hỗ trợ lọc sản phẩm thông qua tham số (param) hoặc tag
Sắp xếp sản phẩm theo:
- Giá tăng dần / giảm dần
- Tên sản phẩm (A–Z / Z–A)
Cho phép người dùng đánh dấu sản phẩm yêu thích Lưu trạng thái yêu thích bằng localStorage Hiển thị số lượng sản phẩm yêu thích trên thanh điều hướng
Tải sản phẩm theo từng batch khi người dùng cuộn trang Giúp tối ưu hiệu năng và trải nghiệm người dùng
Thiết kế UI theo phong cách aesthetic / minimal / modern Hiệu ứng hover, transition và animation mượt mà Giao diện responsive, tương thích với:
- Desktop
- Tablet
- Mobile Bố cục rõ ràng, dễ thao tác và dễ mở rộng
- HTML5
- CSS3
- JavaScript (ES6 Modules)
- Tailwind CSS
- API Mock / JSON
- localStorage
- GitHub Pages
- GitHub Actions
Trình duyệt web hiện đại (Chrome, Edge, Firefox)
Không yêu cầu cài đặt backend
Clone repository:
git clone https://github.com/tylerlucasvn/aestheticwebsite.gitMở file index.html bằng trình duyệt Hoặc deploy thông qua GitHub Page
Hoàn thiện giao diện web bán giày theo đúng mục tiêu đề tài Các chức năng lọc, sắp xếp và yêu thích hoạt động ổn định UI hiện đại, phù hợp với xu hướng thiết kế web hiện nay Sử dụng được những yêu cầu cơ bản như tailwind, api mockup,...
Bổ sung giỏ hàng và thanh toán Kết nối backend và cơ sở dữ liệu thực Thêm đăng nhập người dùng Tối ưu SEO và hiệu năng tải trang
Đề tài Web Bán Giày giúp sinh viên vận dụng kiến thức đã học vào thực tế, đặc biệt trong lĩnh vực phát triển giao diện web và xử lý logic phía client. Sản phẩm không chỉ mang tính học thuật mà còn có khả năng mở rộng thành một hệ thống thương mại điện tử hoàn chỉnh trong tương lai.
Tên đề tài: Web bán giày Môn học: Thiết kế Web Lớp: 23SE – VNUK
Thành viên nhóm:
- Trần Tiến Minh
- Hồ Thăng Bảo Huy
- Nguyễn Bá Toàn
Nhóm xin chân thành cảm ơn giảng viên đã hướng dẫn và hỗ trợ trong suốt quá trình thực hiện dự án cũng như cũng cố dự án.
Nhóm 6 – 23SE – VNUK