🛍️ E-commerce Fullstack

Link

https://ecommerce-fullstack-client.vercel.app/

📋 Índice

Sobre o Projeto
Escopo e Objetivo
Tecnologias Utilizadas
Instalação e Configuração
Execução do Projeto
Funcionalidades Implementadas
Estrutura do Projeto
Contribuindo
Licença

📖 Sobre o Projeto

Este projeto é uma API Rest com um frontend integrado para um e-commerce simples. Ele foi desenvolvido como parte do Desafio do Boticário e tem como objetivo fornecer uma aplicação completa, com funcionalidades essenciais como cadastro e login de usuários, gerenciamento de produtos, e mais.

🎯 Escopo e Objetivo

O objetivo principal do projeto é criar uma API e um frontend responsivo para um e-commerce, onde os produtos são consumidos por requisição fetch para o backend, usuários possam se registrar, fazer login, adicionar produtos ao carrinho e realizar compras. O projeto segue boas práticas de desenvolvimento e utiliza tecnologias modernas como TypeScript, Node.js, Express, MongoDB e React.

🛠️ Tecnologias Utilizadas

Backend

Node.js: Ambiente de execução JavaScript no servidor.
Express: Framework para Node.js para construção de APIs.
TypeScript: Superset do JavaScript que adiciona tipagem estática.
MongoDB: Banco de dados NoSQL para armazenamento dos dados.
Mongoose: ODM (Object Data Modeling) para MongoDB.
JWT (JSON Web Tokens): Autenticação e autorização segura.
bcrypt.js: Hashing de senhas para segurança.

Frontend

React: Biblioteca para construção de interfaces de usuário.
TypeScript: Tipagem estática no frontend.
Vite: Ferramenta de build rápida para projetos web.

💻 Instalação e Configuração

Pré-requisitos

Node.js (v16 ou superior)
NPM ou Yarn
MongoDB

Passo a Passo

Clone o repositório:

git clone https://github.com/vitorwhois/ecommerce-fullstack-react-node.git
cd nome-do-repositorio

Instale as dependências do backend:
```
npm install
```
Instale as dependências do frontend:
```
npm install
```
Configuração do arquivo .env:
```
MONGO_URI=sua-uri-do-mongodb
PORT=3001
```

Execução do Projeto

Executando o Backend

Inicie o servidor backend:
```
npm run dev
```
O servidor estará rodando em http://localhost:3001.

Executando o Frontend

Inicie o servidor Frontend:
```
npm run dev
```
O frontend estará disponível em http://localhost:5173.

Funcionalidades Implementadas

Autenticação

Registro de usuário: Criação de um novo usuário com nome, email e senha.
Login de usuário: Autenticação de usuário com email e senha, gerando um token JWT.

Gerenciamento de Usuários

CRUD de Usuários: Criação, leitura, atualização e remoção de usuários.
Soft Delete: Desativação de usuários sem removê-los do banco de dados.
Busca de Usuário por ID: Recupera os dados de um usuário específico (exceto a senha).

Gerenciamento de Produtos

CRUD de Produtos: Criação, leitura, atualização e remoção de produtos.
Importação de Produtos: Importação de produtos a partir de um arquivo JSON.

Carrinho de Compras (em construção)

Adição e Remoção de Itens no Carrinho: Gerenciamento do carrinho de compras do usuário.

Estrutura do Projeto

A estrutura do projeto está organizada conforme as melhores práticas para desenvolvimento fullstack com TypeScript e React:

Backend (server/)

    server/
│
├── src/
│   ├── controllers/        # Controladores das rotas
│   ├── middlewares/        # Middlewares de autenticação e validação
│   ├── models/             # Modelos do Mongoose
│   ├── routes/             # Definição das rotas
│   ├── scripts/            # Scripts utilitários (ex.: importação de produtos)
│   ├── utils/              # Funções utilitárias, como tratamento de erros e pdrão de mensagens
│   └── app.ts              # Configuração principal do servidor Express
│
├── .env                    # Variáveis de ambiente
└── package.json            # Dependências e scripts

Frontend (client/)

client/
│
├── src/
│   ├── components/         # Componentes React reutilizáveis
│   ├── pages/              # Páginas principais da aplicação
│   ├── styles/             # Estilos globais e específicos
│   ├── utils/              # Funções e hooks utilitários
│   ├── App.tsx             # Componente raiz da aplicação
│   └── index.tsx           # Arquivo de entrada do React
│
├── .env                    # Variáveis de ambiente
└── package.json            # Dependências e scripts

Rotas do Backend

Aqui estão as principais rotas da API que foram implementadas:

Autenticação e Usuários

POST /api/users/register
Rota para registrar um novo usuário.
Corpo da requisição:

{
    "name": "Nome do Usuário",
    "email": "email@example.com",
    "password": "senha123"
}

POST /api/users/login
Rota para realizar o login de um usuário.
Corpo da requisição:

    {
    "email": "email@example.com",
    "password": "senha123"
    }

Resposta:

    {
    "token": "jwt-token",
    "userId": "id-do-usuario"
}

GET /api/users/:id

Rota para buscar um usuário por ID (Requer autenticação).
Cabeçalho:

Authorization: Bearer {token}

PATCH /api/users/:id

Rota para atualiza as informações de um usuário.

Cabeçalho:

Authorization: Bearer {token}

Corpo da Requisição:

    {
    "name": "Novo Nome",
    "email": "novoemail@exemplo.com"
    }

Resposta de Sucesso:

{
  "user": {
    "name": "Novo Nome",
    "email": "novoemail@exemplo.com",
    "isActive": true
  },
  "message": "Usuário atualizado com sucesso"
}

Resposta de Erro:

{
  "message": "Usuário não encontrado"
}

PATCH /api/users/delete/:id

Rota para realizar o Soft delete de um usuário por ID (Requer autenticação).
Cabeçalho:

Authorization: Bearer {token}

Resposta de Sucesso:

{
  "message": "Usuário desativado com sucesso"
}

Resposta de Erro:

{
"message": "Usuário não encontrado"
}

DELETE /api/delete/:id/hard

Remove permanentemente o usuário do banco de dados.

{
  "message": "Usuário removido  do com sucesso"
}

API de Produtos

Criar Produto

Método: POST
Rota: /products
Descrição: Cria um novo produto.

Corpo da Requisição:

{
  "name": "Nome do Produto",
  "description": "Descrição do produto",
  "price": 100,
  "stock": 50
}

Listar todos os Produtos

GET /api/products/products

Lista Produto especificamente

GET /api/products/:id

Atualizar Produto

PUT /api/:id

Deletar Produto

DELETE /api/:id