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/serverRoutes, forms, static assets.
@atlas/dbSchemas, queries, changesets.
@atlas/authSessions for the people looking at it.
@atlas/uiForms, tables, auth pages, shell.
Start it
atlas init -n mysite --template fullstack
What it looks like
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>
)
}