senior-fullstack

name	senior-fullstack
description	Complete toolkit for senior fullstack with modern tools and best practices / Perangkat instruksi lengkap untuk pengembang fullstack tingkat senior dengan alat-alat dan best practices termutakhir.
author	Roedy Rustam

Senior Fullstack Specialist

English | Bahasa Indonesia

---

English

Description

A comprehensive blueprint and toolkit for senior fullstack engineers, covering production-grade architecture, database optimization, advanced state management, micro-interactions, robust CI/CD, and system security.

Core Capabilities

• Fullstack Scaffolder: Automated scaffolder that spins up highly structured workspaces with embedded security defaults, CSP configuration, and database clients (Prisma/Drizzle).
• Project Scaffolder: Performs static analysis on active fullstack codebases to flag scaling risks (such as N+1 query patterns).
• Code Quality Analyzer: Validates test coverage, scans for insecure CORS policies, and detects hardcoded secrets.

Modern Tech Stack (2026)

• Languages: TypeScript, JavaScript, SQL, Python, Go.
• Frontend: React 19, Next.js 15 (App Router), Tailwind CSS v4, shadcn/ui.
• State & Fetching: TanStack Query v5, React Server Actions, Zustand.
• Database & ORMs: PostgreSQL, Drizzle ORM, Prisma, Redis, Supabase, Neon.
• Operations & Security: Docker, GitHub Actions, AWS/Vercel, Sentry, Snyk.

Senior Best Practices

• Code Quality: Enforce strict: true in tsconfig.json, avoid any typings, and validate API payloads with Zod.
• Database Scaling: Always use connection pooling, add indexes on query columns, and enforce Row-Level Security (RLS) on tenant tables.
• Security: Enforce strict security headers (CSP, HSTS), validate external webhook signatures (e.g., Stripe), and implement rate limiting.
• Architecture Choice: Consider the Multi-Page Application (MPA) approach in a single repository (via mpa-orchestrator) for projects prioritizing SEO, fast initial loads, and simpler deployment models over heavy client-side state.

Troubleshooting

• Hydration Mismatch: Avoid client-only browser state (like localStorage) during initial render. Wrap blocks in useEffect or use next/dynamic with { ssr: false }.
• Postgres Connection Spikes: Reduce pool size and use a transaction pooler (pgBouncer/Supavisor) with pool_mode=transaction.
• Stale Server Action UI: Call revalidatePath() or revalidateTag() immediately after database transactions succeed.

Reference Documentation

• Tech Stack Guide
• Architecture Patterns
• Development Workflows

---

Bahasa Indonesia

Deskripsi

Panduan komprehensif dan perangkat instruksi untuk insinyur fullstack tingkat senior. Mencakup arsitektur tingkat produksi, optimasi database, manajemen state lanjutan, mikro-interaksi, CI/CD yang tangguh, dan keamanan sistem.

Kemampuan Utama

• Fullstack Scaffolder: Script otomatis untuk merancang workspace fullstack terstruktur dengan keamanan dasar, konfigurasi CSP, dan database client (Prisma/Drizzle).
• Project Scaffolder: Melakukan analisis statis pada codebase untuk mendeteksi risiko skalabilitas (seperti N+1 query ORM).
• Code Quality Analyzer: Memvalidasi cakupan pengujian, memantau celah keamanan CORS, dan mendeteksi rahasia (secrets) yang tertulis keras (hardcoded).

Stack Teknologi Modern (2026)

• Bahasa: TypeScript, JavaScript, SQL, Python, Go.
• Frontend: React 19, Next.js 15 (App Router), Tailwind CSS v4, shadcn/ui.
• State & Fetching: TanStack Query v5, React Server Actions, Zustand.
• Database & ORM: PostgreSQL, Drizzle ORM, Prisma, Redis, Supabase, Neon.
• Operasional & Keamanan: Docker, GitHub Actions, AWS/Vercel, Sentry, Snyk.

Praktik Terbaik Senior

• Kualitas Kode: Terapkan strict: true di tsconfig.json, hindari tipe any, dan gunakan Zod untuk validasi payload API.
• Skalabilitas Database: Gunakan connection pooling, buat index pada kolom query, dan terapkan Row-Level Security (RLS) pada tabel bertingkat tenant.
• Keamanan: Terapkan header keamanan yang ketat (CSP, HSTS), validasi tanda tangan webhook eksternal (misal Stripe), dan pasang rate limiting.
• Pemilihan Arsitektur: Pertimbangkan pendekatan Multi-Page Application (MPA) dalam satu repositori (via mpa-orchestrator) untuk proyek yang mengutamakan SEO, pemuatan awal yang cepat, dan model deployment yang lebih sederhana dibandingkan state sisi klien yang berat.

Pemecahan Masalah (Troubleshooting)

• Hydration Mismatch: Hindari browser state khusus client (seperti localStorage) selama render awal. Bungkus block dalam useEffect atau gunakan next/dynamic dengan { ssr: false }.
• Lonjakan Koneksi Postgres (Connection Spikes): Kurangi ukuran pool dan gunakan transaction pooler (pgBouncer/Supavisor) dengan pool_mode=transaction.
• UI Server Action yang Usang (Stale): Panggil revalidatePath() atau revalidateTag() segera setelah transaksi database berhasil.

Referensi Dokumentasi

• Tech Stack Guide
• Architecture Patterns
• Development Workflows