03 Rekayasa Web Fullstack

Platform Web & Client Hub Arqonara

Portal pelanggan hosting yang mengintegrasikan status ketersediaan node real-time, sinkronisasi bot Discord, dan swalayan akun untuk memangkas beban tiket bantuan.

Peran
Fullstack Developer & Architect
Teknologi
React · Node.js · MongoDB · Tailwind CSS · REST API · Nginx
Hasil Terukur
Penurunan Signifikan pada Beban Pertanyaan Dukungan Rutin · Transparansi Status Server dan Node Waktu Nyata · Sinkronisasi Identitas dan Peran Discord Otomatis
Platform Web & Client Hub Arqonara preview
Rekayasa Web Fullstack Fullstack Developer & Architect

Konteks & Ringkasan

Seiring bertumbuhnya komunitas Arqonara hingga ribuan anggota, tim operasional menghabiskan banyak waktu melayani pertanyaan berulang terkait status aktivasi server, konfirmasi pembayaran, ketersediaan node, dan pemulihan kredensial. Platform Web Arqonara dibangun sebagai portal swalayan pelanggan yang menyatukan status hypervisor backend, catatan langganan, dan kanal komunikasi komunitas ke dalam satu antarmuka terpadu.

Peran & Tanggung Jawab

  • Merancang arsitektur informasi dan antarmuka responsif untuk perangkat desktop maupun ponsel.
  • Membangun backend REST API dengan Node.js yang menghubungkan akun pelanggan ke basis data serta proxy pemantau status hypervisor.
  • Mengembangkan integrasi login OAuth2 Discord dan bot sinkronisasi peran otomatis.
  • Mengimplementasikan sistem pengecekan status klaster server dengan caching agresif untuk mencegah lonjakan beban database.
  • Menyebarkan dan mengamankan layanan web di balik reverse proxy lengkap dengan sertifikat SSL TLS dan pembatasan laju request (rate limiting).

Permasalahan & Tantangan Operasional

  • Antrean Tiket Dukungan Menumpuk: Lebih dari 60% pesan harian di komunitas berisi pertanyaan serupa: “Apakah Node 3 sedang online?”, “Di mana informasi login saya?”, dan “Bagaimana cara klaim role pelanggan di Discord?”.
  • Pemberian Role Komunitas yang Manual: Moderator komunitas harus memeriksa tangkapan layar bukti transfer secara manual satu per satu sebelum memberikan hak akses Discord.
  • Pengalaman Pengguna yang Terpecah: Pengguna harus berpindah-pindah antara tautan pembayaran pihak ketiga, pengumuman Discord, dan kontrol panel server tanpa panduan terpusat.

Pendekatan Arsitektur & Keputusan Rekayasa

  1. Autentikasi Terpadu OAuth2 Discord: Memungkinkan pengguna masuk langsung dengan akun Discord mereka, menghilangkan kerumitan pendaftaran baru dan menautkan identitas komunitas dengan layanan hosting secara langsung.
  2. Integrasi Bot Discord Asinkron: Mengonfigurasi modul internal yang memantau status pesanan; setelah pembayaran terverifikasi, role pelanggan di Discord diberikan secara otomatis dalam hitungan detik melalui Discord REST API.
  3. Pemisahan Proxy Status Node: Membangun endpoint status dengan sistem cache yang mengambil data dari hypervisor setiap 30 detik. Pengunjung portal membaca status dari cache alih-alih menyentuh port game secara langsung, mencegah risiko denial-of-service terhadap mesin produksi.
  4. Struktur Data yang Andal: Menggunakan MongoDB dengan pengindeksan ketat pada ID pengguna dan nomor layanan aktif, memastikan waktu muat dasbor tetap instan bahkan pada jam sibuk akhir pekan.

Arsitektur Sistem

[ Browser Klien ]
        │
        ▼ (HTTPS / TLS)
[ Reverse Proxy Nginx & Pembatas Laju Request ]
        │
        ▼
[ Layanan REST API Node.js ]
        │
        ├───> [ Penyimpanan Dokumen MongoDB ] (Pengguna, Layanan, Log Audit)
        │
        ├───> [ Cache Status Node Dalam Memori ] <─── (Polling berkala tiap 30s) ─── [ Node Hypervisor ]
        │
        └───> [ Bot Integrasi Discord ] ─── (REST API / OAuth2) ───> [ Server Komunitas Discord ]

Hasil Operasional & Keterbatasan

  • Pengurangan Beban Dukungan Teknis: Pengalihan pemeriksaan status ke halaman swalayan memangkas volume tiket pertanyaan berulang secara drastis.
  • Pemberian Akses Instan: Otomasi penugasan role Discord berjalan dalam waktu kurang dari 5 detik setelah verifikasi pembayaran, menghapus penundaan verifikasi manual oleh moderator.
  • Stabilitas Saat Lonjakan Trafik: Arsitektur proxy cache dan konfigurasi reverse proxy Nginx berhasil menjaga kestabilan portal saat pengumuman event komunitas dirilis.
  • Keterbatasan Terbuka: Rekonsiliasi transaksi masih bergantung pada webhook dari payment gateway pihak ketiga; pemrosesan ulang webhook diperlukan jika gateway hulu mengalami pemeliharaan sistem.

Teknologi yang Digunakan

  • Frontend: React, HTML5, CSS Modern, Sistem Grid Responsif
  • Backend: Node.js, Express REST API, Discord.js
  • Basis Data: MongoDB (Konfigurasi Klaster & Optimasi Indeks)
  • Web Server & Keamanan: Nginx, Certbot SSL, Fail2ban, UFW
  • Identitas & Protokol: OAuth2 (Discord API), JSON Web Tokens (JWT)