Fullstack Expert (2026 Multi-Language Edition)

English | Bahasa Indonesia

---

English

Orchestration & Integration

Connects and orchestrates with relevant domain skills like brainstorming, zero-to-prod-orchestrator, and project-context-mapper to ensure cohesive execution.

Description

Expert-level fullstack development across multiple languages and frameworks. Covers tech stack selection, API design (REST/gRPC/GraphQL), microservice architecture, DevOps, system design patterns, and AI-native backend integration for 2026.

Trigger Conditions

• Choosing the right language and framework for a new service or feature.
• Designing APIs between services in a multi-language architecture.
• Planning a microservices decomposition strategy.
• Implementing system design patterns (event sourcing, CQRS, saga pattern).
• Integrating AI agents or LLM capabilities into a backend system.

2026 Technology Matrix

Frontend

Tool	Version	Notes
React	19.x	Compiler, Server Actions, use() hook
Next.js	15.x	PPR, RSC, App Router stable
Astro	5.x	Islands architecture, MDX, SSG
TanStack Router	1.x	Type-safe SPA routing
TanStack Start	Beta	Full-stack Vite + RSC patterns
Nuxt	4.x	Vue 3 SSR/SSG, stable
SvelteKit	2.x	Lightweight, edge-ready

Backend

Language	Framework	Best For
TypeScript	Hono, Fastify 5, NestJS	Serverless, edge, type-safe RPC
Python	FastAPI 0.115+, Django 5	AI/ML workloads, data pipelines
Go	net/http (1.22+), Gin, Echo	High-throughput microservices, CLI
Rust	Axum 0.8, Actix-web 4	Performance-critical, WASM

AI & Agents

Tool	Role
Vercel AI SDK 5.x	Full-stack AI streaming, RSC
Mastra.ai	TS-first agent framework
LangGraph	Python stateful agent workflows
OpenAI Agents SDK	GPT-5 native agents + handoffs
Google ADK	Gemini-powered agents
Mem0 / MemGPT	Long-term agent memory

Infrastructure

Category	Tools
Container	Docker, Podman
Orchestration	Kubernetes, Railway, Fly.io
CI/CD	GitHub Actions, Turborepo
Observability	OpenTelemetry 1.x, Grafana, Langfuse
Databases	PostgreSQL (primary), ClickHouse (analytics), Redis (cache), Qdrant (vector)

API Design Standards

REST — OpenAPI 3.1

# openapi.yaml
openapi: "3.1.0"
info:
  title: "My SaaS API"
  version: "1.0.0"
paths:
  /api/v1/workspaces/{id}:
    get:
      summary: "Get workspace by ID"
      parameters:
        - name: id
          in: path
          required: true
          schema: { type: string, format: uuid }
      responses:
        "200":
          content:
            application/json:
              schema: { $ref: "#/components/schemas/Workspace" }
        "404":
          content:
            application/json:
              schema: { $ref: "#/components/schemas/ProblemDetail" }

gRPC — Protocol Buffers

syntax = "proto3";
package user.v1;

service UserService {
  rpc GetUser (GetUserRequest) returns (User);
  rpc ListUsers (ListUsersRequest) returns (stream User);  // Server streaming
  rpc CreateUser (CreateUserRequest) returns (User);
}

message User {
  string id = 1;
  string email = 2;
  string name = 3;
  repeated string workspace_ids = 4;
}

Microservice Patterns

Event-Driven (Saga Pattern)

Order Service ──publishes──> "order.created" ──> Payment Service
                                                      │
                                               ┌──────┴──────┐
                                          success?       failure?
                                              │               │
                                   "payment.succeeded"  "payment.failed"
                                              │               │
                                      Inventory Service  Order Service
                                      (reserve stock)    (cancel order)

CQRS (Command Query Responsibility Segregation)

• Write side: Commands update the primary PostgreSQL database.
• Read side: Events are projected into read-optimized views (denormalized tables or ClickHouse).
• Use when read patterns are very different from write patterns.

AI-Native Backend Integration (2026)

// Pattern: AI as a service within existing API
import { generateObject } from 'ai';
import { anthropic } from '@ai-sdk/anthropic';
import { z } from 'zod';

// AI endpoint that returns structured data
app.post('/api/analyze', async (c) => {
  const { content } = await c.req.json();

  const { object } = await generateObject({
    model: anthropic('claude-4-sonnet'),
    schema: z.object({
      sentiment: z.enum(['positive', 'neutral', 'negative']),
      topics: z.array(z.string()),
      summary: z.string().max(200),
    }),
    prompt: `Analyze this content: ${content}`,
  });

  return c.json(object);
});

SPA vs SSR vs Static — Decision Guide

SEO-critical + mostly read? → Next.js SSR / Astro 5 (static)
Highly interactive dashboard? → SPA (TanStack Start / Vite + TanStack Router)
   → see spa-orchestrator skill for architecture details
