Remix Full-Stack Development

# Remix Full-Stack Development for Google Antigravity

Remix provides a modern full-stack React framework. This guide covers patterns optimized for Google Antigravity IDE and Gemini 3.

## Route with Loader and Action

```typescript
// app/routes/posts.$postId.tsx
import type { LoaderFunctionArgs, ActionFunctionArgs } from '@remix-run/node';
import { json, redirect } from '@remix-run/node';
import { useLoaderData, Form, useNavigation } from '@remix-run/react';
import { getPost, updatePost, deletePost } from '~/models/post.server';
import { requireUserId } from '~/session.server';

export async function loader({ params, request }: LoaderFunctionArgs) {
  const userId = await requireUserId(request);
  const post = await getPost(params.postId!);
  
  if (!post) throw new Response('Not Found', { status: 404 });
  if (post.authorId !== userId) throw new Response('Forbidden', { status: 403 });
  
  return json({ post });
}

export async function action({ params, request }: ActionFunctionArgs) {
  const userId = await requireUserId(request);
  const formData = await request.formData();
  const intent = formData.get('intent');
  
  if (intent === 'delete') {
    await deletePost(params.postId!, userId);
    return redirect('/posts');
  }
  
  const title = formData.get('title');
  const content = formData.get('content');
  
  await updatePost(params.postId!, { title: String(title), content: String(content) });
  return json({ success: true });
}

export default function PostRoute() {
  const { post } = useLoaderData<typeof loader>();
  const navigation = useNavigation();
  const isSubmitting = navigation.state === 'submitting';

  return (
    <div className="max-w-2xl mx-auto p-6">
      <Form method="post" className="space-y-4">
        <div>
          <label htmlFor="title">Title</label>
          <input id="title" name="title" defaultValue={post.title} className="w-full border rounded p-2" />
        </div>
        <div>
          <label htmlFor="content">Content</label>
          <textarea id="content" name="content" rows={10} defaultValue={post.content} className="w-full border rounded p-2" />
        </div>
        <div className="flex gap-4">
          <button type="submit" disabled={isSubmitting} className="bg-blue-500 text-white px-4 py-2 rounded">
            {isSubmitting ? 'Saving...' : 'Save'}
          </button>
          <button type="submit" name="intent" value="delete" className="bg-red-500 text-white px-4 py-2 rounded">
            Delete
          </button>
        </div>
      </Form>
    </div>
  );
}
```

## Nested Routes Layout

```typescript
// app/routes/dashboard.tsx
import { Outlet, NavLink } from '@remix-run/react';

export default function DashboardLayout() {
  return (
    <div className="flex min-h-screen">
      <aside className="w-64 bg-gray-900 text-white p-4">
        <nav className="space-y-2">
          <NavLink to="/dashboard" end className={({ isActive }) => isActive ? 'bg-gray-700 p-2 rounded block' : 'p-2 rounded block'}>
            Overview
          </NavLink>
          <NavLink to="/dashboard/posts" className={({ isActive }) => isActive ? 'bg-gray-700 p-2 rounded block' : 'p-2 rounded block'}>
            Posts
          </NavLink>
        </nav>
      </aside>
      <main className="flex-1 p-6"><Outlet /></main>
    </div>
  );
}
```

## Resource Route for API

```typescript
// app/routes/api.posts.ts
import type { LoaderFunctionArgs, ActionFunctionArgs } from '@remix-run/node';
import { json } from '@remix-run/node';
import { getPosts, createPost } from '~/models/post.server';

export async function loader({ request }: LoaderFunctionArgs) {
  const url = new URL(request.url);
  const page = parseInt(url.searchParams.get('page') || '1');
  const posts = await getPosts({ page, limit: 10 });
  return json(posts);
}

export async function action({ request }: ActionFunctionArgs) {
  if (request.method !== 'POST') return json({ error: 'Method not allowed' }, { status: 405 });
  const data = await request.json();
  const post = await createPost(data);
  return json(post, { status: 201 });
}
```

## Optimistic UI with useFetcher

```typescript
// app/routes/todos.tsx
import { useFetcher } from '@remix-run/react';

function TodoItem({ todo }: { todo: Todo }) {
  const fetcher = useFetcher();
  const isDeleting = fetcher.state !== 'idle' && fetcher.formData?.get('todoId') === todo.id;
  if (isDeleting) return null;

  return (
    <li className="flex items-center gap-2 p-2 border-b">
      <fetcher.Form method="post">
        <input type="hidden" name="todoId" value={todo.id} />
        <input type="hidden" name="intent" value="toggle" />
        <button type="submit">{todo.completed ? '✓' : '○'}</button>
      </fetcher.Form>
      <span className={todo.completed ? 'line-through' : ''}>{todo.title}</span>
      <fetcher.Form method="post" className="ml-auto">
        <input type="hidden" name="todoId" value={todo.id} />
        <input type="hidden" name="intent" value="delete" />
        <button type="submit" className="text-red-500">×</button>
      </fetcher.Form>
    </li>
  );
}
```

## Best Practices

1. **Loaders**: Fetch data server-side for SEO
2. **Actions**: Handle mutations with forms
3. **Error Boundaries**: Per-route error handling
4. **Nested Routes**: Shared UI with layouts
5. **Optimistic UI**: Update before server confirms
6. **Resource Routes**: API without UI

Google Antigravity's Gemini 3 understands Remix patterns and can generate full-stack routes.