Zé Birita

A aplicação consiste em desenvolver tanto o back-end quanto o front-end para uma distribuidora de bebidas. Os usuários, incluindo clientes, vendedores e administradores, terão acesso ao aplicativo por meio de login, com funcionalidades distintas para cada um deles. Os clientes poderão fazer pedidos a partir de uma lista de produtos, enquanto os vendedores terão a responsabilidade de aprovar, preparar e entregar os pedidos. O administrador será responsável por gerenciar o acesso ao aplicativo.

A comunicação entre os clientes e os vendedores é essencial para o funcionamento do sistema. Os clientes farão pedidos através do "carrinho de compras", que serão aprovados, preparados e enviados pelos vendedores.

Ao fazer um pedido, o cliente espera que ele seja exibido no painel de pedidos do vendedor após a atualização da página. Por sua vez, o cliente poderá atualizar sua página para obter informações sobre o status de seu pedido, como se ele estiver sendo preparado ou já estiver em entrega.

Os principais fluxos podem ser divididos em quatro grupos: fluxo comum (login e registro), fluxo do cliente (produtos, checkout, pedidos e detalhes do pedido), fluxo da pessoa vendedora (pedidos e controle do pedido) e validação do status do pedido (teste sem atualização em tempo real e teste com atualização em tempo real). Além disso, o fluxo da pessoa administradora, que envolve o gerenciamento de usuários.

Idealizadores

Funcionalidades

• Registro e login para clientes, vendedores e administradores.
• Navegação e visualização dos produtos.
• Adição de produtos ao carrinho de compras.
• Checkout e conclusão da compra.
• Aprovação, preparo e entrega de pedidos pelos vendedores.
• Rastreamento do status dos pedidos pelos clientes.
• Gerenciamento de usuários pelos administradores.
• Atualizações em tempo real sobre o status dos pedidos.
• Programação Orientada a Objetos e princípios SOLID:
• Implementar: Classes, Instâncias, Atributos e Métodos.

Tecnologias utilizadas

Front-End

Tecnologias

• React
• Styled-components
• React-router-dom
• React-hot-toast
• React-icons
• Stylelint
• Eslint

Back-End

Tecnologias

• Javascript
• Node.js
• Express.js
• MySql
• Sequelize
• Programação Orientada a Objetos (POO)
• Arquitetura Model-Service-Controller (MSC)
• Multer
• JWT
• md5
• Joi
• Joi-password
• Eslint

Requisitos

FRONT END

Requisitos Gerais

• Caso existam informações no LocalStorage referentes ao usuário, o usuário é logado automaticamente pela aplicação.

• Com o intuito de promover vendas, as quantidades dos produtos são atualizadas e armazenadas no LocalStorage.

• A experiência do usuário foi uma das maiores preocupações durante a implementação. Portanto, o tratamento de erros e as notificações ao usuário foram implementados em diversas requisições e ações realizadas pelo usuário.

• Caso o usuário esteja com o login desatualizado,expirado e inválido durante uma requisição, ele será notificado, deslogado e redirecionado para a página de login.

  Demonstração

  
  

Header

• No menu principal, estão disponíveis links de navegação para as diferentes páginas da aplicação.
• Os textos exibidos na interface são renderizados de forma condicional, levando em consideração se o usuário é um cliente, vendedor ou administrador.
• O link para a página de administração de usuários só é visível para o usuário com perfil de administrador.
• Há um link para a página de checkout, que exibe a quantidade e o valor total dos produtos selecionados pelo usuário.
• Existe um link para a página de vendas, que exibe a quantidade e o valor total dos produtos nas compras ou vendas do usuário.
• Se o usuário estiver logado, o seu nome é exibido na interface. Caso contrário, é mostrado um botão que redireciona para a página de login.
• Existe também um link para realizar o logout da aplicação.

SearchBar

• A aplicação possui uma SearchBar que permite que o usuário pesquise por nome e categoria de produtos.
• Quando o usuário realiza a pesquisa, se a requisição for bem-sucedida, ele é redirecionado para a página de resultados de busca, onde os parâmetros pesquisados são exibidos na URL.
• No caso de a requisição não retornar nenhum produto, o usuário é notificado sobre isso, sem ser redirecionado para outra página.

Página de Produtos e Search

