App-RoV-Tournament-Platform-2026

App-RoV-Tournament-Platform-2026 (RoV SN Tournament Official)

[![Vercel Deployment](https://img.shields.io/badge/Deployment-Live%20Demo-0070F3?style=for-the-badge&logo=vercel&logoColor=white)](https://ro-v-sn-tournament-official.vercel.app) [![Next.js 15](https://img.shields.io/badge/Framework-Next.js%2015-black?style=for-the-badge&logo=next.js&logoColor=white)](https://nextjs.org/) [![Supabase](https://img.shields.io/badge/Database-Supabase%20PostgreSQL-3ECF8E?style=for-the-badge&logo=supabase&logoColor=white)](https://supabase.com/) [![TypeScript](https://img.shields.io/badge/Language-TypeScript-3178C6?style=for-the-badge&logo=typescript&logoColor=white)](https://www.typescriptlang.org/) [![TailwindCSS](https://img.shields.io/badge/Styling-TailwindCSS%20v4-06B6D4?style=for-the-badge&logo=tailwindcss&logoColor=white)](https://tailwindcss.com/) [![License: ISC](https://img.shields.io/badge/License-ISC-blue.svg?style=for-the-badge)](LICENSE) **ระบบเว็บแอปพลิเคชันบริหารจัดการและถ่ายทอดสดทัวร์นาเมนต์ eSports (Arena of Valor - RoV) แบบ Serverless Full-Stack** *พัฒนาด้วย Next.js 15 App Router, Supabase PostgreSQL, Row Level Security (RLS) และ Edge Middleware* [🌐 เข้าชมเว็บไซต์จริง (Live Demo)](https://ro-v-sn-tournament-official.vercel.app) · [🐛 แจ้งปัญหา (Report Bug)](https://github.com/PhuriphatTyPeZ3r0/App-RoV-Tournament-Platform-2026/issues) · [✨ เสนอแนะฟีเจอร์ (Request Feature)](https://github.com/PhuriphatTyPeZ3r0/App-RoV-Tournament-Platform-2026/issues)

สารบัญ (Table of Contents)

📖 เกี่ยวกับโปรเจกต์ (About The Project)
✨ ฟีเจอร์หลัก (Key Features)
🏗️ สถาปัตยกรรมระบบ (Architecture)
🔐 โมเดลความปลอดภัย (Defense-in-Depth Security)
🗄️ โครงสร้างฐานข้อมูล (Database Schema & RPCs)
📂 โครงสร้างโฟลเดอร์ (Directory Structure)
🚀 การติดตั้งและเริ่มต้นใช้งาน (Getting Started)
🌐 การ Deploy
📜 ประวัติการพัฒนาสถาปัตยกรรม (Architecture Evolution)
👨‍💻 ผู้พัฒนา (Author)

เกี่ยวกับโปรเจกต์ (About The Project)

ที่มาและปัญหา (Problem Statement):
การจัดการแข่งขัน eSports ระดับคอมมูนิตี้หรือทัวร์นาเมนต์ทางการมักประสบปัญหาการบันทึกคะแนนล่าช้า ตารางแข่งขันไม่เป็นปัจจุบัน การคำนวณสถิติรายบุคคล (MVP, KDA, Win Rate) มีความซับซ้อน และการรักษาความปลอดภัยของระบบกรอกผลแข่งหลังบ้านมักมีช่องโหว่

แนวทางการแก้ไข (Solution):
RoV SN Tournament Official (v3.0) ถูกพัฒนาขึ้นเพื่อเป็นแพลตฟอร์มศูนย์กลางครบวงจร ขับเคลื่อนด้วยสถาปัตยกรรม Modern Serverless:

หน้าบ้านแสดงผลแบบ Real-Time ด้วย React Server Components (RSC) โหลดเร็วและเป็นมิตรต่อ SEO
คำนวณอันดับคะแนนและสถิติเชิงลึกผ่าน Stored Procedures (RPCs) โดยตรงบน PostgreSQL เพื่อความรวดเร็วและแม่นยำสูงสุด
ปกป้องระบบ Admin อย่างแน่นหนาด้วย Edge Middleware และ Database Row Level Security (RLS)

ฟีเจอร์หลัก (Key Features)

ฟีเจอร์	รายละเอียดทางเทคนิค
🏟️ Tournament Dashboard	ตารางแข่งขัน, ผลการแข่งย้อนหลัง, อันดับคะแนน (Standings) แบบ Real-time
📊 Player & Team Stats	สถิติผู้เล่นรายบุคคล, MVP, KDA, Win Rate — คำนวณระดับ Database ด้วย RPC
🎮 Hero Analytics	วิเคราะห์ฮีโร่ยอดนิยม, อัตราชนะ (Win Rate), Pick Rate และ Ban Rate
🛡️ Comprehensive Admin Panel	จัดการทีม, รายชื่อผู้เล่น, จับฉลากแบ่งสาย, บันทึกผลแมตช์, อัปโหลดโลโก้ทีม
🔐 SSO & Role-Based Auth	ยืนยันตัวตนผ่าน Supabase Auth พร้อมตรวจสอบสิทธิ์ Role (Admin/User) ทุกระดับ
🌏 Multi-language Support	รองรับการสลับภาษาทั้งไทยและอังกฤษอย่างราบรื่น

สถาปัตยกรรมระบบ (Architecture)

graph TD
    Client["💻 Client (Browser / Mobile)"] --> Edge["⚡ Vercel Edge Middleware (Auth Guard)"]
    Edge --> RSC["🖥️ Next.js 15 App Router (RSC)"]
    Edge --> Admin["🛡️ Next.js Admin Client Pages"]
    
    RSC --> ServerActions["⚙️ Server Actions (Business Logic)"]
    Admin --> ServerActions
    
    ServerActions --> SupabaseSDK["🔒 Supabase SDK (HTTPS)"]
    
    subgraph SupabaseCloud ["☁️ Supabase Cloud Platform"]
        SupabaseSDK --> RLS["🛡️ Row Level Security (40 Policies)"]
        RLS --> PG[("🗄️ PostgreSQL (10 Tables, 4 Core RPCs)")]
        SupabaseSDK --> Storage["📦 Supabase Storage (Team Logos, Hero Images)"]
        SupabaseSDK --> Auth["🔑 Supabase Auth (SSO & Profiles)"]
    end

จุดเด่นทางสถาปัตยกรรม: ไร้ Monolithic Express Server, ไร้ปัญหา CORS, ทำงานแบบ 100% Serverless Function บน Vercel พร้อม Data Layer ประสิทธิภาพสูงบน Supabase

โมเดลความปลอดภัย (Defense-in-Depth Security)

ระบบยึดหลักการรักษาความปลอดภัยแบบหลายชั้น (Multi-layered Protection):

ชั้นความปลอดภัย	เทคโนโลยี	บทบาทและหน้าที่
1️⃣ Edge Middleware	Vercel Edge Runtime	ดักจับและสกัดกั้นเส้นทาง `/admin/*` ก่อนที่ Request จะเข้าถึง Server
2️⃣ Server Actions	Next.js Server Runtime	ตรวจสอบ Session Token และสิทธิ์ Role ของผู้ใช้ก่อนเริ่มทำ Data Mutation
3️⃣ Row Level Security	PostgreSQL Engine	ป้อมปราการด่านสุดท้าย ควบคุมสิทธิ์การ Read/Write ในระดับแถวข้อมูล (Row-Level)

โครงสร้างฐานข้อมูล (Database Schema & RPCs)

ตารางหลัก (Core Tables)

profiles: ข้อมูลโปรไฟล์ผู้ใช้งานและ Role กำกับสิทธิ์
tournaments: ข้อมูลรายการแข่งขัน eSports
teams: ข้อมูลทีมแข่งขันและ URL โลโก้
players: รายชื่อผู้เล่นและ IGN (In-Game Name)
matches: รายละเอียดผลการแข่งขัน (รองรับ Bo3 / Bo5)
game_stats: สถิติรายเกมแบบละเอียด (K/D/A, MVP, ฮีโร่ที่ใช้)
schedules: ตารางกำหนดการแข่งขัน
heroes: ข้อมูลฮีโร่ RoV และรูปภาพประจำตัว
audit_logs: บันทึกประวัติและ Timestamp การเปลี่ยนแปลงข้อมูลของ Admin
seasons: ข้อมูลฤดูกาลแข่งขัน

Stored Procedures (Core RPCs)

calculate_tournament_standings: คำนวณอันดับคะแนน ผลต่างได้-เสีย (Game Difference) อัตโนมัติ
get_player_leaderboard: จัดอันดับผู้เล่นยอดเยี่ยม (KDA Leaderboard, MVP count, Win Rate)
get_team_stats: ประมวลผลสถิติภาพรวมระดับทีม
get_season_overview: สรุปข้อมูลสถิติภาพรวมประจำฤดูกาล

โครงสร้างโฟลเดอร์ (Directory Structure)

App-RoV-Tournament-Platform-2026/
├── app/                        # Next.js 15 App Router
│   ├── (public)/               # หน้าแสดงผลสาธารณะ (RSC)
│   │   ├── standings/          # ตารางคะแนนการแข่งขัน
│   │   ├── schedule/           # กำหนดการแข่งขัน
│   │   ├── results/            # รายงานผลการแข่งขัน
│   │   └── stats/              # สถิติผู้เล่นและทีม
│   └── admin/                  # แผงควบคุมผู้ดูแลระบบ (Protected Routes)
│       ├── draw/               # ระบบจับฉลากตารางสายแข่ง
│       ├── game-stats/         # หน้าบันทึกสถิติรายแมตช์
│       ├── teams/              # จัดการทีมและอัปโหลดโลโก้
│       └── history/            # ระบบ Audit Log
├── components/                 # Shared Reusable UI Components
├── features/                   # Server Actions & Modular Business Logic
├── lib/                        # Server & Client Data Fetching Utilities
├── utils/supabase/             # Supabase Client, Server, and Middleware Helpers
├── supabase/migrations/        # SQL Migration Files (Schemas, RLS, RPCs)
├── middleware.ts               # Edge Route Guard Middleware
└── README.md                   # เอกสารแนะนำโปรเจกต์

การติดตั้งและเริ่มต้นใช้งาน (Getting Started)

ข้อกำหนดเบื้องต้น (Prerequisites)

Node.js (Version 18.x หรือ 20.x ขึ้นไป)
Package Manager: npm หรือ pnpm
บัญชีคลาวด์ Supabase

ขั้นตอนการรันบนเครื่อง Local

โคลน Repository:

git clone https://github.com/PhuriphatTyPeZ3r0/App-RoV-Tournament-Platform-2026.git
cd App-RoV-Tournament-Platform-2026
npm install

กำหนดค่า Environment Variables: สร้างไฟล์ .env.local ในรูทของโปรเจกต์:
```
NEXT_PUBLIC_SUPABASE_URL=https://[YOUR_PROJECT_ID].supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=[YOUR_SUPABASE_ANON_KEY]
```
ติดตั้งฐานข้อมูลบน Supabase: รัน Migration SQL ใน Supabase SQL Editor ตามลำดับ: ```text
1. supabase/migrations/001_initial_schema.sql
2. supabase/migrations/002_rls_policies.sql
3. supabase/migrations/003_auth_triggers.sql
4. supabase/migrations/004_core_rpcs.sql ```
สร้าง Storage Buckets:
- สร้าง Bucket: team-logos (ตั้งค่าเป็น Public)
- สร้าง Bucket: hero-images (ตั้งค่าเป็น Public)
เริ่มรัน Development Server:
```
npm run dev
```
เปิดเบราว์เซอร์ไปที่: http://localhost:3000

การ Deploy

โปรเจกต์นี้ได้รับการตั้งค่าให้รองรับการ Deploy ผ่าน Vercel อย่างสมบูรณ์:

เชื่อมต่อ Repository กับ Vercel Dashboard
กำหนดค่า Environment Variables: NEXT_PUBLIC_SUPABASE_URL และ NEXT_PUBLIC_SUPABASE_ANON_KEY
Vercel จะทำการ Build และ Deploy เป็น Serverless Web App พร้อม Edge Network ทั่วโลก

ประวัติการพัฒนาสถาปัตยกรรม (Architecture Evolution)

เวอร์ชัน	สถาปัตยกรรม (Architecture)	จุดเด่นและข้อสังเกต
v1.0	React SPA + Express.js + MongoDB	สถาปัตยกรรมแบบ Monolithic API เดิม
v2.0	Next.js + Express API + MongoDB	แยกฝั่ง Frontend / Backend พร้อมเพิ่ม SSR
v3.0	Next.js 15 + Supabase (Fullstack Serverless)	สถาปัตยกรรมปัจจุบัน: RLS, RPCs, Edge Middleware, Zero CORS

ผู้พัฒนา (Author)

Phuriphat Hemakul (PhuriphatTyPeZ3r0)

นักศึกษา สาขาวิศวกรรมคอมพิวเตอร์และปัญญาประดิษฐ์ (CAI)
สถาบันการจัดการปัญญาภิวัฒน์ (PIM)
GitHub: @PhuriphatTyPeZ3r0
Portfolio: portfolio-phuriphatizamus-projects.vercel.app