Skip to main content

Frontend Strategy

The frontend defaults to React + Vite with Tailwind CSS, shadcn/ui, TanStack Query, and Zustand.

  • router.tsx as route truth
  • pages/ for routed screens
  • components/ for reusable UI
  • hooks/ for client behavior
  • lib/api/ for API clients
  • stores/ for shared client state when query cache or React state is insufficient

Current starter baseline:

  • src/router.tsx
  • src/components/layout/AppShell.tsx
  • src/components/ui/
  • src/lib/api/health-client.ts
  • src/pages/DashboardPage.tsx
  • src/pages/RuntimeStatusPage.tsx

Guardrails​

  • mobile UX is the default product surface; validate the smallest supported viewport before desktop polish
  • prefer shared primitives over bespoke UI infrastructure
  • keep route topology explicit
  • use TanStack Query for server-state workflows by default
  • use Zustand sparingly and intentionally
  • avoid table-only, hover-only, or horizontally scrolling primary workflows on mobile
  • keep critical actions visible, touch-friendly, and close to the task they complete
  • preserve route-owned Resumo and Despesas filters across tab changes until the user explicitly changes or clears them
  • open button-triggered creation, edit, and filter surfaces in centered app-themed modals/overlays with internal scroll so the primary page does not shift
  • keep category management compact and user-scoped; category rename is allowed for any category, while deletion stays protected by app-themed confirmations and usage/default guards