Remix Framework Patterns

# Remix Framework Patterns for Google Antigravity

Build resilient web applications with Remix and Google Antigravity's Gemini 3 engine. This guide covers nested routing, data loading, mutations, and progressive enhancement patterns for production applications.

## Route Module Structure

```typescript
// app/routes/dashboard.products.$productId.tsx
import type {
  LoaderFunctionArgs,
  ActionFunctionArgs,
  MetaFunction
} from '@remix-run/node';
import { json, redirect } from '@remix-run/node';
import {
  useLoaderData,
  useActionData,
  Form,
  useNavigation
} from '@remix-run/react';
import { requireUser } from '~/services/auth.server';
import { getProduct, updateProduct, deleteProduct } from '~/models/product.server';
import { ProductForm } from '~/components/ProductForm';

export const meta: MetaFunction<typeof loader> = ({ data }) => {
  return [
    { title: data?.product.name ?? 'Product' },
    { description: data?.product.description }
  ];
};

export async function loader({ request, params }: LoaderFunctionArgs) {
  const user = await requireUser(request);
  const product = await getProduct(params.productId!);

  if (!product) {
    throw new Response('Product not found', { status: 404 });
  }

  if (product.userId !== user.id) {
    throw new Response('Not authorized', { status: 403 });
  }

  return json({ product, user });
}

export async function action({ request, params }: ActionFunctionArgs) {
  const user = await requireUser(request);
  const formData = await request.formData();
  const intent = formData.get('intent');

  if (intent === 'delete') {
    await deleteProduct(params.productId!, user.id);
    return redirect('/dashboard/products');
  }

  const name = formData.get('name') as string;
  const price = parseFloat(formData.get('price') as string);
  const description = formData.get('description') as string;

  const errors: Record<string, string> = {};

  if (!name || name.length < 1) {
    errors.name = 'Name is required';
  }
  if (isNaN(price) || price <= 0) {
    errors.price = 'Valid price is required';
  }

  if (Object.keys(errors).length > 0) {
    return json({ errors }, { status: 400 });
  }

  await updateProduct(params.productId!, {
    name,
    price,
    description,
    userId: user.id
  });

  return json({ success: true });
}

export default function ProductDetailRoute() {
  const { product } = useLoaderData<typeof loader>();
  const actionData = useActionData<typeof action>();
  const navigation = useNavigation();
  const isSubmitting = navigation.state === 'submitting';

  return (
    <div className="product-detail">
      <ProductForm
        product={product}
        errors={actionData?.errors}
        isSubmitting={isSubmitting}
      />
    </div>
  );
}
```

## Resource Routes for APIs

```typescript
// app/routes/api.products.ts
import type { LoaderFunctionArgs, ActionFunctionArgs } from '@remix-run/node';
import { json } from '@remix-run/node';
import { getProducts, createProduct } from '~/models/product.server';
import { requireApiKey } from '~/services/api-auth.server';

export async function loader({ request }: LoaderFunctionArgs) {
  const url = new URL(request.url);
  const page = parseInt(url.searchParams.get('page') ?? '1');
  const limit = parseInt(url.searchParams.get('limit') ?? '20');

  const { products, total } = await getProducts({ page, limit });

  return json({
    data: products,
    meta: { page, limit, total, pages: Math.ceil(total / limit) }
  });
}

export async function action({ request }: ActionFunctionArgs) {
  await requireApiKey(request);

  if (request.method !== 'POST') {
    return json({ error: 'Method not allowed' }, { status: 405 });
  }

  const body = await request.json();
  const product = await createProduct(body);

  return json({ data: product }, { status: 201 });
}
```

## Session and Authentication

```typescript
// app/services/session.server.ts
import { createCookieSessionStorage, redirect } from '@remix-run/node';
import { getUserById } from '~/models/user.server';

const sessionStorage = createCookieSessionStorage({
  cookie: {
    name: '__session',
    httpOnly: true,
    path: '/',
    sameSite: 'lax',
    secrets: [process.env.SESSION_SECRET!],
    secure: process.env.NODE_ENV === 'production'
  }
});

export async function getSession(request: Request) {
  const cookie = request.headers.get('Cookie');
  return sessionStorage.getSession(cookie);
}

export async function requireUser(request: Request) {
  const session = await getSession(request);
  const userId = session.get('userId');

  if (!userId) {
    throw redirect('/login');
  }

  const user = await getUserById(userId);
  if (!user) {
    throw redirect('/login');
  }

  return user;
}

export async function createUserSession(userId: string, redirectTo: string) {
  const session = await sessionStorage.getSession();
  session.set('userId', userId);

  return redirect(redirectTo, {
    headers: {
      'Set-Cookie': await sessionStorage.commitSession(session)
    }
  });
}
```

## Best Practices

Google Antigravity's Gemini 3 engine recommends these Remix patterns: Embrace progressive enhancement by building forms that work without JavaScript. Use nested routes to colocate data requirements with UI components. Leverage optimistic UI for better perceived performance. Implement proper error boundaries at route levels for graceful error handling. Use resource routes for API endpoints that serve external clients.