Um dashboard moderno e profissional construído com CSS Grid avançado, dados dinâmicos, gráficos interativos e funcionalidades PWA completas.

🌍 Languages: Português | English

📖 Articles: Tutorial PT | Tutorial EN

🛠️ Development: Guide PT | Guide EN

• Named Areas Strategy - Layout semântico e maintível
• Nested Grid Architecture - Grids aninhados para organização
• Progressive Enhancement - Compatibilidade e performance
• Responsive Design - Mobile-first com breakpoints inteligentes

• 6 Widgets KPI com atualizações em tempo real
• 3 Tipos de Gráficos (linha, rosca, barras) com Chart.js
• API Mock simulando dados reais
• Tabela de Produtos com dados dinâmicos

• Modo Claro/Escuro com toggle animado
• Persistência via localStorage
• Transições suaves entre temas
• Gráficos adaptativos que mudam cores automaticamente

• Service Worker com cache inteligente
• Instalável como app nativo
• Offline Support com indicadores visuais
• Notificações de atualização automáticas

Acesse a demonstração: Dashboard Demo

# Clone o repositório
git clone https://github.com/seu-usuario/dash-grid.git

# Entre no diretório
cd dash-grid

# Inicie um servidor local
python3 -m http.server 8000
# ou
npx serve .
# ou
php -S localhost:8000

# Acesse http://localhost:8000

Faça upload dos arquivos para qualquer servidor web. Não requer backend.

dash-grid/
├── index.html          # Dashboard principal
├── manifest.json       # Configuração PWA
├── sw.js              # Service Worker
├── README.md          # Documentação (PT)
├── README-en.md       # Documentação (EN)
├── LICENSE            # Licença MIT
├── DEVELOPMENT.md     # Guia de desenvolvimento (PT)
├── DEVELOPMENT-en.md  # Guia de desenvolvimento (EN)
├── article-medium.md  # Artigo técnico (PT)
└── article-medium-en.md # Artigo técnico (EN)

• HTML5 - Estrutura semântica
• CSS3 - Grid Layout, Custom Properties, Animations
• JavaScript ES6+ - Classes, Async/Await, Modules
• Chart.js - Gráficos interativos
• Service Worker API - Cache e offline support
• Web App Manifest - PWA features

• Prompt automático de instalação
• Ícones adaptativos para diferentes plataformas
• Splash screen personalizada

• Cache de recursos estáticos
• Estratégias de cache inteligentes
• Indicador visual de status offline

• Cache first para recursos estáticos
• Network first para dados dinâmicos
• Stale while revalidate para conteúdo

• Analytics de vendas
• Métricas de performance
• Relatórios executivos

• Painéis de controle
• Dashboards de usuário
• Métricas de produto

• Exemplo de CSS Grid avançado
• Implementação PWA
• Boas práticas de frontend

:root {
  --primary-color: #2563eb;
  --secondary-color: #1e40af;
  --success-color: #10b981;
  --danger-color: #ef4444;
}

.dashboard-grid {
  grid-template-columns: var(--sidebar-width) 1fr;
  grid-template-areas:
    'sidebar header'
    'sidebar main';
}

// Adicione novos widgets no array de dados
const newWidget = {
  value: 1234,
  change: '+5.2',
  trend: 'up'
};

• Lighthouse Score: 95+
• First Contentful Paint: < 1.5s
• Largest Contentful Paint: < 2.5s
• Cumulative Layout Shift: < 0.1

1. Fork o projeto
2. Crie uma branch para sua feature (git checkout -b feature/AmazingFeature)
3. Commit suas mudanças (git commit -m 'Add some AmazingFeature')
4. Push para a branch (git push origin feature/AmazingFeature)
5. Abra um Pull Request

• Integração com APIs reais
• Mais tipos de gráficos (scatter, radar, etc.)
• Filtros e períodos personalizáveis
• Exportação de dados (PDF, Excel)
• Notificações push em tempo real
• Temas personalizáveis pelo usuário

Este projeto está licenciado sob a Licença MIT - veja o arquivo LICENSE para detalhes.

• GitHub: @Genildocs
• LinkedIn: genildo-cerqueira
• Email: genildocs@gmail.com

• Chart.js - Biblioteca de gráficos
• CSS Grid - Layout system
• PWA - Progressive Web Apps
• Comunidade open source

⭐ Se este projeto foi útil, considere dar uma estrela!