Dashboard React

Dashboard interativo e responsivo desenvolvido com React, Chart.js e Tailwind CSS. Exibe graficos, metricas e dados em tempo real com uma interface moderna e intuitiva.

Caracteristicas

• Interface responsiva e moderna
• Graficos interativos com Chart.js
• Metricas e KPIs em destaque
• Dados em tempo real
• Dark mode/Light mode
• Filtros dinamicos
• Layout adaptavel para mobile
• Componentes reutilizaveis

Stack Tecnologico

• React - Framework UI
• Chart.js - Graficos de dados
• Tailwind CSS - Estilos
• React Router - Navegacao
• Axios - Cliente HTTP
• Recharts - Graficos avancados (opcional)

Instalacao

Pre-requisitos

• Node.js (v14+)
• npm ou yarn

Passos

1. Clone o repositorio:

git clone https://github.com/nilotj/dashboard-react.git
cd dashboard-react

2. Instale as dependencias:

npm install

3. Inicie a aplicacao em desenvolvimento:

npm start

A aplicacao estara disponivel em http://localhost:3000

Uso

Estrutura de Pastas

src/
├── components/
│   ├── Chart.jsx          # Componentes de graficos
│   ├── Header.jsx         # Cabecalho
│   ├── Sidebar.jsx        # Barra lateral
│   ├── Card.jsx           # Cards reutilizaveis
│   └── MetricCard.jsx     # Cards de metricas
├── pages/
│   ├── Dashboard.jsx      # Pagina principal
│   ├── Analytics.jsx      # Pagina de analise
│   └── Reports.jsx        # Pagina de relatorios
├── hooks/
│   ├── useFetchData.js    # Hook customizado
│   └── useTheme.js        # Hook de tema
├── services/
│   └── api.js            # Configuracao de API
├── styles/
│   └── tailwind.css      # Estilos customizados
└── App.jsx              # Componente raiz

Funcionalidades Principais

Dashboard

• Visao geral de metricas principais
• Graficos de tendencias
• Ultima atividade
• Status dos servicos

Analytics

• Analise de dados detalhada
• Graficos comparativos
• Exportacao de dados

Reports

• Relatorios personalizados
• Agendamento de relatorios
• Download em PDF

Build para Producao

npm run build

O build sera criado na pasta build/

Deploy

Vercel

npm install -g vercel
vercel

Netlify

npm install -g netlify-cli
netlify deploy --prod --dir=build

Licenca

Este projeto eh de codigo aberto sob a licenca MIT.

Contribuindo

Contribuicoes sao bem-vindas!

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

---

Se este projeto foi util, considere dar uma star!