E-commerce de relógios com Node.js e Vue.js

📌 Descrição do Projeto

Este é um sistema de e-commerce desenvolvido com Vue.js no frontend e Node.js no backend. Ele permite a gestão de usuários, produtos, carrinho de compras e pedidos, garantindo uma experiência fluida para os clientes.

🚀 Tecnologias Utilizadas

• Frontend: Vue.js (Composition API, Vue Router)
• Backend: Node.js com Express
• Banco de Dados: MongoDB (com Mongoose)
• Autenticação: JWT (JSON Web Token)
• Gerenciamento de Estado: Pinia
• Estilização: CSS puro
• Animação: GSAP

🎯 Funcionalidades

• Cadastro e login de usuários
• Niveis de permissão baseado em roles
• Geração de tokens
• Adição, listagem, atualização e remoção de produtos via formulario
• Adição, alteração de quantidade e remoção de produtos no carrinho
• Finalização de compras
• Exibição do histórico de pedidos
• Rotas protegidas
• Painel administrativo com acesso restrito
• Funcionalidades administrativas:
  • Relatório de todos os clientes
  • Consulta a todos os pedidos de um cliente
  • Consulta a todos os pedidos do sistema

📸 Imagens do Projeto

Pagina Inicial

Lista de Produtos

Página de Login

Página de Cadastro

Carrinho de Compras

Histórico de Pedidos

📂 Estrutura do Projeto

Carrinho_de_compras_Node_Vuejs/
├── backend/       # Código-fonte do servidor Node.js
├── frontend/      # Código-fonte da aplicação Vue.js
|-- images/        # Imagens capturadas do projeto
├── README.md      # Documentação do projeto

📌 Backend (Node.js + Express)

Estrutura do backend:

backend/
├── config/        # Configurações do banco de dados
|-- middlewares/   # Definição de middlewares para autentição e roles
├── models/        # Modelos do MongoDB
├── routes/        # Definição das rotas da API
├── utils/         # Ferramentas para geração de tokens
├── server.js      # Arquivo principal

📌 Frontend (Vue.js)

Estrutura do frontend:

frontend/
├── src/
|   |-- assets/       # Arquivos auxiliares como imagens, icones, etc.
│   ├── components/   # Componentes reutilizáveis
|   |-- constants/    # Informações como URIs, URLs, etc.
|   |-- effects/      # Animações e efeitos aplicados
|   |-- model/        # Informações padronizadas
|   |-- notifications # Lógica das notificações
│   ├── routes/       # Definição das rotas
|   |-- services/     # Definição dos serviços
│   ├── store/        # Gerenciamento de estado (Pinia)
│   ├── views/        # Páginas da aplicação
│   ├── App.vue       # Componente raiz
|   |-- main.css      # Estilização global
│   ├── main.js       # Arquivo de inicialização

📦 Instalação e Execução

🔹 Clonar o repositório

git clone https://github.com/Leonardobern10/Carrinho_de_compras_Node_Vuejs.git
cd Carrinho_de_compras_Node_Vuejs

🔹 Backend

cd backend
npm install
npm run dev

🔹 Frontend

cd frontend
npm install
npm run dev

🔑 Autenticação

O sistema utiliza JWT para autenticação. Ao logar, um refreshtoken é armazenado no banco de dados e vinculado ao usuário. Esse refreshToken é utilizado para gerar um token (accessToken) de menor duração, garantindo que o usuário fique logado por mais tempo. Cada cliente tem um nivel de permissão, sendo o padrão User. Esse nivel de permissão é necessário para o acesso à algumas seções e funcionalidades do sistema (ex: Funcionalidades administrativas).

📌 Endpoints da API

🔹 Autenticação

• POST /api/auth/register - Cadastro de usuário
• POST /api/auth/login - Login de usuário
• POST /api/auth/refresh - Renovação do AccessToken
• POST /api/auth/logout - Desconexão do usuário
• GET /api/auth/userStatus - Verifica se o usuário está autenticado
• GET /api/auth/me - Obtém dados do usuario como roles

🔹 Produtos

• GET /api/products - Lista todos os produtos
• GET /api/products/:id - Obtém um produto específico
• POST /api/products - Adiciona um produto ao sistema
• PUT /api/products/:id - Atualiza os dados de um produto
• PATCH /api/change/:id - Atualiza parcialmente um produto
• DELETE /api/delete/:id - Remove um produto específico

🔹 Pedidos

• POST /api/orders - Finaliza uma compra
• GET /api/orders - Obtém o histórico de pedidos do usuário

Os itens armazenados no carrinho são salvos no LocalStorage permitindo que esses dados persistam entre sessões.

📜 Licença

Este projeto é distribuído sob a licença MIT.

🤝 Contribuição

Pull requests são bem-vindos! Para melhorias significativas, abra uma issue para discutirmos.

📬 Contato

• Autor: Leonardo Bernardo
• GitHub: Leonardobern10
• LinkedIn: in/leonardo-bernardo25