💻 Uol - Gerenciamento de Clientes 💻

📃 Sobre

Esse projeto tem como objetivo construir uma aplicação CRUD Fullstack para cadastro de clientes.

Além de poder instalar e rodar o projeto localmente, você pode também interagir com essa versão online em um deploy realizado no Vercel.

‼️ Como o deploy é feito um em plano gratuito, a primeira requisição pode demorar um pouco para carregar. ‼️

E também é possível verificar a API neste deploy realizado no Render.

🔧 Ferramentas utilizadas

Frontend

JavaScript

React.js

Tailwind.css

Vite

Sweet Alert

React Router

React Toastify

Lucide icons

React Loading Components

Backend

Node.js

Express.js

Cors

Zod

TypeORM

PostgreSQL

🛠️ Instalação e execução

Rodando a aplicação localmente

Para rodar está aplicação localmente é necessário ter Git, Node e o PostgreSQL instalados e atualizados em seu computador.

Também é necessário que o seu sistema operacional tenha um terminal Bash instalado. Caso você esteja utilizando Linux ou macOS, o Bash já vem instalado por padrão. Porém, se o seu sistema for Windows, talvez você precise fazer a instalação a parte.

🔨 Configurando o Back-end

1. Clone o repositório

Use o comando: git clone git@github.com:edson-mac/test-fullstack.git.

Entre na pasta do repositório que você acabou de clonar:

cd test-fullstack

Entre na pasta do Backend

cd uol-backend

Instale as dependências

npm install

Configurando o banco de dados e .env

O projeto vem configurado para rodar em um banco de dados PostgreSQL, então é nessário instalar PostgreSQL em seu computador ou utilizar um servidor na nuvem. Após ter configurado seu banco, é necessário configurar as variáveis de ambiente:

1. Em um arquivo .env na raíz do repositório, adicione as configurações de seu banco MySQL:

DB_HOST= DB_NAME= DB_USER= DB_PASSWORD= DB_PORT=

2. Nesse mesmo arquivo .env, a porta do Express desejada para rodar o servidor

PORT=

3. Depois de preencher os dados no env pra se conectar ao banco só utilizar em sequência, para gerar e rodar as migrations que populam o banco:

npm run migration:generate

npm run migration:run

4. Por fim, após ter efetuado todas as configurações, rode o servidor utilizando este comando no diretório uol-backend:

npm run dev

🌅 Configurando o Front-end

1. Acesse o repositório

Entre na pasta do repositório:

cd test-fullstack

Entre na pasta do Frontend

cd uol-frontend

Instale as dependências

npm install

Configurando variáveis de ambiente

O projeto Frontend vem configurado para fazer diversas requisições para uma API, o endereço vai mudar dependendo de como você rodar o projeto, por isso é necessário configurar as variáveis de ambiente:

1. Em um arquivo .env na raíz do repositório, adicione as configurações de seu endereço no API como no exemplo abaixo:

VITE_API_URL="https://uol-api.onrender.com/"

3. Por fim, após ter efetuado todas as configurações, rode o servidor utilizando este comando no diretório ostenfrontend:

npm start

💻 Documentação e rotas da API:

Obtendo lista de todos os clientes - GET /

Excluindo uma empresa - DELETE /ID

Obtendo cliente por ID - GET /ID

Cadastrando um cliente - POST /

body = { "name": "Edson Caparroz", "email": "edson-mac@hotmail.com", "cpf": "22222222222", "phone": "11982344005", "status": "Ativo", }

Editando um cliente por ID - PUT /ID

body = { "id": 53, "name": "Edson Caparroz", "email": "edson-mac@hotmail.com", "cpf": "22222222222", "phone": "11982344005", "status": "Ativo", }

🌅 Interações com Frontend 🌅

Ícone de alerta com Modal para alerta de input

Componente de Loading para aguardar requisições na API

Alertas de sucesso ou falha para requisições na API

Opção de DELETE com ícone de Lixeira + Confirmação de ação