🎮 Dự án: Hìn Bel — Web MVP (Shop Thuê & Quản Lý Tài Khoản Game)

Hìn Bel là một ứng dụng web dạng MVP (Minimum Viable Product) được thiết kế chuyên biệt để quản lý và hiển thị trạng thái các tài khoản game (như Liên Quân, Liên Minh Huyền Thoại, Valorant,...). Giao diện của dự án được định hình theo phong cách hiện đại, trực quan với các gam màu pastel ngọt ngào, mang lại trải nghiệm người dùng rất dịu mắt và thân thiện.

🛠️ Công Nghệ Sử Dụng (Tech Stack)

Dự án được xây dựng dựa trên sự kết hợp mạnh mẽ và tối ưu của các công nghệ hiện đại:

• Backend: Laravel (PHP) — Cung cấp hệ thống API, quản lý cơ sở dữ liệu và xử lý nghiệp vụ mạnh mẽ, an toàn.
• Frontend: Vue 3 kết hợp với Tailwind CSS — Tạo giao diện tương tác mượt mà, phản hồi tức thì (Single Page Application).
• Cầu nối (Bridge): Inertia.js — Giúp kết nối trực tiếp Laravel và Vue mà không cần xây dựng API RESTful phức tạp.
• Xác thực (Authentication): Laravel Breeze — Đảm bảo tính bảo mật và phân quyền cho khu vực quản trị viên.

🌟 Các Chức Năng Chính Của Dự Án

Hệ thống được chia thành hai phân hệ rõ rệt dành cho Khách hàng (Public) và Quản trị viên (Admin):

1. Phân Hệ Dành Cho Khách Hàng (Public Interface)

Giúp người dùng dễ dàng tìm kiếm, tham khảo và kết nối thuê tài khoản game:

• Trang chủ & Xem Danh Sách Tài Khoản:
  • Hiển thị danh sách các tài khoản game trực quan dưới dạng thẻ (Card) bao gồm hình ảnh, tên tài khoản, game, cấp bậc (Rank), danh sách skin nổi bật và giá thuê.
• Bộ Lọc Trạng Thái:
  • Khách hàng dễ dàng lọc nhanh tài khoản theo trạng thái: Tất cả (All), Đang trống (Available), hoặc Đang được thuê (Rented).
• Xem Chi Tiết Tài Khoản (/accounts/{id}):
  • Trang thông tin chi tiết của từng tài khoản, hiển thị mô tả đầy đủ, hình ảnh phóng to, danh sách trang phục (Skins) cùng trạng thái và thời gian thuê (nếu có).
• Nút Liên Hệ Zalo Tiện Lợi (Floating Contact Button):
  • Nút Zalo bong bóng luôn hiển thị ở góc màn hình. Số điện thoại Zalo này được cấu hình động từ trang Admin, cho phép khách hàng nhấn vào để chat và giao dịch thuê tài khoản ngay lập tức.

2. Phân Hệ Dành Cho Quản Trị Viên (Admin Panel)

Khu vực bảo mật dành riêng cho admin để quản lý toàn bộ hệ thống shop:

• Xác Thực Tài Khoản (Authentication):
  • Hệ thống đăng nhập bảo mật của Laravel Breeze giúp bảo vệ khu vực quản trị khỏi các truy cập trái phép.
• Trang Dashboard Quản Trị (/admin):
  • Nơi quản trị viên kiểm soát tổng quan danh sách tài khoản kèm theo các bộ lọc và hành động nhanh.
• Quản Lý Tài Khoản (CRUD - Account Management):
  • Thêm mới tài khoản: Nhập các thông tin như Tên tài khoản, Tên game, Cấp bậc (Rank), Danh sách Skins, Mô tả chi tiết, Giá thuê và Tải lên hình ảnh đại diện của tài khoản đó.
  • Xem & Chỉnh sửa thông tin: Cập nhật thông tin chi tiết, thay đổi trạng thái tài khoản (available hoặc rented), cập nhật mốc thời gian thuê đến hạn (rent_until).
  • Xóa tài khoản: Gỡ bỏ các tài khoản không còn hoạt động khỏi cơ sở dữ liệu.
• Cấu Hình Hệ Thống (Settings Management):
  • Trang cấu hình hệ thống chuyên biệt, cho phép Admin dễ dàng cập nhật thông tin liên lạc (như số điện thoại Zalo hiển thị trên giao diện người dùng ngoài trang chủ) mà không cần can thiệp vào mã nguồn.