Post

Paper Lantern Cache

7/15/2024

Use file-based routes in src/routes to grow the app.

Keep shared UI in src/components and tune visual tokens in src/styles.css.

Route design tips

Treat routes like product domains, not technical buckets.

  • routes/settings.* for account surfaces
  • routes/billing.* for payment and plan logic
  • routes/api.* for server handlers that belong to the same domain

When route trees map to business intent, onboarding gets faster and refactors hurt less.

// src/routes/billing.index.tsx
export const Route = createFileRoute('/billing/')({
  component: BillingPage,
})

Route setup

~10 min

Type safety

end-to-end

Refactor risk

lowered

Collaboration pattern

Use this lightweight ownership split:

  1. Product owns route naming and URL intent
  2. Design owns shared layout primitives and tokens
  3. Engineering owns loaders, actions, and caching

This pattern keeps URL design, data loading, and UI composition in one place.