React Router 7 + RSC Dashboard Template

Build full-stack React Router 7 applications with React Server Components, Drizzle ORM, Conform forms, and DaisyUI styling.

Stack

Environment Setup

Required environment variables:

Development Commands

Directory Structure

Routes (`src/routes/`)

Each route folder contains:

Root shells:

Actions (`src/actions/<domain>/`)

Existing domains: `auth`, `organization`, `invitation`, `profile`

Components (`src/components/`)

Database (`src/db/`)

Libraries (`src/lib/`)

React Server Components Model

1. **Route files are server by default** - Do data fetching in `route.tsx`

2. **Client components opt-in** - Use `"use client"` in `client.tsx`

3. **Pass server data via props** - Never expose DB clients to client

4. **Use createHandle pattern** - Expose server-only components to parent shells

5. **Route middleware** - Export `unstable_middleware` from server routes for protection

6. **Caching** - Call `cacheRoute()` at top of server components for CDN caching

Forms + Actions Pattern

Server Actions

Define in `src/actions/<domain>/actions.ts`:

```typescript

"use server"

import { z } from "zod/v4"

import { parseWithZod } from "@conform-to/zod/v4"

export async function actionName(

prev: SubmissionResult | undefined,

formData: FormData

): Promise<SubmissionResult> {

// Parse with schema

const submission = parseWithZod(formData, { schema })

// Validation failure

if (submission.status !== "success") {

return submission.reply()

}

// Require authentication

const user = await requireUser()

// Perform side effects

await doSomething(submission.value)

// Redirect or return success

return submission.reply({ resetForm: true })

}

```

Client Forms

Use in route `client.tsx`:

```typescript

"use client"

import { useActionState } from "react"

import { useForm } from "@/components/form"

import { Form, Input, FormErrors, FormSuccessMessage } from "@/components/form"

import { actionName } from "@/actions/domain/actions"

import { schema } from "@/actions/domain/schema"

export function MyForm() {

const [lastResult, action, pending] = useActionState(actionName, undefined)

const [form, fields] = useForm({ action, lastResult, schema })

return (

<Form action={action} form={form}>

<Input field={fields.email} label="Email" />

<FormErrors form={form} />

<FormSuccessMessage lastResult={lastResult}>

Success!

</FormSuccessMessage>

<button disabled={pending}>Submit</button>

</Form>

)

}

```

Schema Definition

Create in `src/actions/<domain>/schema.ts`:

```typescript

import { z } from "zod/v4"

export const mySchema = z.object({

email: z.string().email("Invalid email"),

name: z.string().min(1, "Required")

})

```

Data Access with Drizzle

1. **Define tables** in `src/db/schema.ts`

2. **Get DB instance** via `getDb()` - never create new pools

3. **Separate reads/writes** - queries in `queries/*`, mutations in `mutations/*`

4. **Keep transactions in server actions** or route loaders

5. **Generate migrations** with `pnpm db:generate`

6. **Run migrations** with `pnpm db:migrate`

Example query:

```typescript

// src/db/queries/user.ts

import { getDb } from "@/db"

import { users } from "@/db/schema"

import { eq } from "drizzle-orm"

export async function getUserById(id: string) {

const db = getDb()

return await db.query.users.findFirst({

where: eq(users.id, id)

})

}

```

Authentication and Session

UI and Styling

DaisyUI Components

Use semantic component classes:

Layout Patterns

```typescript

// Container

<div className="max-w-screen-xl mx-auto px-4">

// Responsive menu

<ul className="menu sm:menu-horizontal">

// Drawer

<div className="drawer lg:drawer-open">

```

Color Semantics

Use semantic colors: `primary`, `secondary`, `accent`, `base-100`, `base-200`, `base-300`

Adding a New Feature

1. **Create route folder** in `src/routes/...` with `route.tsx` (server) and `client.tsx` (client)

2. **Add data access** in `src/db/queries/*` or `mutations/*` using `getDb()`

3. **Create actions** in `src/actions/<domain>/` with `schema.ts` and `actions.ts`

4. **Build form** in `client.tsx` using `useActionState`, `useForm`, and Form components

5. **Add authentication** with `unstable_middleware` in route and `requireUser()` in actions

6. **Enable caching** with `cacheRoute()` in server route if appropriate

7. **Style with DaisyUI** using component classes and semantic colors

Do's and Don'ts

Do

Don't

Constraints