Dashboard administrativo completo e responsivo desenvolvido com React 19, TypeScript e Tailwind CSS v4. Interface moderna com suporte a tema dark/light, visualização de métricas em tempo real, gráficos interativos e sistema de gerenciamento de usuários.
- 🌓 Tema Dark/Light - Alternância suave entre temas com persistência no localStorage
- 📊 Gráficos Interativos - Visualização de dados com Recharts
- 👥 Gestão de Usuários - CRUD completo de usuários com filtros e busca
- ⚙️ Página de Configurações - Gestão completa de perfil, segurança, notificações e sistema
- 📱 Design Responsivo - Adaptado para desktop, tablet e mobile
- 🎨 UI Moderna - Interface limpa e intuitiva com Tailwind CSS v4
- 🔍 Sistema de Busca - Busca global no header
- 📈 Dashboard Analytics - Métricas e KPIs em tempo real
- ⚡ Performance Otimizada - Build rápido com Vite
- 🎭 Ícones Lucide - Biblioteca moderna e leve de ícones
- 🔐 Autenticação 2FA - Suporte para autenticação de dois fatores
- 🔔 Sistema de Notificações - Preferências personalizáveis de notificações
Visualização de métricas principais, KPIs e gráficos de vendas com estatísticas em tempo real.
Sistema completo de CRUD com tabela interativa, filtros avançados e ações de edição/exclusão.
Interface completa com 4 seções principais:
- Perfil: Gerenciamento de informações pessoais e avatar
- Segurança: Alteração de senha e autenticação 2FA
- Notificações: Preferências de e-mail, push, SMS e relatórios
- Sistema: Configurações de idioma, fuso horário e formato de data
Interface totalmente adaptada para tema escuro, reduzindo fadiga visual em todos os componentes.
Layout adaptável para todos os dispositivos com sidebar retrátil e navegação otimizada para mobile.
- React 19.1 - Biblioteca JavaScript para construção de interfaces
- TypeScript 5.9 - Superset JavaScript com tipagem estática
- Vite 7.1 - Build tool rápida e moderna
- Tailwind CSS 4.1 - Framework CSS utility-first
- Lucide React - Ícones SVG modernos e customizáveis
- React Router DOM 7.9 - Roteamento declarativo
- Recharts 3.2 - Biblioteca de gráficos baseada em React
- ESLint - Linting e análise de código
- TypeScript ESLint - Regras de lint específicas para TypeScript
- Node.js 18+
- npm ou yarn
# Clone o repositório
git clone https://github.com/JezzXL/Dashboard.git
# Entre no diretório
cd dashboard
# Instale as dependências
npm install
# Execute o projeto em modo desenvolvimento
npm run devO projeto estará disponível em http://localhost:5173
# Gera build otimizado
npm run build
# Preview do build de produção
npm run previewsrc/
├── components/ # Componentes reutilizáveis
│ ├── Header.tsx # Cabeçalho com busca e tema
│ ├── Sidebar.tsx # Menu lateral de navegação
│ ├── MetricsCards.tsx # Cards de métricas do dashboard
│ ├── SalesChart.tsx # Gráfico de vendas
│ └── UsersTable.tsx # Tabela de usuários
├── pages/ # Páginas da aplicação
│ ├── Dashboard.tsx # Página principal com métricas
│ ├── Users.tsx # Gerenciamento de usuários
│ ├── Analytics.tsx # Análise de dados e gráficos
│ └── Settings.tsx # Configurações completas
├── types/ # Definições de tipos TypeScript
│ └── index.ts # Interfaces e tipos globais
├── App.tsx # Componente raiz com roteamento
├── main.tsx # Entry point da aplicação
└── index.css # Estilos globais e Tailwind
- Cards de métricas com indicadores de mudança percentual
- Gráfico de vendas mensais interativo
- Estatísticas em tempo real
- Resumo de usuários recentes
- Tabela de usuários com status e roles
- Filtros por role e status
- Sistema de busca integrado
- Ações de edição e exclusão com confirmação
- Paginação
- Gráficos de linha e barra para análise de tendências
- Comparação de períodos
- Métricas detalhadas e KPIs
- Visualização de crescimento e conversão
Página completa de configurações com 4 abas:
- Upload e gerenciamento de avatar
- Edição de nome, e-mail e telefone
- Campo de biografia personalizado
- Validação de campos
- Alteração de senha com validação
- Toggle de visualização de senha
- Autenticação de dois fatores (2FA)
- Confirmação de senha
- Notificações por e-mail
- Notificações push no navegador
- Alertas SMS para segurança
- Relatórios semanais e mensais
- Toggle switches animados
- Seleção de idioma (PT-BR, EN-US, ES-ES)
- Configuração de fuso horário
- Formato de data personalizável
- Zona de perigo com exclusão de conta
O tema é persistido no localStorage e pode ser alternado através do botão no header. A preferência do sistema é detectada automaticamente na primeira visita.
// Exemplo de uso do tema
useEffect(() => {
const savedTheme = localStorage.getItem("theme") as "light" | "dark";
if (savedTheme) {
setTheme(savedTheme);
document.documentElement.classList.toggle("dark", savedTheme === "dark");
}
}, []);Configurado no src/index.css com suporte nativo a dark mode:
@import "tailwindcss";
@variant dark (&:where(.dark, .dark *));- Mobile: < 768px - Sidebar retrátil com overlay
- Tablet: 768px - 1024px - Layout adaptado
- Desktop: > 1024px - Sidebar fixa e layout expandido
npm run dev # Inicia servidor de desenvolvimento
npm run build # Cria build de produção
npm run preview # Preview do build
npm run lint # Executa ESLint
- Integração com API REST
- Autenticação real com JWT
- Sistema de permissões e roles
- Upload real de imagens
- Exportação de relatórios (PDF/Excel)
- Dashboard customizável por usuário
- Notificações em tempo real com WebSocket
- Modo de acessibilidade
- Testes unitários e E2E
- Internacionalização (i18n)
Contribuições são bem-vindas! Sinta-se à vontade para abrir issues e pull requests.
- Fork o projeto
- Crie uma branch para sua feature (
git checkout -b feature/AmazingFeature) - Commit suas mudanças (
git commit -m 'feat: add some AmazingFeature') - Push para a branch (
git push origin feature/AmazingFeature) - Abra um Pull Request
Utilizamos Conventional Commits:
feat: adiciona nova funcionalidade
fix: corrige um bug
docs: alterações na documentação
style: formatação, ponto e vírgula, etc
refactor: refatoração de código
test: adição de testes
chore: atualização de dependências, etc
Este projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.
Davyd Willian
- GitHub: @JezzXL
- LinkedIn: Davyd Willian
- React - Biblioteca JavaScript
- Tailwind CSS - Framework CSS
- Lucide Icons - Ícones modernos
- Recharts - Biblioteca de gráficos
- Vite - Build tool
- TypeScript - Tipagem estática
- Componentes: 10+
- Páginas: 4 (Dashboard, Users, Analytics, Settings)
- Linhas de código: ~2.000+
- Tecnologias: 8+
- Ícones: 20+
⭐ Se este projeto te ajudou, considere dar uma estrela no repositório!
Desenvolvido com ❤️ por Davyd Willian