Conéctar Panel

Conéctar Panel é um sistema fullstack (frontend React + backend Node/NestJS) desenvolvido com foco em performance, escalabilidade e arquitetura limpa. Utiliza Vite no frontend e integração JWT + OAuth2 (Google) na autenticação, com comunicação API REST entre front e back.

• Panel Demo live
  • ✉️ admin@admin.com
  • 🔑 admin123
• API Swagger Docs

---

🚀 Tecnologias utilizadas

Frontend (React + Vite + TypeScript)

• Vite - bundler moderno, super rápido.
• React - base da UI.
• TypeScript - tipagem estática.
• Axios - HTTP client para comunicação com backend.
• Zod - validação de dados.
• React Router DOM - roteamento SPA.
• React Hook Form - gerenciamento de formulários.
• React Helmet - controle de <title> e metadados.

Backend (Node.js + NestJS + MySQL)

• NestJS - framework Node com arquitetura escalável.
• TypeORM - ORM para banco MySQL.
• Passport + JWT + Google OAuth - sistema de autenticação robusto.
• dotenv - gerenciamento de variáveis de ambiente.

🤓 Para nerds:

• Documentação Técnica
• Swagger

---

Ver todas screenshots

Checklist do Projeto

• Gerenciamento de Usuários
• Interface Amigável
• Backend (NestJS + TypeScript)
• JWT /auth/register e /auth/login
• CRUD
• Filtros e Ordenação
• Listagem de usuários inativos
• Testes Automatizados
• Tela de Login
• Tela de Cadastro
• Login com Google
• Tela de Listagem de Usuários (admin)
• Interface Responsiva
• Escalabilidade
• Segurança
• Documentação
• Arquitetura Limpa

---

📂 Estrutura do projeto

/users_conectar
├── backend
│   ├── src
│   │   ├── cli
│   │   ├── common          (entities, pipes, schema, guards)
│   │   ├── migrations      (Create table user)
│   │   ├── modules         (controllers, services, etc)
│   │   └── main.ts
│   └── .env
├── frontend
│   ├── src
│   │   ├── assets
│   │   ├── components
│   │   ├── pages
│   │   │   ├── (admin)     (pages admin)
│   │   │   ├── (auth)      (login and register)
│   |   |   └── (user)      (profile user)
│   │   ├── hooks
│   │   ├── contexts
│   │   ├── stores
│   │   ├── types
│   │   └── utils
│   │   ├── routesConfig.ts
│   │   ├── App.jsx
│   │   └── main.jsx
│   └── vite.config.ts

---

📦 Requisitos

• Node.js LTS >= v18.19.1
• MySQL ou PostgreSQL local ou Docker
• Café ☕ (opcional)

---

🚀 Instalação

git clone https://github.com/luannsr12/users_conectar.git
cd users_conectar

#instalar backend
cd backend && npm install && cd ../

#instalar frontend
cd frontend && npm install && cd ../

Crie seu banco de dados.

# Banco de dados
CREATE DATABASE conectar_db;

Backend

backend/.env

# editar arquivo .env do backend
cd backend && cp .env.example .env && nano .env

# environment (.env)

# Porta e endereço backend
IP_ADDRESS=127.0.0.1 # api.backend.dev ou 127.0.0.1 (ip)
BACKEND_PORT=3000

FRONTEND_URL=http://localhost:5173
BACKEND_URL=http://127.0.0.1:3000

# prod ou dev
MODE=dev

# Dados banco de dados
DB_HOST=localhost
DB_PORT=3306
DB_USER=root
DB_PASS=
DB_NAME=panel_conectar
DB_TYPE=mysql

# Credenciais Google Auth
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=

JWT_SECRET=123
JWT_EXPIRATION=3600s

Obs: Preencha as variáveis do Google Auth para login funcionar.

---

Frontend

frontend/.env

No arquivo vite.config.ts, a URL da API é definida via import.meta.env.VITE_API_URL. Crie o .env na raiz do frontend:

# editar arquivo .env do frontend
cd ../                               # sai da pasta backend se estiver nela 
cd frontend                          # acessa a pasta frontend 
cp .env.example .env && nano .env    # inicia a edição do .env

# environment (.env)

# endpoint api (backend)
VITE_API_URL=http://127.0.0.1:3000
VITE_PORT=8080

---

💡 Migrations

Rode os comandos abaixo para criar as tabelas no database Gere também dados demo e login admin. (Lembre-se de ter criado o database já)

# acessa backend
cd backend

# cria a tabela
npm run migrate:run

# popula o banco de dados com users demo e admin
npm run db:setup

# se tudo ocorrer bem os dados do admin são:
#<email>: admin@admin.com
#<pass>: admin123

# será criado ao total 20 usuário demo, todos possuem a senha padrão:
#<email>: cada user possui um aleatorio
#<pass>: user123

---

🧪 Testes

npm run test

---

🦎 Running: Modo de teste

# start backend
cd backend
npm run start:dev


# start frontend
cd frontend
npm run dev

Panel: http://localhost:8080/auth/login Swagger: http://localhost:3000/api

---

🚀 Primeira execução completa

# Backend
cd backend
cp .env.example .env     # (se houver um exemplo)
npm install
npm run migrate:run
npm run db:setup
npm run start:dev

# Frontend
cd ../frontend
cp .env.example .env     # (se houver um exemplo)
npm install
npm run dev

---

🎉 Running: Produção

# start backend
cd backend
npm install
npm run build
npm run start


# start frontend
cd frontend
npm install
npm run build
npm run start

🚀 Panel: http://localhost:8080/auth/login 📑 Swagger: http://localhost:3000/api

---

✨ API Backend

Rota	Descrição
POST /auth/register	Cadastro
POST /auth/login	Login
POST /auth/google	Redirect Login Google
POST /auth/google/callback	Callback Login Google
GET /admin/users/list	Listar usuários (admin)
POST /admin/users/create	Cadastrar usuários (admin)
PATCH /admin/users/update/{id}	Atualizar usuário (admin)
DELETE /admin/users/delete/{id}	Remover usuário (admin)
GET /users/me	Ver perfil próprio
PATCH /users/me	Atualizar perfil

---

📜 Notas

• Senhas com bcrypt
• JWT em Authorization: Bearer <token>
• Defina a URL API do backend em .env dentro de frondend

---

🎭 Layout e Design

• Interface responsiva e moderna.
• Componentização inteligente para reutilização de elementos.
• Navegação fluida com React Router.
• Integração com Google Auth para login seguro.

---

☕ Autor

Luan Alves Jun, 2025