Arcade Hub

Tracker poin Google Cloud Arcade untuk komunitas fasilitator. Tempel link public profile Cloud Skills Boost, dan poin, milestone, tier hadiah, serta leaderboard dihitung otomatis dari badge-mu. Gratis & open source.

Live: https://arcadehub.web.id

Tool komunitas, tidak berafiliasi resmi dengan Google. Perhitungan poin bersifat best-effort dari badge yang ada di profil publik.

Fitur

• Poin Saya, hitung poin otomatis dari profil (base Arcade + bonus milestone), rincian per-badge, tier hadiah, chart aktivitas 7 hari, kategori badge.
• Leaderboard, terbuka & multi-guild, ranking real-time, sinkron otomatis harian.
• Guilds, perbandingan performa guild: total poin, rata-rata, poin tertinggi, dan sebaran milestone.
• Katalog, 96 skill badge (51 dari silabus resmi + tambahan), game bulan berjalan, dan arsip game bulan-bulan sebelumnya, tandai selesai/belum.
• Hadiah, tier Arcade Player 2026 (Trooper / Ranger / Champion / Legend).
• Info, kode referral, jadwal, panduan, FAQ, pengumuman yang sedang berjalan.
• Kontribusi, profil kontributor + cara ikut.
• Installable (PWA), share card progress, kotak masukan, animasi Framer Motion, aksesibilitas Radix (Lighthouse a11y 100).

Stack

Vite + React (TypeScript) · React Router v7 · Framer Motion · Radix UI · Vercel Serverless Functions · Turso (libSQL) · Vercel Cron.

Mulai

npm install
npm run dev         # dev server
npm run typecheck   # validasi tipe TypeScript (0 errors)
npm run build       # build produksi (Vite + prerender)
npm test            # 180 unit test (poin, parser profil, katalog, dialek SQL/libSQL, proyeksi)
npm run check:arcade # bandingkan katalog dengan halaman Arcade resmi

Frontend jalan tanpa backend. Fitur Leaderboard & feedback butuh env. Salin .env.example ke .env dan isi (atau vercel env pull kalau punya akses project). Lihat daftar env di .env.example.

Struktur

src/
  main.tsx        entry point aplikasi
  App.tsx         definisi rute (react-router, tiap halaman lazy-load)
  routes.tsx      metadata nav (path + label + ikon)
  pages/          satu file per halaman: Points, Leaderboard, Guilds, Catalog, Prizes, Info, Contribute, Roadmap
  components/     Layout, Nav, Footer, Deadline, Bar, BonusMilestone, MyBadges, dll
  types/          definisi tipe TypeScript (arcade.ts)
  utils/          util kecil (time)
  contributors.ts daftar kontributor, tambahkan dirimu di sini!
  (Insights, ShareCard, Announcement, Medal, icons, Tip, SpaceFX, profile, points, config, catalog)
lib/              logika poin + parser profil + DB + rate limit (backend)
api/              serverless functions (join, leave, remove, leaderboard, refresh, refresh-all, feedback)
public/img/       aset gambar (hero, badge game, hadiah)
scripts/          skrip build & migrasi (prerender, backup-neon, migrate-to-turso, verify-migration)

Rute: /points (home) /leaderboard /guilds /catalog /prizes /info /contribute, plus /roadmap (tidak di nav, ditautkan dari footer). / diarahkan ke /points (atau /leaderboard bila ada ?guild=).

Cara poin dihitung, dua window (season vs periode fasilitator), dan hardening (SSRF, rate limit, security headers) dijelaskan di komentar lib/points.js, lib/parseProfile.js, dan lib/fetchProfile.js.

Kontribusi

PR dari luar sangat diterima! Kontribusi yang dibantu AI (AI assistance seperti Claude, Gemini, ChatGPT, Cursor, GitHub Copilot, dsb.) juga diperbolehkan, asalkan kamu tetap memahami perubahan yang dibuat dan memastikan verifikasi lokal (npm run typecheck, npm run build, dan npm test) lulus hijau. Lihat CONTRIBUTING.md.

Cara tercepat tampil di halaman Kontributor: tambahkan dirimu ke src/contributors.ts lewat PR.

• Pengumuman & GitHub Discussions (lihat Pengumuman Terbaru #22)
• Roadmap & backlog atau pantau di Issue #15
• Issue roadmap prioritas dekat
• Buka issue
• Good first issues

Lisensi

MIT © 2026 Ravi Arnan