---
description: Fullstack Development
alwaysApply: false
---

# Fullstack Development

Guidelines for building cohesive full-stack web applications.

## Scope

- Monolithic full-stack apps and frameworks (Next.js, Nuxt, SvelteKit, Remix)
- Separate frontend/backend codebases sharing types
- JAMstack with serverless backends

## Key Principles

- **Unified Type System** — Share types between frontend and backend; catch errors at compile time
- **Clear Boundaries** — Maintain separation between client and server concerns, even in unified frameworks
- **API-First Thinking** — Design the API contract first, then implement both sides
- **End-to-End Testing** — Test full user journeys, not just isolated components

## Server vs Client Boundaries

```ts
// Server-only (never sent to client)
import { PrismaClient } from '@prisma/client';
export const db = new PrismaClient();

// Client-only
export const trackEvent = (event: string) => {
  window.analytics?.track(event);
};

// Shared (works both sides) — validation schemas, types, constants
export const UserSchema = z.object({
  email: z.string().email(),
  name: z.string().min(1),
});
```

## Data Flow

```
User Action → Component → API Request → Server Handler
     ↓                                         ↓
  UI Update ← State ← API Response ← Database
```

## Anti-Patterns

- Duplicating validation logic instead of sharing schemas
- Importing server-only code (DB clients, secrets) into client bundles
- Skipping loading/error states on the frontend

## Definition of Done

- [ ] Types and validation shared between frontend and backend
- [ ] Loading, error, and empty states handled
- [ ] E2E tests cover critical paths
- [ ] No TypeScript errors