Painel administrativo de nível profissional: autenticação, CRUD completo, tabela de dados, gráficos e dark mode.
🔗 Ver demo ao vivo
· 🔑 Login de demonstração — admin@empresa.com / 123456 (ou qualquer e-mail válido + senha de 4+ caracteres)
Um painel administrativo completo como os usados em produtos corporativos — o tipo de interface presente em praticamente toda empresa de software. Construído com foco em boas práticas, tipagem forte e uma camada de API desacoplada (pronta para plugar um back-end real).
- 🔐 Login de demonstração (mock) com rota protegida e sessão persistida — validação apenas no cliente (qualquer e-mail com
@e senha de 4+ caracteres entra; o token é fictício e descartado). Não é segurança de produção. - 👥 CRUD completo de usuários — criar, editar e remover com modal e validação
- 🔎 Tabela de dados com busca, ordenação por coluna e paginação
- 📈 Dashboard com KPIs e gráficos (área e pizza) via Recharts
- 🌗 Dark mode persistente + design totalmente responsivo
- 🔔 Sistema de toasts, estados de carregamento (skeletons) e vazio
- ⚙️ CI/CD — build e deploy automáticos no GitHub Pages via GitHub Actions
| Camada | Tecnologia |
|---|---|
| UI | React 18 + TypeScript |
| Build | Vite |
| Estilo | Tailwind CSS (dark mode por classe) |
| Rotas | React Router |
| Gráficos | Recharts |
| Ícones | lucide-react |
| CI/CD | GitHub Actions → GitHub Pages |
src/
├── lib/
│ ├── api.ts # camada de dados (mock com latência; troque por API real)
│ ├── auth.tsx # contexto de autenticação
│ ├── theme.ts # hook de tema (dark mode)
│ └── types.ts # tipos de domínio
├── components/ # Layout, Toast, Modal, StatCard, ProtectedRoute
└── pages/ # Login, Dashboard, Users (CRUD), Settings
💡 A
api.tsfoi desenhada para ser substituída por um back-end real (como a br-validator-api) sem alterar os componentes.
npm install
npm run dev # http://localhost:5173
npm run build # gera dist/ (typecheck + bundle)MIT © Samuel Ferreira