🚀 CRUD de Usuários – Fullstack (React + Node.js + Prisma)

Um projeto Fullstack completo, contendo frontend em React + Vite + MUI e backend em Node.js + Express + Prisma, permitindo:

✔️ Cadastro
✔️ Listagem
✔️ Edição
✔️ Exclusão

Tudo integrado ao banco de dados com atualização automática via React Query.

---

📁 Estrutura do Projeto

├── Back/                     # Backend (Node.js + Express + Prisma)
│   ├── server.js
│   ├── prisma/
│   │   └── schema.prisma
│   └── package.json
│
├── Front/                    # Frontend (React + Vite + MUI + React Query)
│   ├── src/
│   ├── vite.config.ts
│   └── package.json

---

⚡ Como Rodar o Projeto

1️⃣ Clonar o repositório

git clone https://github.com/seu-repo.git
cd seu-repo

---

🖥️ Backend (Node.js + Prisma)

2️⃣ Instalar dependências

cd Back
npm install

3️⃣ Configurar o Prisma e o banco

npx prisma db push

4️⃣ Rodar o servidor

npm start

---

💻 Frontend (React + Vite)

5️⃣ Instalar dependências

cd Front
npm install

6️⃣ Rodar o projeto

npm run dev

---

🧠 Como o CRUD Funciona

➕ Cadastro

• Preencha o formulário (nome, idade e email).
• Clique em Cadastrar.
• Envia um POST /cadastro para o backend.
• O usuário aparece instantaneamente na lista (React Query atualiza automático).

---

📋 Listagem

• A tabela da direita consome GET /cadastro.
• Atualização automática quando qualquer ação ocorre.

---

✏️ Edição

• Clique no botão ✏️ Editar.
• Os dados aparecem no formulário.
• Edite e clique em Salvar Alterações.
• Envia PUT /cadastro/:id para atualizar no banco.
• O formulário volta ao modo de cadastro.

---

🗑️ Exclusão

• Clique no botão 🗑️ Remover.
• Envia DELETE /cadastro/:id.
• Lista recarregada automaticamente.

---

🛠️ Tecnologias Utilizadas

🎨 Frontend

• React + Vite
• TypeScript
• Material UI (Glassmorphism + tema moderno)
• React Query (cache + atualização automática)
• Axios
• Zustand (opcional — store global)

⚙️ Backend

• Node.js
• Express
• Prisma ORM (queries seguras e tipadas)
• Banco: MongoDB (configurável no .env)
• CORS
• Dotenv

---

📝 Observações Importantes

• O backend deve ser iniciado antes do frontend.
• Certifique‑se de configurar o arquivo .env do Prisma, exemplo:

DATABASE_URL="mongodb+srv://usuario:senha@cluster-url"

---

🎯 Objetivo do Projeto

Fornecer uma base moderna de CRUD totalmente escalável, rápida de rodar e fácil de evoluir — ideal para estudos, pequenas aplicações, entrevistas e testes técnicos.

---

Feito com ❤️ para desenvolver, aprender e evoluir.