CRUD de Lista de produtos

Esta é uma aplicação web para gerenciamento de uma lista de produtos. O usuário pode criar, ler, atualizar e excluir produtos da lista.

O backend foi desenvolvido em Node.js com o framework Express, o frontend foi desenvolvido em React com o framework Next.js e o banco de dados utilizado é o MongoDB.

💻 Demonstração

Para acessar, clique aqui

🔧 Tecnologias

Esse projeto foi desenvolvido com as seguintes tecnologias:

Frontend

• React
• Typescript
• Next
• Sass
• react-hook-form
• zod
• react-text-mask
• date-fns
• react-toastify

Backend

• Express
• MongoDB

📐 Requisitos

Antes de executar a aplicação, certifique-se de ter instalado as seguintes ferramentas em sua máquina:

• Node.js
• npm

📥 Instalação

1. Abra o terminal e clone o repositório

  git clone https://github.com/aldemylla/Desafio-ServerSoftwares.git

2. Entre no diretório criado

  cd Desafio-ServerSoftwares

3. Instale as dependências do backend:

  cd backend
  npm install

3. Instale as dependências do frontend:

  cd ../frontend
  npm install

⚙️ Configuração

Frontend

1. Renomeie o arquivo .env.local.sample para .env.local

2. Edite o arquivo .env.local para configurar a URL do servidor backend

Backend

1. Renomeie o arquivo .env.sample para .env

2. Edite o arquivo .env para configurar a conexão com o seu banco de dados MongoDB

🚀 Execução

Frontend

1. Inicie o servidor frontend dentro da pasta /frontend:

  npm run dev

Estará disponível no endereço http://localhost:3000.

Backend

1. Inicie o servidor backend dentro da pasta /backend:

  npm run dev

Estará disponível no endereço http://localhost:3333.

🔍 Funcionalidades

• Listar produtos
• Criar produto
• Editar produto
• Excluir produto

📈 API

O projeto possui uma API RESTful que pode ser utilizada para acessar as funcionalidades do CRUD. Os dados são enviados e recebidos em formato JSON. A API da aplicação possui as seguintes rotas:

Disponível em: https://desafio-serversoftwares2.onrender.com

GET /products

• Retorna a lista de todos os produtos cadastrados.

Response Status:

200 OK

Exemplo de resposta:

[
  {
    "codigo": "001",
    "descricao": "Produto 1",
    "preco": "R9,99",
    "_id": "60930064b96f5a0015e14e53",
    "data_cadastro": "2023-04-13T20:24:42.931Z",
    "__v": 0
  },
  {
    "codigo": "002",
    "descricao": "Produto 2",
    "preco": "R19,99",
    "_id": "60930084b96f5a0015e14e54",
    "data_cadastro": "2023-04-13T20:24:42.931Z",
    "__v": 0
  }
]

---

POST /products

• Cria um novo produto.

Request Body

Campo	Tipo	Descrição
codigo	string	Código do produto
descricao	string	Descrição do produto
preco	string	Preço do produto

Exemplo de corpo de requisição:

{
  "codigo": "003",
  "descricao": "Produto 3",
  "preco": "R29,90"
}

Response Status:

200 OK

Exemplo de resposta:

{
  "codigo": "003",
  "descricao": "Produto 3",
  "preco": "R29,90",
  "_id": "60930084b96f5a0015e14e54",
  "data_cadastro": "2023-04-13T20:24:42.931Z",
  "__v": 0
}

---

GET /products/:id

• Retorna um produto existente pelo seu ID.

Parameters

Nome	Tipo	Descrição
id	string	ID do produto

Response Status:

200 OK

Exemplo de resposta:

[
  {
    "codigo": "001",
    "descricao": "Produto 1",
    "preco": "R9,99",
    "_id": "60930064b96f5a0015e14e53",
    "data_cadastro": "2023-04-13T20:24:42.931Z",
    "__v": 0
  }
]

---

PUT /products/:id

• Atualiza um produto existente pelo seu ID.

Parameters

Nome	Tipo	Descrição
id	string	ID do produto

Request Body

Campo	Tipo	Descrição
codigo	string	Código do produto
descricao	string	Descrição do produto
preco	string	Preço do produto

Exemplo de corpo de requisição:

{
  "codigo": "001",
  "descricao": "Produto 1 atualizado",
  "preco": "R14,99"
}

Response Status:

200 OK

Exemplo de resposta:

{
  "codigo": "001",
  "descricao": "Produto 1 atualizado",
  "preco": "R14,99",
  "_id": "60930064b96f5a0015e14e53",
  "data_cadastro": "2023-04-13T20:24:42.931Z",
  "__v": 0
}

---

DELETE /products/:id

• Deleta um produto existente pelo seu ID.

Parameters

Nome	Tipo	Descrição
id	string	ID do produto

Response Status:

204 No Content

---

Feito por Aldemylla 👋 Me encontre no LinkedIn!