fullstack-patterns

# Fullstack Patterns Skill

Patterns for building complete features across all application layers.

## End-to-End Feature Implementation

### Feature: User Profile Management

**Step 1: Database Schema**

```prisma
model Profile {
  id        String   @id @default(uuid())
  userId    String   @unique
  bio       String?  @db.Text
  website   String?
  location  String?
  avatarUrl String?

  user      User     @relation(fields: [userId], references: [id], onDelete: Cascade)

  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}
```

**Step 2: Shared Types**

```typescript
// shared/types/profile.ts
export interface Profile {
  id: string;
  userId: string;
  bio: string | null;
  website: string | null;
  location: string | null;
  avatarUrl: string | null;
}

export interface UpdateProfileInput {
  bio?: string;
  website?: string;
  location?: string;
}
```

**Step 3: Validation Schema**

```typescript
// shared/schemas/profile.ts
import { z } from 'zod';

export const updateProfileSchema = z.object({
  bio: z.string().max(500).optional(),
  website: z.string().url().optional().or(z.literal('')),
  location: z.string().max(100).optional(),
});

export type UpdateProfileInput = z.infer<typeof updateProfileSchema>;
```

**Step 4: Backend Service**

```typescript
// backend/services/profile.ts
export const profileService = {
  async getByUserId(userId: string): Promise<Profile | null> {
    return prisma.profile.findUnique({
      where: { userId },
    });
  },

  async upsert(userId: string, data: UpdateProfileInput): Promise<Profile> {
    return prisma.profile.upsert({
      where: { userId },
      create: { userId, ...data },
      update: data,
    });
  },
};
```

**Step 5: Backend Controller**

```typescript
// backend/controllers/profile.ts
export const profileController = {
  async get(req: Request, res: Response) {
    const profile = await profileService.getByUserId(req.user.id);
    res.json({ data: profile });
  },

  async update(req: