Understand 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 | Customize the dashboard for dashboard work | |
| Change dashboard navigation or layout | Customize the dashboard | |
| Read backend data from React | Fetch backend data and run actions | |
| Trigger server work from React | + existing /api/* route | Fetch backend data and run actions |
| Add a browser-facing API capability | Create API Endpoint | |
| Add reusable server or provider logic | Add Business Logic | |
| Add a table, column, or migration | + | Change Database Schema |
| Add a persisted read or write | Query Application Data | |
| Change authentication | Auth components and routes | Authentication |
| Change Stripe billing | Billing configuration and routes | Stripe Billing |
| Change email | app email service or Supabase Auth email | |
| Publish or customize Blog content | and Blog components | Blog |
| Add or customize Docs | and Docs components | 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.
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 when a change crosses more than one boundary or introduces a new responsibility.
What's next
Frontend
Start with the public pages, dashboard, and browser state.
Read more
Backend
Add HTTP and server-only application behavior.
Read more
Database
Change persisted application data and queries.
Read more
Authentication
Customize sign-in and protected access.
Read more
Was this page helpful?