| 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
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
