Interface administrativa desenvolvida em React para visualização de métricas, usuários e atividades da plataforma.
O objetivo deste projeto foi praticar construção de interfaces modernas, componentização em React e organização de layout semelhante a painéis administrativos utilizados em aplicações SaaS.
O DevMetrics Dashboard simula um painel administrativo utilizado para acompanhar métricas de um sistema digital.
A interface permite visualizar indicadores importantes da plataforma, acompanhar atividade recente e navegar entre diferentes áreas administrativas.
Este projeto foi desenvolvido com foco em:
- organização de componentes
- estruturação de layout administrativo
- navegação entre páginas
- construção de gráficos e visualização de dados
- Dashboard com métricas principais
- Gráfico de receita semanal
- Tabela de usuários recentes
- Feed de atividades do sistema
- Navegação entre seções
- Sidebar colapsável
- Layout responsivo
- React
- Vite
- Chart.js
- Lucide Icons
- CSS
src
├ components
│ ├ Sidebar.jsx
│ ├ Header.jsx
│ ├ StatCard.jsx
│ ├ UsersTable.jsx
│ ├ ActivityList.jsx
│ └ AnalyticsChart.jsx
│
├ data
│ └ dashboardData.js
│
├ App.jsx
└ main.jsx
Clone o repositório
git clone https://github.com/ederfelixsilva/devmetrics-dashboard.git
Entre na pasta do projeto
cd devmetrics-dashboard
Instale as dependências
npm install
Execute o projeto
npm run dev
A aplicação estará disponível em:
http://localhost:5173
Este projeto foi desenvolvido como parte da minha prática em desenvolvimento Front-End utilizando React.
A proposta foi criar um painel administrativo com aparência profissional, semelhante aos dashboards utilizados em aplicações reais.
Éder Félix