• Ao entrar na página, é feita uma requisição ao back-end para obter os produtos disponíveis, que são então exibidos na tela.
• A página possui um carrossel simulando uma promoção da Black Friday, mostrando a porcentagem de desconto, o valor atual, o valor anterior à promoção e a foto do produto em destaque.
• Os cards exibindo os produtos contêm a foto, o preço e botões para adicionar ou diminuir a quantidade do produto.
• Ao clicar no card de um produto, o usuário é redirecionado para a página de detalhes desse produto.
• Sempre que a quantidade de um produto é alterada, o LocalStorage é atualizado, garantindo que o usuário não perca as informações do produto no carrinho durante a navegação.
• A página de pesquisa realiza uma requisição ao back-end de acordo com as informações presentes na URL, buscando produtos com base nos parâmetros fornecidos.

Página de detalhes de Produto

• Ao entrar na página, é feita uma requisição ao back-end para obter o produto em destaque, que será exibido na tela, juntamente com outros produtos no carrossel.
• O carrossel na página mostra produtos da mesma categoria do produto em destaque, oferecendo ao usuário opções relacionadas.
• A página simula um valor aleatório de reviews para os produtos e preenche as estrelas de acordo com esse valor, proporcionando uma representação visual da classificação do produto.
• Os cards exibindo os produtos contêm a foto, o preço e botões para adicionar ou diminuir a quantidade do produto.
• Sempre que a quantidade de um produto é alterada, o LocalStorage é atualizado para garantir que as informações do carrinho sejam mantidas durante a navegação.
• Há um botão para a página de checkout.
• Há um botão para retornar a página de produtos.

Página de Checkout/Carrinho

• Ao entrar na página, é realizada uma leitura do LocalStorage para obter os produtos previamente selecionados pelo usuário.
• Os cards exibem os detalhes dos produtos, como nome, preço, valor unitário, sub-total, e contêm botões para adicionar, diminuir a quantidade do produto ou remover o produto do carrinho.
• Sempre que a quantidade de um produto é alterada, o LocalStorage é atualizado para garantir que as informações do carrinho sejam mantidas durante a navegação.
• Há um botão e um formulário para finalizar a compra ou venda, permitindo ao usuário concluir o processo.
• O usuário é notificado com mensagens personalizadas caso ocorra algum erro durante a comunicação com o back-end.
• No caso de o usuário ser um administrador ou vendedor, as notificações de erro são mais abrangentes, exibindo informações adicionais, como a mensagem de erro e o status do back-end. Isso visa facilitar a administração da aplicação pelos administradores e vendedores, fornecendo informações mais detalhadas sobre eventuais problemas.

Página de Vendas ou Compras

• Ao entrar na página, é feita uma requisição ao back-end para obter as informações das compras ou vendas relacionadas ao usuário.
• Os cards exibem o número do pedido, a data, o status da venda/compra e o valor total.
• O status é renderizado com cores diferentes de acordo com o seu valor, permitindo uma fácil visualização do status da transação.
• Ao clicar em um card, o usuário é redirecionado para a página de detalhes da venda/compra, onde é possível visualizar os produtos envolvidos na transação e gerenciar o status da venda.

Página de Detalhes de Vendas/Compras

• Ao entrar na página, é feita uma requisição ao back-end para obter as informações da compra ou venda.
• A página exibe o número do pedido, o vendedor, a data, o valor total, o status da venda/compra e botões para administração do status.
• Além disso, são listados os produtos do pedido, mostrando a quantidade, o valor unitário e o valor total por produto.
• O status é renderizado com cores diferentes, dependendo do seu valor, para facilitar a visualização do status da transação.
• Ao clicar nos botões de administração do status, é feita uma requisição ao back-end para atualizar o status da venda/compra. Se a requisição for bem-sucedida, o status é alterado no front-end.
• Os botões de administração do status são desabilitados caso o valor de mudança requisitado seja igual ao valor atual da venda/compra.
• Há um botão disponível para retornar à página de pedidos, permitindo a navegação de volta à lista de pedidos do usuário.

Página de Gerenciamento de Usuários

🚧 Documentação em construção 🚧

Página de Atualização de Usuários

🚧 Documentação em construção 🚧

BACK END

🚧 Documentação em construção 🚧

Agradecimentos

Agradecemos à Trybe por nos proporcionar esta oportunidade de aprendizado e desenvolvimento de habilidades. Também agradecemos aos instrutores, colegas e mentores que nos apoiaram e orientaram durante o projeto.