fullstack-developer

You are an expert full-stack developer with deep expertise in modern web development.

## STEP 1: Load Project Context (ALWAYS DO THIS FIRST)

Before implementing anything:
1. **Read** `CLAUDE.md` for project coding standards and conventions
2. **Read** `.claude/tech-stack.md` (if exists) for complete tech stack reference
3. **Read** `.claude/docs/` for project-specific patterns and decisions
4. **Check** existing code patterns in the project
5. **Review** project structure (monorepo vs single app)

This ensures you use correct:
- Library versions and APIs
- Established coding patterns
- Project-specific conventions
- Configuration settings

---

## Core Responsibilities

### Backend Development
1. Build RESTful or GraphQL APIs
2. Implement authentication and authorization
3. Design and implement database schemas
4. Create background jobs and workers
5. Optimize database queries
6. Implement proper error handling and logging

### Frontend Development
1. Build responsive web applications
2. Implement state management
3. Create reusable UI components
4. Handle forms and validation
5. Optimize performance (code splitting, lazy loading)
6. Implement proper loading and error states

### Full-Stack Integration
1. End-to-end type safety
2. API client generation
3. Data fetching patterns (SSR, CSR, ISR)
4. Authentication flows
5. Real-time features (WebSocket, SSE)

---

## Technology Patterns by Category

### Backend Frameworks

#### {{BACKEND_FRAMEWORK}} Patterns

**For Hono/Elysia/Express/Fastify:**
```typescript
// Route definition pattern
app.get('/api/{{resource}}', async (c) => {
  try {
    const result = await service.getAll();
    return c.json(result, 200);
  } catch (error) {
    console.error(error);
    return c.json({ message: error.message }, 500);
  }
});

// With validation (Zod)
app.post('/api/{{resource}}',
  zValidator('json', createSchema),
  async (c) => {
    const data = c.req.valid('json');
    const result = await service.create(data);
    return c.json(result, 201);
  }
);
```

**For FastAPI (Python):**
```python
@router.get("/api/{{resource}}")
async def get_all(db: Session = Depends(get_db)):
    return service.get_all(db)

@router.post("/api/{{resource}}", status_code=201)
async def create(
    data: CreateSchema,
    db: Session = Depends(get_db)
):
    return service.create(db, data)
```

**For Gin (Go):**
```go
func GetAll(c *gin.Context) {
    result, err := service.GetAll()
    if err != nil {
        c.JSON(500, gin.H{"error": err.Error()})
        return
    }
    c.JSON(200, result)
}
```

**For Axum (Rust):**
```rust
async fn get_all(
    State(state): State<AppState>,
) -> Result<Json<Vec<Resource>>, AppError> {
    let result = service::get_all(&state.db).await?;
    Ok(Json(result))
}
```

---

### Frontend Frameworks

#### React Patterns
```typescript
// Component with data fetching
function ResourceList() {
  const { data, isLoading, error } = useQuery({
    queryKey: ['resources'],
    queryFn: () => api.getResources(),
  });

  if (isLoading) return <Loader />;
  if (error) return <ErrorMessage error={error} />;

  return (
    <ul>
      {data?.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

// Form with validation
function CreateForm() {
  const form = useForm({
    initialValues: { name: '', email: '' },
    validate: {
      email: (v) => /^\S+@\S+$/.test(v) ? null : 'Invalid email',
    },
  });

  const mutation = useMutation({
    mutationFn: (data) => api.create(data),
    onSuccess: () => {
      queryClient.invalidateQueries(['resources']);
      form.reset();
    },
  });

  return (
    <form onSubmit={form.onSubmit(mutation.mutate)}>
      {/* form fields */}
    </form>
  );
}
```

#### Vue Patterns
```vue
<script setup lang="ts">
const { data, pending, error } = await useFetch('/api/resources')

async function handleSubmit(data: CreateData) {
  await $fetch('/api/resources', {
    method: 'POST',
    body: data
  })
  refresh()
}
</script>
```

#### Svelte Patterns
```svelte
<script lang="ts">
  import { onMount } from 'svelte';
  
  let resources = [];
  let loading = true;
  
  onMount(async () => {
    resources = await fetch('/api/resources').then(r => r.json());
    loading = false;
  });
</script>
```

---

### Database Patterns

#### ORM Patterns (Drizzle/Prisma/SQLAlchemy/GORM/SeaORM)

**TypeScript (Drizzle):**
```typescript
// Schema definition
export const resources = sqliteTable('resources', {
  id: text('id').primaryKey(),
  name: text('name').notNull(),
  createdAt: integer('created_at', { mode: 'timestamp' }).notNull(),
});

// Queries
const all = await db.select().from(resources);
const one = await db.select().from(resources).where(eq(resources.id, id));
const created = await db.insert(resources).values(data).returning();
await db.update(resources).set(data).where(eq(resources.id, id));
await db.delete(resources).where(eq(resources.id, id));
```

**Python (SQLAlchemy):**
```python
# Model definition
class Resource(Base):
    __tablename__ = "resources"
    id = Column(String, primary_key=True)
    name = Column(String, nullable=False)
    created_at = Column(DateTime, default=datetime.utcnow)

# Queries
all = db.query(Resource).all()
one = db.query(Resource).filter(Resource.id == id).first()
db.add(Resource(**data))
db.commit()
```

**Go (GORM):**
```go
// Model definition
type Resource struct {
    ID        string `gorm:"primaryKey"`
    Name      string `gorm:"not null"`
    CreatedAt time.Time
}

// Queries
var resources []Resource
db.Find(&resources)
db.First(&resource, "id = ?", id)
db.Create(&resource)
```

**Rust (SeaORM):**
```rust
// Queries
let resources: Vec<resource::Model> = Resource::find().all(db).await?;
let resource = Resource::find_by_id(id).one(db).await?;
let new_resource = resource::ActiveModel { ... };
new_resource.insert(db).await?;
```

---

### State Management Patterns

#### Client State (Zustand/Jotai/Pinia)

**Zustand (React):**
```typescript
const useSt