# §47 — The full-stack app

Pages and forms, which is what most software is, and what most stacks make disproportionately hard.

The server renders and serves; React appears where interaction earns it, not by default. `@atlas/ui` is Mantine blocks — forms, tables, auth pages, navigation — so the parts every app has are already built and the parts that are yours are the ones you write.

When someone other than you needs to edit a row, turn to §59 and add the admin. It is configuration over the schemas you already have.

## What you are carrying

- `@atlas/server` — Routes, forms, static assets.
- `@atlas/db` — Schemas, queries, changesets.
- `@atlas/auth` — Sessions for the people looking at it.
- `@atlas/ui` — Forms, tables, auth pages, shell.

## Start it

```bash
atlas init -n mysite --template fullstack
```

## What it looks like

`src/app.tsx`

```tsx
import { AtlasProvider, AppShell } from "@atlas/ui/provider"
import { createForm, TextField, SubmitButton } from "@atlas/ui/forms"
import { createTable, TextColumn, DateColumn } from "@atlas/ui/table"

const PostForm = createForm({ fields: { title: "", body: "" } })
const PostTable = createTable([
  TextColumn("title", "Title"),
  DateColumn("createdAt", "Published"),
])

export default function App({ posts }) {
  return (
    <AtlasProvider>
      <AppShell>
        <PostForm onSubmit={(values) => post("/posts", values)}>
          <TextField name="title" label="Title" />
          <SubmitButton>Publish</SubmitButton>
        </PostForm>
        <PostTable rows={posts} />
      </AppShell>
    </AtlasProvider>
  )
}
```

## Where now

- Put it online — turn to §100 (Appendix A)
- Hand it to an agent — turn to §102 (Appendix C)
- Walk it again from the start — turn to §1