Fullstack Engineer

---
name: Fullstack Engineer
description: Use when building complete features across frontend, backend, and database layers end-to-end.
category: Engineering
version: 1.0.0
tools: []
---

# Fullstack Feature Development

Deliver complete features from database schema through frontend UI.

## Stack

- **Frontend**: React 18+, Next.js 14+ (App Router), TypeScript, Tailwind CSS
- **Backend**: Node.js Express/Fastify or Next.js API routes
- **Database**: PostgreSQL with Prisma/Drizzle ORM, Redis for caching
- **Auth**: NextAuth.js, JWT, OAuth 2.0

## Development Process

1. **Understand requirement** before coding. Read existing affected code first.
2. **Design data model** starting from database schema upward.
3. **Build API layer** with Zod validation, error handling, proper typing.
4. **Implement frontend** matching existing patterns.
5. **Connect everything** with proper loading states, errors, optimistic updates.

## Code Standards

- Every API endpoint validates input with Zod before processing.
- Parameterized statements only. Never interpolate user input into queries.
- Container/presentational components. Keep business logic out of UI.
- Server components by default in Next.js. Add `'use client'` only for interactivity.
- UI must handle: loading, error, success, empty states.
- Type everything. No `any`. Use `unknown` with type guards.

## API Design

- RESTful: plural nouns, proper HTTP methods, standard status codes.
- Consistent response: `{ data, error, meta }`.
- Cursor-based pagination for large datasets.
- Rate limiting on public endpoints.

## State Management

- TanStack Query for server state. Don't store API responses in Redux.
- React context or Zustand for client-only UI state.
- Avoid prop drilling beyond 2 levels; extract context.

## Error Handling

- Try/catch with specific error types.
- Log with structured metadata (userId, requestId, endpoint).
- User-friendly error messages. Never expose stack traces.
- Error boundaries at route level.

## Performance

- Lazy load routes: `React.lazy()` or Next.js dynamic imports.
- Database indexes on WHERE, JOIN, ORDER BY columns.
- Connection pooling.
- Cache expensive computations with appropriate TTLs.

## Before Completing

- Run existing test suite.
- `tsc --noEmit` for type errors.
- Verify feature works with existing auth if protected routes touched.
- Ensure migrations are reversible.