Mixed (marketing + app)?    → Next.js 15 with hybrid routing
Real-time data?             → SSR + WebSocket or SSE streaming

Monorepo with Shared Types

// packages/types/src/index.ts — single source of truth
export interface User {
  id: string;
  email: string;
  name: string;
  plan: 'free' | 'pro' | 'enterprise';
  isSuperAdmin: boolean;
}

// apps/api & apps/web use the same type
import type { User } from '@myapp/types';

Security Checklist (Fullstack)

• All user inputs validated with Zod on the server.
• JWT secrets rotated every 90 days; use short expiry + refresh tokens.
• CSP headers configured (no unsafe-inline in production).
• All DB queries use parameterized queries.
• Rate limiting on all public API endpoints.
• Super Admin routes restricted to admin.domain.com with isSuperAdmin check.

Code Review Standards

• Functions < 30 lines; files < 300 lines.
• No business logic in UI components.
• Every PR includes relevant tests (unit or E2E).
• No any types in TypeScript production code.
• Dependencies audited with pnpm audit on every PR.

---

Bahasa Indonesia

Integrasi Orkestrasi

Terhubung dan mengorkestrasi skill domain yang relevan seperti brainstorming, zero-to-prod-orchestrator, dan project-context-mapper untuk memastikan eksekusi yang kohesif.

Deskripsi

Panduan pengembangan fullstack tingkat ahli di berbagai bahasa dan framework. Mencakup pemilihan tech stack, desain API (REST/gRPC/GraphQL), arsitektur microservice, DevOps, pola desain sistem, dan integrasi backend AI-native untuk 2026.

Kondisi Pemicu

• Memilih bahasa dan framework yang tepat untuk layanan atau fitur baru.
• Merancang API antar layanan dalam arsitektur multi-bahasa.
• Merencanakan strategi dekomposisi microservice.
• Mengimplementasikan pola desain sistem (event sourcing, CQRS, saga pattern).
• Mengintegrasikan agen AI atau kemampuan LLM ke dalam sistem backend.

Matriks Teknologi 2026

Frontend

React 19 + Next.js 15 (default SaaS), Astro 5 (konten), TanStack Router (SPA), Nuxt 4 (Vue), SvelteKit 2.

Backend

TypeScript/Hono (serverless, edge), Python/FastAPI (AI/ML), Go/net/http (throughput tinggi), Rust/Axum (kritis performa).

AI & Agen

Vercel AI SDK 5.x, Mastra.ai, LangGraph, OpenAI Agents SDK, Google ADK, Mem0/MemGPT untuk memori agen jangka panjang.

Infrastruktur

Docker/Kubernetes, GitHub Actions + Turborepo, OpenTelemetry 1.x, Langfuse. Database: PostgreSQL (utama), ClickHouse (analitik), Redis (cache), Qdrant (vektor).

Standar Desain API

• REST + OpenAPI 3.1: Untuk API publik dengan beberapa konsumen.
• gRPC: Untuk komunikasi antar layanan internal berkinerja tinggi.
• Hono RPC / tRPC: Untuk komunikasi full-stack TypeScript type-safe tanpa codegen.

Pola Microservice

Event-Driven (Saga Pattern)

Orkestrasi transaksi terdistribusi melalui event — setiap layanan mempublikasikan event setelah berhasil; kegagalan memicu kompensasi di seluruh rantai.

CQRS

Pisahkan sisi tulis (PostgreSQL) dari sisi baca (view terdenormalisasi atau ClickHouse) ketika pola baca sangat berbeda dari pola tulis.

Integrasi Backend AI-Native (2026)

Gunakan Vercel AI SDK generateObject() dengan skema Zod untuk mengintegrasikan kemampuan AI ke endpoint API yang ada — mengembalikan output terstruktur yang dijamin sesuai tipe.

SPA vs SSR vs Static

Gunakan SSR/Astro untuk situs kritis SEO dan banyak baca. Gunakan SPA (TanStack Start) untuk dashboard yang sangat interaktif. Gunakan Next.js 15 dengan routing hybrid untuk aplikasi campuran (marketing + app).

Monorepo dengan Shared Types

Definisikan interface dan tipe bersama di packages/types — digunakan oleh semua app (web, admin, api, mobile) sebagai single source of truth.

Checklist Keamanan & Code Review

• Input pengguna divalidasi Zod di server.
• Header CSP dikonfigurasi & parameterized query untuk DB.
• Rate limiting di semua endpoint publik.
• Rute Super Admin dibatasi di subdomain dengan cek isSuperAdmin.
• Tidak ada logika bisnis di komponen UI; wajib ada unit/E2E test pada PR.
• Tidak ada tipe any pada kode TypeScript produksi.