61 lines
2 KiB
Markdown
61 lines
2 KiB
Markdown
# Frontend — SaveInMed Marketplace
|
|
|
|
React + Vite + TypeScript + Tailwind CSS
|
|
|
|
## Estrutura de `src/`
|
|
|
|
```
|
|
src/
|
|
├── assets/ → Logo, imagens estáticas
|
|
├── components/ → Componentes reutilizáveis
|
|
├── context/ → React Context (auth, tema) — estado global estável
|
|
├── hooks/ → Custom hooks
|
|
├── layouts/ → Layouts de página (Shell, DashboardLayout)
|
|
├── pages/ → Páginas organizadas por contexto e perfil
|
|
│ ├── auth/ → Login
|
|
│ ├── marketplace/ → Search, Cart, Checkout, Orders, OrderDetails
|
|
│ └── dashboard/
|
|
│ ├── admin/ → Painel administrativo (role admin)
|
|
│ ├── seller/ → Inventário, Produtos, Carteira, Equipe
|
|
│ ├── employee/ → Dashboard do colaborador
|
|
│ ├── delivery/ → Dashboard do entregador
|
|
│ ├── Company.tsx
|
|
│ └── MyProfile.tsx
|
|
├── services/ → Clientes HTTP por domínio
|
|
├── stores/ → Zustand (carrinho, filtros, UI global)
|
|
├── types/ → Tipos TypeScript compartilhados
|
|
└── utils/ → format, jwt, logger
|
|
```
|
|
|
|
## Importações absolutas
|
|
|
|
Utilize o alias `@/` (aponta para `src/`):
|
|
|
|
```tsx
|
|
// ✅ Correto
|
|
import { useAuth } from '@/context/AuthContext'
|
|
|
|
// ❌ Evitar (quebra ao mover o arquivo)
|
|
import { useAuth } from '../../context/AuthContext'
|
|
```
|
|
|
|
## Gerenciamento de estado
|
|
|
|
| Estado | Estratégia |
|
|
|--------|-----------|
|
|
| Auth (JWT, user) | Context API (`AuthContext`) |
|
|
| Tema claro/escuro | Context API (`ThemeContext`) |
|
|
| Carrinho | Zustand (`cartStore`) |
|
|
| Filtros de busca | Zustand / `usePersistentFilters` |
|
|
| Estado UI local | `useState` no componente |
|
|
|
|
> **Regra:** Context apenas para auth e tema. Tudo mais vai para Zustand.
|
|
|
|
## Scripts
|
|
|
|
```bash
|
|
pnpm dev # Dev server (proxy → :8214)
|
|
pnpm build # Build produção
|
|
pnpm test # Testes (Vitest)
|
|
pnpm lint # ESLint
|
|
```
|