# Engineering Case Studies — ERP & DevOps | Matthews Wong

> Real engineering case studies by Matthews Wong across DevOps, ERP systems, and web applications, each with the problem, the approach, and the outcomes.

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

## Cutting a Next.js Site's Origin Transfer by 90%

How this portfolio went from blowing its Vercel bandwidth quota to serving 495 fully static pages from the CDN.

**Problem.** This portfolio blew through its Vercel Fast Origin Transfer quota — 15.13 GB used against a 10 GB limit. Every page was dynamically SSR'd because next-intl's getMessages() without setRequestLocale forced dynamic rendering, and each response embedded a 1.6 MB i18n payload: the full text of 218 blog posts shipped to the client provider on every single page.

- Profiled origin transfer usage by path to find which routes were actually burning the quota.
- Added setRequestLocale so next-intl no longer forced dynamic rendering, enabling static rendering across the site.
- Stripped blog content from the client messages (1,589 KB → 76 KB, −95%), re-injecting only the current post's content on each blog page.
- Added generateStaticParams for all 436 blog paths so every post is prerendered at build time.
- Recompressed 67 images (54.7 MB → 14.8 MB), added immutable cache headers, and re-enabled ETags.

**Outcome.** 495 pages are now prerendered and served from the CDN, origin transfer was cut by more than 90%, and LCP is no longer gated on a megabyte of JSON.

- −95% i18n payload
- 495 static pages
- −73% image weight
- >90% origin transfer reduction

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

## ERP Approvals: From Days to Hours at ANC

Replacing manual, email-driven invoice signoffs with hierarchical approval chains in ANCoraPRO's AP/AR module.

**Problem.** Invoice approvals were entirely manual — accounts payable and receivable were processed by hand, and multi-level signoffs happened over email and chat. The result: slow turnaround and a poor audit trail.

- Built the AP/AR module of ANCoraPRO with hierarchical approval chains modeled per organization level.
- Automated email notifications at each approval step so approvers act without being chased.
- Designed the PostgreSQL data model for invoices and approvals, keeping a complete history of every decision.
- Deployed on Google Cloud behind Nginx for production use.

**Outcome.** Invoice approval turnaround was reduced from days to hours, with a full audit trail of who approved what and when.

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

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

## Self-Hosted Observability for Production VPSs

One Grafana pane of glass — metrics, logs, and phone-call alerting — for every production server I run.

**Problem.** Multiple production servers (German and Indonesian sites) had no unified view of CPU, memory, or logs. Incidents were diagnosed by SSH-ing from box to box, and there was no alerting at all.

- Deployed Grafana + Prometheus (node and container exporters) + Loki for logs across all production VPSs.
- Built dashboards for per-server health and top resource consumers.
- Made log levels searchable per server and monitored the health of every scrape target.
- Set up on-call alerting with escalation chains that ring developers' phones.

**Outcome.** A single pane of glass for every production server. Incidents are now surfaced by alerts instead of user reports, protecting uptime for client-facing sites.

- 1 dashboard for all servers
- 24/7 alerting with escalation

Stack: Grafana, Prometheus, Loki, Docker, Ansible

## Observer KPU: AI Election Information Platform

A single, queryable source of verified information for Indonesia's 2024 general election, with an LLM chatbot on top.

**Problem.** During the 2024 Indonesian general election, verified information was scattered across many sources and hard to query in one place.

- Built a platform that aggregates verified election information into a single place.
- Added an LLM chatbot interface so users can ask questions in natural language.
- Built a web-scraping pipeline to keep sources up to date.
- Shipped a Next.js frontend backed by a Python backend.

**Outcome.** A single source for election information throughout the 2024 election, presented at the SGU IT Symposium 2024.

- 2024 Indonesian general election
- SGU IT Symposium recognition

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

---

- HTML version: https://www.matthewswong.com/en/case-studies/
- Bahasa Indonesia: https://www.matthewswong.com/id/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