ESI Kota Denpasar

Ringkasan proyek

ESI Kota Denpasar adalah platform resmi Esports Indonesia cabang Kota Denpasar. Situs ini menjadi wadah pembinaan dan kompetisi esports pelajar SD, SMP, dan SMA se-Kota Denpasar, dari kompetisi sekolah sampai prestasi nasional.

Platform ini menjadi satu sumber informasi untuk event, cara bertanding, registrasi peserta, serta prestasi atlet dan sekolah yang ikut serta.

Pendekatan desain

• Resmi dan tepercaya: identitas visual merah-putih yang sesuai karakter lembaga olahraga nasional, dengan logo ESI dan Pemkot Denpasar.
• Dekat dengan pelajar: tipografi tebal dan aksen merah yang energik untuk audiens pelajar dan gamer muda.
• Mode gelap: toggle mode gelap dan terang untuk kenyamanan membaca.
• Padat tapi rapi: banyak informasi (event, aturan, leaderboard), dengan hierarki yang jelas.

Fitur utama

• Manajemen event: daftar turnamen resmi dengan jadwal, game, dan bracket.
• Cara bertanding: panduan registrasi dan mekanisme kompetisi untuk sekolah dan pelajar.
• Akun: halaman masuk dan daftar untuk peserta dan admin sekolah.
• Profil dan statistik: catatan prestasi atlet dan sekolah.
• Responsif: dirancang untuk layar ponsel.
• SEO dan performa: SSR/ISR Next.js agar halaman cepat dimuat dan mudah ditemukan di mesin pencari.

Pengguna

• Pelajar SD, SMP, dan SMA di Kota Denpasar yang berminat di esports
• Sekolah yang ingin mendaftarkan tim ke turnamen resmi
• Pembina dan guru pendamping ekstrakurikuler esports
• Dinas Pemuda dan Olahraga serta pemangku kepentingan terkait

Teknologi

• Framework: Next.js untuk SSR, ISR, dan optimasi gambar.
• UI: React dan TailwindCSS.
• Bahasa: TypeScript untuk type safety.
• Performa: halaman di-prerender oleh Next.js (x-nextjs-prerender: 1) dan disajikan dari cache.
• Keamanan: CSP, HSTS preload, X-Frame-Options DENY, X-Content-Type-Options nosniff, Permissions-Policy.

Hasil

• Website live di esidenpasar.com sebagai situs resmi ESI Kota Denpasar untuk pelajar, sekolah, dan pembina esports.
• Halaman di-prerender dan disajikan dari cache.
• Security header terpasang: CSP, HSTS preload, X-Frame-Options, X-Content-Type-Options, Permissions-Policy.