Um painel administrativo moderno e completo para gestão empresarial
🚀 Ver Demo • 📖 Documentação • 🐛 Reportar Bug • ✨ Solicitar Feature
- Sobre o Projeto
- Principais Funcionalidades
- Screenshots
- Stack Tecnológica
- Início Rápido
- Estrutura do Projeto
- Scripts Disponíveis
- Roadmap
- Contribuindo
- Licença
- Contato
O Nexus Dashboard é uma solução completa de administração empresarial que combina design moderno, funcionalidades robustas e experiência de usuário excepcional. Desenvolvido com as melhores práticas de desenvolvimento front-end, oferece todas as ferramentas necessárias para gestão eficiente de dados e workflows corporativos.
- Interface Moderna: Design clean e profissional inspirado nas melhores práticas de UX/UI
- Responsividade Total: Adaptável para desktop, tablet e mobile
- Temas Dinâmicos: Alternância entre modo claro e escuro com transições suaves
- Acessibilidade: Seguindo padrões WCAG para inclusão digital
- Sistema completo de login com validação
- Persistência de sessão segura
- Rotas protegidas por autenticação
- Gestão de estado global com Context API
- Cartões de estatísticas em tempo real
- Gráficos interativos e responsivos (Recharts)
- Filtros avançados por período
- Indicadores de performance (KPIs)
- Criação, edição, visualização e exclusão
- Paginação inteligente
- Ordenação por múltiplos critérios
- Busca em tempo real
- Filtros avançados
- Interface visual para gestão de tarefas
- Drag & Drop nativo (@dnd-kit)
- Estados customizáveis de workflow
- Atribuição de responsáveis
- Visualização de eventos (mês/semana/dia)
- Criação e edição de compromissos
- Notificações e lembretes
- Sincronização em tempo real
- Suporte para múltiplos idiomas (PT/EN)
- Seletor de idioma dinâmico
- Formatação regional de datas/números
- Textos localizados
- Loading states com spinners elegantes
- Notificações toast para feedback
- Validação avançada de formulários
- Tratamento robusto de erros
- Estados vazios informativos
| Dashboard Principal | Gestão de Usuários |
|---|---|
| Quadro Kanban | Calendário |
|---|---|
| Categoria | Tecnologias |
|---|---|
| Frontend | React 18 • Vite • TypeScript |
| Roteamento | React Router DOM |
| Formulários | React Hook Form • Zod |
| Gráficos | Recharts • Chart.js |
| Drag & Drop | @dnd-kit/core |
| Calendário | FullCalendar |
| Internacionalização | i18next • react-i18next |
| Estilização | CSS Modules • CSS Grid • Flexbox |
| Testes | Jest • React Testing Library |
| CI/CD | GitHub Actions |
| Deploy | GitHub Pages |
Certifique-se de ter instalado:
# 1. Clone o repositório
git clone https://github.com/kaua-hiro/nexus-admin-react
# 2. Entre no diretório
cd nexus-admin-react
# 3. Instale as dependências
yarn install
# ou
npm install
# 4. Inicie o servidor de desenvolvimento
yarn dev
# ou
npm run devAbra http://localhost:5173 no seu navegador.
Credenciais de teste:
- Email: admin@nexus.com
- Senha: admin123
nexus-admin-react/
├── 📁 src/
│ ├── 📁 components/ # Componentes reutilizáveis
│ │ ├── 📁 ui/ # Componentes de interface
│ │ └── 📁 forms/ # Componentes de formulários
│ ├── 📁 pages/ # Páginas da aplicação
│ ├── 📁 hooks/ # Custom hooks
│ ├── 📁 contexts/ # Contextos React
│ ├── 📁 services/ # Serviços e APIs
│ ├── 📁 utils/ # Funções utilitárias
│ ├── 📁 styles/ # Estilos globais
│ ├── 📁 types/ # Definições TypeScript
│ └── 📁 locales/ # Arquivos de tradução
├── 📁 public/ # Arquivos estáticos
├── 📁 tests/ # Testes automatizados
└── 📄 README.md
| Script | Descrição |
|---|---|
yarn dev |
Inicia servidor de desenvolvimento |
yarn build |
Gera build de produção |
yarn preview |
Visualiza build localmente |
yarn test |
Executa testes automatizados |
yarn test:watch |
Executa testes em modo watch |
yarn lint |
Verifica qualidade do código |
yarn type-check |
Validação de tipos TypeScript |
yarn deploy |
Deploy para GitHub Pages |
- Arquitetura base e migração para Vite
- Sistema de autenticação completo
- Dashboard com gráficos dinâmicos
- CRUD completo de usuários
- Sistema de temas e UX avançada
- Testes automatizados e CI/CD
- Quadro Kanban com drag-and-drop
- Calendário de eventos integrado
- Sistema de internacionalização (i18n)
- Acessibilidade (a11y): Auditoria completa WCAG
- Relatórios Avançados: Geração de PDFs
- API REST Própria: Backend dedicado
- Notificações Push: Sistema em tempo real
- Modo Offline: PWA com cache estratégico
- Analytics: Métricas de uso e performance
Contribuições são sempre bem-vindas! Aqui está como você pode ajudar:
- Fork o projeto
- Clone seu fork:
git clone https://github.com/seu-usuario/nexus-admin-react.git - Crie uma branch:
git checkout -b feature/nova-feature - Faça suas alterações
- Teste suas mudanças:
yarn test - Commit:
git commit -m 'feat: adiciona nova feature' - Push:
git push origin feature/nova-feature - Abra um Pull Request
- Siga o padrão de commits Conventional Commits
- Escreva testes para novas funcionalidades
- Mantenha a documentação atualizada
- Respeite o guia de estilo do projeto
Encontrou um bug? Abra uma issue com:
- Descrição detalhada do problema
- Passos para reproduzir
- Comportamento esperado vs atual
- Screenshots (se aplicável)
- Informações do ambiente
Este projeto está licenciado sob a Licença MIT - veja o arquivo LICENSE para detalhes.
MIT License - você pode usar, modificar e distribuir este código livremente.
Desenvolvido com ❤️ para a comunidade dev
Obrigado a todos que contribuíram para este projeto!
⭐ Se este projeto te ajudou, considere deixar uma estrela!