# Understand Project Structure (/en/docs/tanstack-start/project-structure)

Find the change you want in this map, then open its edit point. Paths begin at
your cloned Start repository.

| Change                      | Start here                               |
| --------------------------- | ---------------------------------------- |
| Landing page composition    | `src/routes/_marketing/index.tsx`        |
| Dashboard page or layout    | `src/routes/dashboard/`                  |
| Shared dashboard UI         | `src/components/dashboard/`              |
| HTTP endpoint               | `src/api/routes/`                        |
| Business behavior           | `src/services/`                          |
| Application-table query     | `src/lib/db/repositories/`               |
| Browser request and cache   | `src/hooks/`                             |
| Pricing and site identity   | `src/config/`                            |
| Supabase client boundary    | `src/lib/supabase/`                      |
| Database schema             | `supabase/migrations/` and `src/lib/db/` |
| Docs, Blog and release text | `src/content/`                           |

## Navigate native routes

<Files>
  <Folder name="src" defaultOpen>
    <File name="router.tsx" />

    <File name="start.ts" />

    <Folder name="routes" defaultOpen>
      <File name="__root.tsx" />

      <Folder name="_marketing">
        <File name="route.tsx" />

        <File name="index.tsx" />
      </Folder>

      <Folder name="dashboard">
        <File name="route.tsx" />

        <File name="index.tsx" />

        <Folder name="projects">
          <File name="$projectId.tsx" />
        </Folder>
      </Folder>

      <Folder name="api">
        <File name="$.ts" />
      </Folder>

      <Folder name="docs">
        <File name="$.tsx" />
      </Folder>

      <Folder name="auth">
        <File name="callback.ts" />
      </Folder>
    </Folder>
  </Folder>
</Files>

`src/routes/__root.tsx` renders the document and shared providers. A folder's
`route.tsx` wraps its children; `index.tsx` renders its base URL. `_marketing`
groups public pages without adding a URL segment. `$projectId` matches one
segment; `$` is a catch-all. TanStack Router generates `src/routeTree.gen.ts`
from these files. Edit the route files rather than the generated tree; see
[file-based routing](https://tanstack.com/router/latest/docs/framework/react/routing/file-based-routing).

The authenticated Dashboard parent calls `src/lib/dashboard.server.ts` before
rendering its shell. `/demo/dashboard` has a separate public parent and sample
data. Put protected pages under the authenticated route tree; sharing a UI
component with the demo does not make its data public.

## Place server work

`src/routes/api/$.ts` mounts Hono on `/api/*`. Browser components use hooks
calling that same-origin API. Services make product decisions; repositories
read or write application tables. Add a business endpoint in those existing
layers rather than creating another runtime.

Route components participate in server rendering and browser navigation. Keep
privileged imports inside server-function handlers or modules marked
`@tanstack/react-start/server-only`. Narrow Start server functions handle
route bootstrap, language preference, feedback and authorized content rendering.
They do not replace the Hono domain API.

`src/router.tsx` supplies the QueryClient and SSR integration. `src/start.ts`
supplies request middleware, session refresh and server-function CSRF. Use
[Application Architecture](/en/docs/application-architecture)
before changing these shared entry points.

## Find content and build configuration

`source.config.ts` declares MDX collections. `src/lib/docs.server.tsx` and
`src/lib/blog.server.tsx` load and render content at the server boundary.
`mdx-components.tsx` supplies the MDX component registry. Use the native
content guides when changing routes or rendering; ordinary MDX authoring stays
in the shared documentation.

`vite.config.ts` connects Start, React, Fumadocs, Tailwind and Nitro.
`package.json` owns development and build commands; `bun.lock` locks the root
dependency graph used by the app and E2E directories.

## What's next

<Cards>
  <Card title="Customize Dashboard" href="/en/docs/frontend/customize-dashboard" description="Change the existing route, composition or shared frame." />

  <Card title="Backend" href="/en/docs/backend" description="Extend the native mount and shared application API." />

  <Card title="Documentation" href="/en/docs/documentation" description="Add product guides through the shared MDX collection." />
</Cards>