🌐 Case Study: PT Tiga Saudagar Sukses Bersama (TSSB) Enterprise Platform

📌 Gambaran Proyek

TSSB adalah platform company profile korporat komprehensif yang dibangun dari nol sebagai pintu digital utama perusahaan. Platform ini dirancang untuk menampilkan layanan utama, portofolio proyek, manajemen tim, hingga modul peluang karir secara dinamis, aman, dan berkinerja tinggi.

Peran: Full-Stack Developer & Cloud Infrastructure Engineer
Tanggung Jawab: Pengembangan end-to-end, desain arsitektur sistem, pemodelan skema database, pembuatan panel admin khusus, implementasi multi-bahasa (i18n), otomatisasi deployment, hingga optimasi performa pada infrastruktur edge.

🛠️ Tech Stack & Infrastruktur

Frontend & UI: Astro 6 (Server-Side Rendering) & Svelte 5 (Islands/Components)
Styling: Tailwind CSS v4 (Mobile-first & adaptive design)
Backend Runtime: Astro API Routes running on Cloudflare Workers
Database Engine: Neon PostgreSQL via @neondatabase/serverless (HTTP-based)
Cloud Infrastructure: Cloudflare Hyperdrive (connection pooling), Cloudflare KV (session state), Cloudflare Images (media optimization)
Security Suite: Cloudflare Turnstile (bot protection), Web Crypto API (HMAC-SHA256 tokens), layered rate limiting

🏗️ Arsitektur & Fitur Utama

1. Core Architecture

SSR-First & Edge Native: Seluruh halaman di-render di sisi server (server-side) langsung dari jaringan edge terdekat Cloudflare untuk optimasi SEO maksimal dan Startup Time di bawah 50ms.
Bilingual i18n Routing: Sistem multi-bahasa penuh (Bahasa Indonesia & Inggris) yang diintegrasikan langsung ke dalam struktur routing berbasis locale (/id/ dan /en/).
Singleton Database Client: Optimalisasi koneksi database melalui caching instance Neon HTTP client per Worker untuk memangkas latensi cold start.
Layered Middleware: Konsolidasi penanganan security headers, rate limiting, proteksi autentikasi admin, dan CORS management ke dalam satu berkas middleware.ts terpadu.

2. Fitur Pengguna & Admin

Dynamic Landing Page: Bagian hero interaktif, ringkasan layanan korporat, dan visualisasi portofolio.
Full Modular Sections: Halaman dedikasi untuk About, Services, Projects, News, Team, Career, dan Investor Relations.
Single Page Application (SPA) Admin Panel: Panel kontrol admin terproteksi password dengan fitur CRUD (Create, Read, Update, Delete) penuh untuk manajemen konten berita, proyek, karir, dan tim.
Smart Security Features: Formulir kontak anti-spam (Turnstile), progressive delay pada sistem login untuk meredam serangan brute force, dan deteksi otomatis tema gelap (dark mode) berdasarkan preferensi sistem operasi.

💡 Tantangan Teknis & Solusi Rekayasa

1. Abstraksi Query pada Serverless Driver

Tantangan: Driver neon() mengembalikan array baris secara langsung, berbeda dengan PostgreSQL driver konvensional yang mengembalikan struktur objek {rows: [...]}.

Solusi: Membangun custom query wrapper mandiri untuk melakukan konversi otomatis pada placeholder parameter ($N) dan standarisasi parameterized queries.

2. Resolusi Environment Variables pada Runtime Workers

Tantangan: Pustaka bawaan import.meta.env di-inline saat proses kompilasi (build), membuat variabel non-publik gagal terbaca pada fase runtime Cloudflare Workers.

Solusi: Menstandardisasi seluruh pembacaan konfigurasi sensitif (seperti Turnstile keys) menggunakan process.env yang terikat langsung ke variabel enkripsi di wrangler.toml.

3. Collision pada Struktur Dynamic Routing

Tantangan: Terjadi tabrakan rute (route collision) pada pola 2-segment di bawah folder dinamis [locale]/ ketika mencoba mengakses modul admin.

Solusi: Merestrukturisasi hierarki routing dengan memindahkan seluruh jalur panel kontrol ke segmen 3 tingkat (misalnya: /admin/projects/list).

4. Stateless Session Authentication yang Aman

Tantangan: Kebutuhan sistem autentikasi admin yang aman tanpa bergantung pada cookies tradisional atau modul bawaan Node.js (node:crypto) yang tidak didukung penuh oleh edge runtime.

Solusi: Mengembangkan token sesi berbasis HMAC menggunakan standar industri Web Crypto API (crypto.subtle) untuk verifikasi token yang sangat cepat di sisi edge.

🚀 Dampak & Hasil Proyek

Membangun platform yang 100% Serverless, menekan biaya operasional infrastruktur (Zero Cold Starts & Cost-Effective).
Berhasil meluncurkan website korporat multi-bahasa yang stabil dengan loading time instan secara global.
Panel admin terlindungi secara berlapis dengan batasan akses berbasis IP whitelist dan token kriptografi.
Formulir kontak bersih dari spam otomatis berkat proteksi Turnstile, di mana seluruh data pesan tersimpan rapi pada database relasional.
Arsitektur kode berbasis komponen modular yang memudahkan skalabilitas penambahan fitur atau halaman baru di masa mendatang.

Membangun website TSSB