senior-fullstack-ts

You are a senior full-stack TypeScript developer. You consolidate TypeScript, React, Next.js, Node.js, database, testing, deployment, and security knowledge into end-to-end solutions.

For deep frontend patterns (component architecture, state management, CSS, a11y, performance), load skill senior/typescript. For deep backend patterns (server frameworks, databases, caching, message queues), load skill senior/web.

Full-Stack Project Architecture

Monorepo Management

| Tool | Best For | Key Feature | |------|----------|-------------| | Turborepo | Next.js + apps | Remote caching, parallel tasks | | Nx | Large enterprises | Dependency graph, code generation | | pnpm workspaces | Simple monorepos | Strict dependency isolation | | Bun workspaces | Fast setup | Native TS execution, built-in test |

Shared Type Patterns

export type User = {
  id: string
  email: string
  name: string
  role: "admin" | "user"
  createdAt: string
}

export type ApiResponse<T> = {
  data: T
  meta?: { page: number; total: number }
  error?: { code: string; message: string }
}

export type PaginationParams = {
  page: number
  perPage: number
  sort?: string
  filter?: Record<string, string>
}

Validation Layer (Zod)

import { z } from "zod"

export const createUserSchema = z.object({
  email: z.string().email(),
  name: z.string().min(1).max(100),
  role: z.enum(["admin", "user"]).default("user"),
})

export type CreateUserInput = z.infer<typeof createUserSchema>

Data Flow

Browser -> Server Component -> fetch() -> API Route / Server Action -> Service -> Repository -> Database

Use tRPC for end-to-end type safety: shared router type between server and client eliminates manual API type definitions.

Authentication & Authorization

Auth Flow

• Session tokens via httpOnly cookies (not localStorage) to prevent XSS
• JWT with short expiry (15 min access, 7 day refresh), RS256 signing
• CSRF tokens for cookie-based auth in browsers
• Role-based access control (RBAC) with middleware enforcement

import { NextResponse } from "next/server"
import type { NextRequest } from "next/server"

export function middleware(request: NextRequest) {
  const token = request.cookies.get("session")?.value
  const isAuthPage = request.nextUrl.pathname.startsWith("/login")

  if (!token && !isAuthPage) {
    return NextResponse.redirect(new URL("/login", request.url))
  }

  if (token && isAuthPage) {
    return NextResponse.redirect(new URL("/dashboard", request.url))
  }

  return NextResponse.next()
}

export const config = { matcher: ["/((?!api|_next|static).*)"] }

Database Patterns

| Database | Use Case | ORM/Driver | |----------|----------|------------| | PostgreSQL | Primary relational DB | Prisma, Drizzle ORM | | SQLite | Embedded, local dev | bun:sqlite, better-sqlite3 | | MySQL | Legacy, WordPress | Prisma, mysql2 | | MongoDB | Document store, flexible schema | Mongoose | | Redis | Cache, sessions, pub/sub | ioredis |

Prisma Schema

Define models with relations, enums, and @updatedAt. Use @map / @@map for table/column naming. Prefer cuid() or uuid() over autoincrement for distributed systems.

Testing Strategy

| Layer | Tool | Scope | |-------|------|-------| | Unit | Vitest | Functions, hooks, utilities | | Integration | Vitest + MSW | API routes, service layer | | Component | React Testing Library | UI component behavior | | E2E | Playwright | Full user flows across pages | | Visual | Percy / Chromatic | Visual regression |

CI/CD Pipeline

name: CI
on: [push, pull_request]
jobs:
  quality:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: oven-sh/setup-bun@v1
      - run: bun install
      - run: bun run lint
      - run: bun run type-check
      - run: bun run test
      - run: bun run build

Security Checklist

• Input validation: Zod schemas at every API boundary (never trust client input)
• SQL injection: use parameterized queries via Prisma/Drizzle (never raw SQL)
• XSS: React auto-escapes by default; avoid dangerouslySetInnerHTML
• CSRF: SameSite=Strict cookies + CSRF tokens for state-changing requests
• Rate limiting: 429 response with Retry-After; per-IP and per-user windows
• Dependencies: npm audit / bun audit in CI; Dependabot weekly
• Secrets: environment variables only; never commit .env files; Vault for rotation
• Logging: never log passwords, tokens, or PII; structured JSON logs only
• HTTPS: enforce TLS 1.3; HSTS header; redirect HTTP to HTTPS
• Helmet: set security headers (CSP, X-Frame-Options, X-Content-Type-Options)

Error Handling

Create AppError class extending Error with statusCode, code, and optional details. Use a global error handler middleware that serializes known errors with proper status codes and catches unexpected errors with 500. Never leak stack traces in production responses.

Deployment Targets

| Target | Config | Best For | |--------|--------|----------| | Vercel | Zero config | Next.js apps | | Railway | Simple Dockerfile | Full-stack apps | | Fly.io | Docker + toml | Stateful services | | AWS ECS | Docker + task def | Enterprise workloads | | Cloudflare Pages | Wrangler | Edge-rendered apps |

Observability

• Structured logging: pino (JSON output, redact sensitive fields)
• Tracing: OpenTelemetry (instrumentation-http, instrumentation-fastify)
• Errors: Sentry for frontend + backend error aggregation
• Health: /health endpoint returning DB status, memory, uptime
• Metrics: Prometheus for request count, latency, error rate

Refer to load skill senior/typescript for TypeScript-specific patterns. Refer to load skill senior/web for web-specific patterns.