Modern Javanese Digital Wedding Platform: High-Performance Next.js 16 & Serverless Architecture cover screenshot

Case Study: Engineering an Enterprise-Grade Digital Wedding Platform with Next.js 16 and Serverless Sheets Architecture

Overview & Challenge

The digital invitation landscape is overwhelmingly populated by bloated, slow-loading page builders that depend on unvetted third-party plugins. Most existing solutions expose Google Sheets credentials directly in client-side bundles, incur severe layout shifts, lack responsive image optimizations, and ignore accessibility standards entirely.

This project re-engineers the digital wedding invitation archetype into a high-performance, security-hardened web application. It bridges authentic Indonesian cultural art (featuring Gunungan, Wayang Kulit, and Mega Mendung motifs) with modern software engineering practices: zero runtime layout shift, strict type safety, defensive sanitization against spreadsheet injection, and full WCAG 2.2 AA compliance.

Architectural Highlights

Framework Engine: Next.js 16 (App Router) powered by React 19 Server Components and Turbopack for near-instant cold starts and sub-second asset hydration.
Type System: Strict TypeScript with noUncheckedIndexedAccess enabled across all component boundaries, event handlers, and data schemas.
Serverless Data Pipeline: Zero-cost, authenticated data ingestion connecting Next.js server route handlers to Google Sheets via Google Apps Script with atomic lock enforcement.
Defensive Engineering: Multi-tier input sanitization using Zod, automatic formula neutralization (=, +, -, @), in-memory IP rate limiting, and strict Content Security Policies.
Cultural Design System: Custom three-tier CSS token hierarchy (primitives, semantics, component-specific) paired with 2x retina-sharpened alpha masks for vector-like clarity.
Universal Accessibility: Certified WCAG 2.2 Level AA compliance, zero-violation axe-core automated audit, native <dialog> trapping with background inertness, and respect for prefers-reduced-motion.

System Architecture Diagram

[ Client Browser ]
        │
        ├── 1. Request Page (/work/modern-javanese-wedding-invitation)
        ▼
[ Next.js 16 Server / Edge Runtime ]
        │  ├── Static Content Pre-rendered (SSG)
        │  ├── Sanitized Parameters (?to=Guest+Name)
        │  └── Dynamic Security Headers (CSP, Frame-Ancestors)
        │
[ Client Form Submission (RSVP & Wishes) ]
        │
        ▼ (Zod Schema Validation + Honeypot Check)
[ Next.js Route Handlers (/api/rsvp, /api/wishes) ]
        │
        ▼ (Constant-Time Token Auth, Server-to-Server HTTPS)
[ Google Apps Script Webhook Engine ]
        │
        ├── LockService Concurrency Serialization
        ├── Formula Neutralization (`=SUM(...)` Defusal)
        ▼
[ Google Sheets Database (Zero-Cost Storage) ]

Key Technical Solutions

1. Isolated Serverless Data Ingestion (Zero-Cost Backend)

Exposing Google Cloud service credentials or Sheets write-keys directly on the client invites scrapers and malicious data corruption.

Server-Side Proxy: Browser forms submit to internal Next.js server endpoints (/api/rsvp and /api/wishes). The client never handles the destination endpoint or authentication token.
Constant-Time Verification: Server-to-server webhook requests are authorized via constant-time token comparison within Google Apps Script to eliminate timing-attack vectors.
Concurrency Handling: Form submissions leverage Google Apps Script LockService, serializing write operations to prevent race conditions during high-volume event announcements.
Volatile In-Memory Fallback: During local development, the API layer automatically routes write requests to an in-memory buffer, allowing friction-free testing without touching production spreadsheets.

2. Formula Injection and Defensive Sanitization

User-generated content inside invitations (such as personal wishes and guest counts) presents a critical spreadsheet formula injection vulnerability if viewed inside Google Sheets or exported to CSV format.

Neutralization: All textual inputs beginning with dangerous spreadsheet operators (=, +, -, @) are automatically escaped with leading single quotes before cell insertion.
Strict Payload Boundaries: Every incoming request payload is capped at 8 KB and validated against Zod runtime schemas.
Spam Mitigation: Transparent honeypot traps catch automated bot submissions, while in-memory rate-limiters cap submissions at 6 attempts per 10-minute window per IP address.

3. Accessible Kinetic Interface & Cultural Asset Optimization

Traditional Indonesian decorative elements often rely on heavy raster files that degrade on high-density displays.

Retina Asset Enhancement: Source assets were pre-processed with custom Python image scripts, sharpening alpha channels and scaling them 2x to maintain crisp definition across mobile OLED and Apple Retina displays.
WCAG 2.2 AA Dialog Patterns: RSVP and calendar actions utilize native HTML <dialog> elements. When active, background sections are marked inert, and keyboard focus remains trapped within the modal until explicitly dismissed.
Motion Preferences: The entire visual suite respects user operating system settings. When prefers-reduced-motion is detected, Ken Burns zoom transitions, crossfades, and smooth auto-scrolling are instantly neutralized.

Verification, Testing, and Quality Metrics

Audit Category	Tool / Methodology	Result / Benchmark
Unit Testing	Vitest (10 test suites)	101 / 101 tests passed (Calendar, Zod, Date Math)
End-to-End Testing	Playwright (Headless Chromium)	34 / 34 checks passed (Full user journey)
Accessibility	axe-core (WCAG 2.0 - 2.2 AA)	0 violations (Cover, dialogs, form elements)
Type Integrity	TypeScript 6.0.3 Strict	0 errors (`noUncheckedIndexedAccess`)
Security Audit	npm audit	0 vulnerabilities across all production trees
Linting	ESLint Strict Ruleset	0 warnings, 0 errors

Summary & Future Roadmap

This platform proves that culturally rich, visually ornate web design does not have to come at the expense of strict security, accessibility standards, or sub-second loading performance. Future updates will focus on optional distributed caching via Redis for multi-region scale and automated calendar synchronization via push webhooks.