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

Find the product change in the table and open its edit point.

## Common changes

| I want to…                            | Start here                                 | Guide                                                                               |
| ------------------------------------- | ------------------------------------------ | ----------------------------------------------------------------------------------- |
| Add or change an App Router page      | `src/app/**`                               | [Customize the dashboard](/en/docs/frontend/customize-dashboard) for dashboard work |
| Change dashboard navigation or layout | `src/components/dashboard/**`              | [Customize the dashboard](/en/docs/frontend/customize-dashboard)                    |
| Read backend data from React          | `src/hooks/**`                             | [Fetch backend data and run actions](/en/docs/frontend/fetch-update-data)           |
| Trigger server work from React        | `src/hooks/**` + existing `/api/*` route   | [Fetch backend data and run actions](/en/docs/frontend/fetch-update-data)           |
| Add a browser-facing API capability   | `src/api/routes/**`                        | [Create API Endpoint](/en/docs/backend/create-api-endpoint)                         |
| Add reusable server or provider logic | `src/services/**`                          | [Add Business Logic](/en/docs/backend/add-business-logic)                           |
| Add a table, column, or migration     | `supabase/migrations/**` + `src/lib/db/**` | [Change Database Schema](/en/docs/database/change-schema)                           |
| Add a persisted read or write         | `src/lib/db/repositories/**`               | [Query Application Data](/en/docs/database/query-data)                              |
| Change authentication                 | Auth components and routes                 | [Authentication](/en/docs/authentication)                                           |
| Change Stripe billing                 | Billing configuration and routes           | [Stripe Billing](/en/docs/billing/stripe)                                           |
| Change email                          | app email service or Supabase Auth email   | [Email](/en/docs/email)                                                             |
| Publish or customize Blog content     | `src/content/blogs/**` and Blog components | [Blog](/en/docs/blog)                                                               |
| Add or customize Docs                 | `src/content/docs/**` and Docs components  | [Documentation](/en/docs/documentation)                                             |

## Keep the boundaries intact

Normal browser-triggered server work follows this boundary:

Scroll horizontally, or focus the diagram and use the arrow keys, to see the full flow.

<Mermaid
  chart={`
flowchart LR
UI[Component] --> Hook[Query hook]
Hook --> API[Hono API]
API --> Service
Service --> Repo[Repository]
Service --> Provider
`}
/>

Components render the product, hooks manage browser data, API routes own HTTP,
services own application decisions, repositories own app-data access, and
providers own external integrations.

Open [Architecture](/en/docs/application-architecture) when a change crosses more
than one boundary or introduces a new responsibility.

## What's next

<Cards>
  <Card title="Frontend" href="/en/docs/frontend" description="Start with the public pages, dashboard, and browser state." />

  <Card title="Backend" href="/en/docs/backend" description="Add HTTP and server-only application behavior." />

  <Card title="Database" href="/en/docs/database" description="Change persisted application data and queries." />

  <Card title="Authentication" href="/en/docs/authentication" description="Customize sign-in and protected access." />
</Cards>