Clean Architecture for Remix/TypeScript Apps

As Remix apps grow, loader and action functions can become bloated "God Functions". This skill emphasizes separation of concerns.

1. The Layers

A. The Web Layer (Loaders/Actions)

Responsibility: Parsing requests, input validation (Zod), and returning Responses (JSON/Redirect). Rule: NO business logic here. Only orchestration.

// app/routes/app.products.update.ts
export const action = async ({ request }: ActionFunctionArgs) => {
  const { shop } = await authenticate.admin(request);
  const formData = await request.formData();
  
  // 1. Validate Input
  const input = validateProductUpdate(formData);