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 surfacesroutes/billing.*for payment and plan logicroutes/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:
- Product owns route naming and URL intent
- Design owns shared layout primitives and tokens
- Engineering owns loaders, actions, and caching
This pattern keeps URL design, data loading, and UI composition in one place.