Tier Liên Quân

Inspiration (Cảm hứng dự án)

Là những người chơi Liên Quân Mobile, nhóm bạn của tôi thường xuyên tranh luận về sức mạnh của các vị tướng sau mỗi đợt cập nhật meta. Các bảng xếp hạng hiện có trên mạng thường là bảng tĩnh, không thể hiện được góc nhìn và sự đồng thuận của nhóm chơi. Tôi muốn tạo ra một ứng dụng nhỏ gọn trên điện thoại để mọi người cùng xem bảng xếp hạng theo đường và trực tiếp bình chọn (Upvote/Downvote) để tạo nên bảng xếp hạng thực tế của riêng mình.

What it does (Dự án làm được gì)

• Lọc theo 5 đường chuẩn: Top (Tà thần Caesar), Mid, Rồng, Rừng, và Trợ thủ.
• Danh sách tướng tiêu biểu: Hiển thị 20 tướng quen thuộc với ảnh đại diện, tên và bậc sức mạnh (Tier S, A, B).
• Hệ thống bình chọn thời gian thực: Mỗi tướng có 2 nút 👍 và 👎. Khi người dùng bấm vote, số lượng được đồng bộ và lưu trữ trực tuyến qua cơ sở dữ liệu Supabase, cho phép mọi người xem cùng một dữ liệu thực tế.
• Giao diện tối ưu di động: Nền tối (Dark Theme) phong cách gaming với điểm nhấn màu vàng kim và hiệu ứng tương tác mượt mà.

How we built it (Cách chúng tôi xây dựng)

Tôi là người mới bắt đầu học lập trình và đã hợp tác cùng OpenCode Agent để xây dựng dự án từ con số 0:

• Lập kế hoạch & Thiết kế: Xác định phạm vi (Scope), yêu cầu sản phẩm (PRD) và tài liệu kỹ thuật (Tech Spec) rõ ràng trước khi viết code.
• Frontend: Xây dựng bằng HTML5, CSS3 và JavaScript thuần để tối ưu hiệu năng và độ ổn định.
• Backend & Database: Tích hợp dịch vụ Supabase để lưu trữ danh sách tướng và xử lý logic tăng lượt vote đồng bộ.

Challenges we ran into (Khó khăn gặp phải)

Vì chưa có kinh nghiệm lập trình trước đây, tôi gặp bỡ ngỡ ở khâu thiết lập ban đầu (cấu hình Supabase, quản lý phiên làm việc trong dòng lệnh và lấy URL ảnh tướng). Tuy nhiên, nhờ cách tiếp cận chia nhỏ dự án thành từng lát cắt (slices) và hướng dẫn chi tiết từ AI, mọi vấn đề đều được giải quyết suôn sẻ.

What we learned (Bài học rút ra)

• Học được tư duy phát triển phần mềm chuẩn: đi từ ý tưởng -> phạm vi -> tài liệu yêu cầu -> code từng tính năng nhỏ.
• Hiểu cách một trang web gửi và nhận dữ liệu từ cơ sở dữ liệu trực tuyến.
• Tự tin hơn rất nhiều khi biết cách biến một ý tưởng cá nhân thành sản phẩm thực tế chạy được với sự trợ giúp của AI.

Built With

• css3
• html5
• javascript
• opencode
• supabase