Skip to content

Commit b78df9c

Browse files
Samuel Ferreiraclaude
Samuel Ferreira
and
claude
committed
feat: painel admin profissional (React + TS + Vite + Tailwind)
- autenticação com rota protegida e sessão persistida - CRUD de usuários com modal, validação, busca, ordenação e paginação - dashboard com KPIs e gráficos (Recharts) - dark mode, toasts, skeletons, responsivo - CI/CD: build e deploy no GitHub Pages via Actions Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
0 parents  commit b78df9c

27 files changed

Lines changed: 4349 additions & 0 deletions

‎.github/workflows/deploy.yml‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
name: Deploy to GitHub Pages
2+
3+
on:
4+
push:
5+
branches: [main]
6+
workflow_dispatch:
7+
8+
permissions:
9+
contents: read
10+
pages: write
11+
id-token: write
12+
13+
concurrency:
14+
group: pages
15+
cancel-in-progress: true
16+
17+
jobs:
18+
build:
19+
runs-on: ubuntu-latest
20+
steps:
21+
- uses: actions/checkout@v4
22+
- uses: actions/setup-node@v4
23+
with:
24+
node-version: 20
25+
cache: npm
26+
- run: npm ci
27+
- name: Build
28+
run: npm run build
29+
- uses: actions/upload-pages-artifact@v3
30+
with:
31+
path: dist
32+
33+
deploy:
34+
needs: build
35+
runs-on: ubuntu-latest
36+
environment:
37+
name: github-pages
38+
url: ${{ steps.deployment.outputs.page_url }}
39+
steps:
40+
- id: deployment
41+
uses: actions/deploy-pages@v4

‎.gitignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
node_modules
2+
dist
3+
*.local
4+
.DS_Store

‎LICENSE‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
MIT License
2+
3+
Copyright (c) 2026 Samuel Ferreira
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is furnished
10+
to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
17+
CLAIM, DAMAGES OR OTHER LIABILITY, ARISING FROM, OUT OF OR IN CONNECTION WITH
18+
THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

‎README.md‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<h1 align="center">📊 Admin Dashboard — React + TypeScript</h1>
2+
3+
<p align="center">
4+
Painel administrativo de nível profissional: autenticação, CRUD completo, tabela de dados, gráficos e dark mode.
5+
</p>
6+
7+
<p align="center">
8+
<img src="https://img.shields.io/badge/React-20232A?style=flat&logo=react&logoColor=61DAFB"/>
9+
<img src="https://img.shields.io/badge/TypeScript-3178C6?style=flat&logo=typescript&logoColor=white"/>
10+
<img src="https://img.shields.io/badge/Vite-646CFF?style=flat&logo=vite&logoColor=white"/>
11+
<img src="https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=flat&logo=tailwind-css&logoColor=white"/>
12+
<img src="https://github.com/Samuelf27/admin-dashboard/actions/workflows/deploy.yml/badge.svg"/>
13+
</p>
14+
15+
<p align="center">
16+
<a href="https://samuelf27.github.io/admin-dashboard/"><b>🔗 Ver demo ao vivo</b></a>
17+
&nbsp;·&nbsp; 🔑 <code>admin@empresa.com</code> / <code>123456</code>
18+
</p>
19+
20+
<p align="center"><img src="https://raw.githubusercontent.com/Samuelf27/admin-dashboard/main/preview.png" alt="Preview do painel" width="820" /></p>
21+
22+
---
23+
24+
## 📌 Sobre o projeto
25+
26+
Um **painel administrativo completo** como os usados em produtos corporativos — o tipo de interface presente em praticamente toda empresa de software. Construído com foco em **boas práticas**, tipagem forte e uma camada de API desacoplada (pronta para plugar um back-end real).
27+
28+
## ✨ Funcionalidades
29+
30+
- 🔐 **Autenticação** com rota protegida e sessão persistida
31+
- 👥 **CRUD completo de usuários** — criar, editar e remover com **modal e validação**
32+
- 🔎 **Tabela de dados** com **busca**, **ordenação por coluna** e **paginação**
33+
- 📈 **Dashboard** com KPIs e gráficos (área e pizza) via Recharts
34+
- 🌗 **Dark mode** persistente + design totalmente **responsivo**
35+
- 🔔 Sistema de **toasts**, estados de **carregamento** (skeletons) e vazio
36+
- ⚙️ **CI/CD** — build e deploy automáticos no GitHub Pages via GitHub Actions
37+
38+
## 🛠️ Stack
39+
40+
| Camada | Tecnologia |
41+
|---|---|
42+
| UI | React 18 + TypeScript |
43+
| Build | Vite |
44+
| Estilo | Tailwind CSS (dark mode por classe) |
45+
| Rotas | React Router |
46+
| Gráficos | Recharts |
47+
| Ícones | lucide-react |
48+
| CI/CD | GitHub Actions → GitHub Pages |
49+
50+
## 🏗️ Arquitetura
51+
52+
```
53+
src/
54+
├── lib/
55+
│ ├── api.ts # camada de dados (mock com latência; troque por API real)
56+
│ ├── auth.tsx # contexto de autenticação
57+
│ ├── theme.ts # hook de tema (dark mode)
58+
│ └── types.ts # tipos de domínio
59+
├── components/ # Layout, Toast, Modal, StatCard, ProtectedRoute
60+
└── pages/ # Login, Dashboard, Users (CRUD), Settings
61+
```
62+
63+
> 💡 A `api.ts` foi desenhada para ser substituída por um back-end real (como a [br-validator-api](https://github.com/Samuelf27/br-validator-api)) sem alterar os componentes.
64+
65+
## 🚀 Como rodar
66+
67+
```bash
68+
npm install
69+
npm run dev # http://localhost:5173
70+
npm run build # gera dist/ (typecheck + bundle)
71+
```
72+
73+
## 📄 Licença
74+
75+
[MIT](LICENSE) © Samuel Ferreira
76+
77+
---
78+
79+
<p align="center">
80+
<a href="https://github.com/Samuelf27">GitHub</a> · <a href="https://www.linkedin.com/in/samuel-ferreira27/">LinkedIn</a>
81+
</p>

‎index.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!doctype html>
2+
<html lang="pt-BR">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta name="description" content="Painel administrativo profissional — React, TypeScript, Tailwind. Auth, CRUD, gráficos e dark mode." />
7+
<link rel="preconnect" href="https://fonts.googleapis.com" />
8+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
9+
<title>Admin Dashboard · React + TypeScript</title>
10+
</head>
11+
<body>
12+
<div id="root"></div>
13+
<script type="module" src="/src/main.tsx"></script>
14+
</body>
15+
</html>

0 commit comments

Comments
 (0)