Frontend Web - Stack Tecnológica (Estado Atual)¶

Base tecnológica¶

React 18
TypeScript
Vite 5
React Router 6
TanStack Query 5
Axios
Tailwind CSS 4
Radix UI
Vitest + Testing Library

Estrutura real do projeto¶

billings-ease-web/
├── src/
│   ├── App.tsx
│   ├── modules/
│   │   ├── admin/
│   │   ├── auth/
│   │   ├── client/
│   │   ├── courses/
│   │   ├── cycles/
│   │   ├── design-system/
│   │   ├── finance/
│   │   ├── management/
│   │   ├── payments/
│   │   ├── professional/
│   │   ├── profile/
│   │   ├── public/
│   │   └── shared/
│   ├── routes/
│   │   ├── publicRoutes.tsx
│   │   ├── sharedRoutes.tsx
│   │   ├── clientRoutes.tsx
│   │   ├── professionalRoutes.tsx
│   │   ├── adminRoutes.tsx
│   │   ├── index.ts
│   │   └── routePreload.ts
│   ├── components/
│   ├── contexts/
│   ├── services/
│   ├── styles/
│   ├── test/
│   └── types/
└── package.json

Padrão arquitetural por submódulo¶

Padrão completo (feature dinâmica):

page.tsx
hooks/*
services/*
view.tsx
components/*
types.ts
mappers.ts (quando necessário)

Padrão enxuto (feature estática):

page.tsx
view.tsx
components/* (opcional)

Modelo de proteção de rota¶

ProtectedRoute aplica:

autenticação
papel (admin | professional | client)
módulo efetivo (requiredModule)
regras de onboarding profissional

Qualidade e build¶

pnpm check:deps:modules
pnpm check:deps:modules:strict
pnpm lint
pnpm build
pnpm test

Referências de manutenção¶

src/routes/*.tsx (mapa real de rotas)
src/modules/** (implementação por domínio)
scripts/check-modules-architecture.sh (gate de camadas)
docs/03-frontend/estado-atual.md