# Studi Kasus Engineering — ERP & DevOps | Matthews Wong

> Studi kasus engineering nyata oleh Matthews Wong di DevOps, sistem ERP, dan aplikasi web, lengkap dengan masalah, pendekatan, dan hasil yang terukur.

URL: https://www.matthewswong.com/id/case-studies/

## Memangkas Origin Transfer Situs Next.js hingga 90%

Bagaimana portfolio ini berubah dari jebol kuota bandwidth Vercel menjadi 495 halaman statis penuh yang dilayani langsung dari CDN.

**Problem.** Portfolio ini jebol kuota Fast Origin Transfer Vercel — 15,13 GB terpakai dari limit 10 GB. Semua halaman di-SSR secara dinamis karena getMessages() dari next-intl tanpa setRequestLocale memaksa dynamic rendering, dan tiap response membawa payload i18n sebesar 1,6 MB: teks lengkap 218 blog post dikirim ke client provider di setiap halaman.

- Profiling penggunaan origin transfer per path untuk menemukan route mana yang benar-benar menghabiskan kuota.
- Menambahkan setRequestLocale supaya next-intl tidak lagi memaksa dynamic rendering, sehingga static rendering aktif di seluruh situs.
- Membuang konten blog dari client messages (1.589 KB → 76 KB, −95%), lalu meng-inject ulang hanya konten post yang sedang dibuka di tiap halaman blog.
- Menambahkan generateStaticParams untuk 436 blog path agar setiap post di-prerender saat build.
- Mengompres ulang 67 gambar (54,7 MB → 14,8 MB), menambahkan immutable cache header, dan mengaktifkan kembali ETag.

**Outcome.** 495 halaman kini di-prerender dan dilayani dari CDN, origin transfer terpangkas lebih dari 90%, dan LCP tidak lagi tertahan oleh satu megabyte JSON.

- −95% payload i18n
- 495 halaman statis
- −73% ukuran gambar
- >90% pengurangan origin transfer

Stack: Next.js App Router, next-intl, Vercel, sharp

## Approval ERP: Dari Hitungan Hari ke Hitungan Jam di ANC

Menggantikan signoff invoice manual lewat email dengan approval chain berjenjang di modul AP/AR ANCoraPRO.

**Problem.** Approval invoice sepenuhnya manual — accounts payable dan receivable diproses dengan tangan, dan signoff multi-level berjalan lewat email dan chat. Akibatnya: turnaround lambat dan audit trail yang buruk.

- Membangun modul AP/AR ANCoraPRO dengan approval chain berjenjang yang dimodelkan per level organisasi.
- Mengotomasi notifikasi email di tiap tahap approval supaya approver bertindak tanpa harus dikejar-kejar.
- Mendesain data model PostgreSQL untuk invoice dan approval, dengan riwayat lengkap setiap keputusan.
- Deploy di Google Cloud di belakang Nginx untuk penggunaan produksi.

**Outcome.** Turnaround approval invoice berkurang dari hitungan hari menjadi hitungan jam, lengkap dengan audit trail siapa menyetujui apa dan kapan.

- Days → Hours turnaround approval
- Multi-level approval chain

Stack: React, Vite, Material UI, NestJS, PostgreSQL, Google Cloud, Nginx

## Observability Self-Hosted untuk VPS Produksi

Satu pane of glass di Grafana — metrics, log, dan alerting sampai telepon berdering — untuk semua server produksi yang saya kelola.

**Problem.** Beberapa server produksi (situs Jerman dan Indonesia) tidak punya tampilan terpadu untuk CPU, memory, maupun log. Insiden didiagnosis dengan SSH dari satu server ke server lain, dan tidak ada alerting sama sekali.

- Deploy Grafana + Prometheus (node dan container exporter) + Loki untuk log di semua VPS produksi.
- Membangun dashboard untuk kesehatan per server dan konsumen resource terbesar.
- Membuat log level bisa dicari per server dan memonitor kesehatan setiap scrape target.
- Menyiapkan on-call alerting dengan escalation chain yang membuat telepon developer berdering.

**Outcome.** Satu pane of glass untuk semua server produksi. Insiden kini terdeteksi lewat alert, bukan laporan pengguna, sehingga uptime situs klien tetap terjaga.

- 1 dashboard untuk semua server
- 24/7 alerting dengan eskalasi

Stack: Grafana, Prometheus, Loki, Docker, Ansible

## Observer KPU: Platform Informasi Pemilu Berbasis AI

Satu sumber informasi terverifikasi yang bisa ditanyai untuk Pemilu Indonesia 2024, dengan LLM chatbot di atasnya.

**Problem.** Selama Pemilu Indonesia 2024, informasi terverifikasi tersebar di banyak sumber dan sulit dicari di satu tempat.

- Membangun platform yang mengumpulkan informasi pemilu terverifikasi ke satu tempat.
- Menambahkan antarmuka LLM chatbot supaya pengguna bisa bertanya dengan bahasa sehari-hari.
- Membangun pipeline web-scraping untuk menjaga sumber tetap up to date.
- Merilis frontend Next.js yang ditopang backend Python.

**Outcome.** Satu sumber informasi pemilu selama Pemilu 2024, dan dipresentasikan di SGU IT Symposium 2024.

- 2024 Pemilu Indonesia
- SGU apresiasi IT Symposium

Stack: Next.js, Python, LLM, web scraping

---

- HTML version: https://www.matthewswong.com/id/case-studies/
- English: https://www.matthewswong.com/en/case-studies/
- Site index for agents: https://www.matthewswong.com/llms.txt
- Sitemap: https://www.matthewswong.com/sitemap.xml
- API description (OpenAPI): https://www.matthewswong.com/openapi.json