Final Challenge VtexIO

Este Repositório hospeda os seguintes itens:

• Loja Vtex: Usa da estratégia de compre junto para aumentar o ticket médio da loja, na home se encontra o componente com as maiores vendas da loja sendo oferecidas ao cliente, e na página do produto se encontra o componente que mostra ao cliente as melhores combinações para aquele produto.
• Api Combinations: API Hospedada na aws com Ec2, Route53 e com dominio próprio, essa api acessa um documento no MasterData da VTEX e armazena os dados de combinações de compras, e dados das melhores combinacoes (com maior quantidade de compras) com ela pode-se consultar as melhores combinacoes de um determinado produto, e, com ajuda da configuração do OrderHook, creditar as novas combinacoes de acordo com as novas compras que são inseridas.
• Vtex ReactApp compre-junto-component: App em VtexIO que mostra na página do produto as melhores combinações de compra para aquele produto. Este app faz uma consulta na Combinations API e retorna para o cliente as melhores opções de compras em conjunto para serem adicionadas no carrinho de uma vez só.
• Vtex ReactApp compre-junto-component-home: Outro VtexIO App que mostra ao cliente as melhores combinações de vendas de toda a loja, este componente se encontra na Home e faz a busca no backend da lista de combinações campeãs de venda.
• Vtex-Admin-Block admin-combinations: Componente Admin Vtex que mostrra ao lojista as principais combinações da loja e a quantidade de vendas que cada combinação teve.

Team

• Jean Fraga
• Hamilton Lopes
• Gustavo Sobreiro
• Hamiceis Pereira
• Beatriz Cunha Guimarães
• Derek Santos
• Marco Antonio
• Renato Tadeu
• Henrique Scherer
• Fabio Rogerio

Organização

• Foi feito a divisão das atividades em pequenas atividades utilizando a ferramenta Trello o nosso quadro de trabalho está disponível para visualização neste link.

Fluxograma

O fluxograma foi desenvolvido para auxiliar durante todo o projeto e para organizar a separação de tarefas.

Figma

A loja foi criada e estilizada no Figma como modelo a ser seguido durante a implementação:

O figma da loja pode ser acessado através deste link.

Vtex-Store

Como rodar este projeto ?

• git clone com a url deste repositório
• Assegure-se de ter seu ambiente configurado e o Vtex-CLI instalado e configurado
  • ambiente
  • Vtex-cli
• Dentro da pasta travellog-group1-store, execute vtex login <yourAccount>
• Em seguida para criar um workspace execute vtex use <dev>
• Execute vtex setup
• Execute npm install
• Execute vtex link
• Log in to your store yourdomain.vtex.com

Principais Componentes

"travellog.compre-junto-component-home": "0.x",

"travellog.compre-junto-component": "0.x",

"travellog.admin-combinations": "0.x"

Rotas importantes

• https://hccombinationsapi.tk/combinations-api/v1/store-top-combinations - Acessa as principais combinações da loja
• https://hccombinationsapi.tk/combinations-api/v1/combinations-by-id/:productId - Acessa pontuação do usuário por id

Screenshots

Detalhes do Projeto

Documentação-Swagger

Combinations API:

Antes de acessar a documentação online certifique-se de que as instruções de Como rodar o projeto foram executadas.

A documentação da API pode ser acessada através deste link.

Consultas por GraphQL

Foi utilizado GraphQL para consultas internas no catalogo Vtex para ter maior segurança e performance:

Admin - Combinations

O Lojista poderá ver e entender as combinações que estão aparecendo em sua loja no mesmo local onde configura outras informações:

🚀 Melhorias

As seguintes melhorias poderiam ser feitas para aprimoramento do projeto

Principais Pontos de Melhoria:

• Melhorias no layout em geral, front-end de loja
• Utilizar mais ferramentas de performance
• Disponibilizar opções para customização de combinações
• Ranking, opnião do cliente sobre aquela combinação

Tecnologias utilizadas

Principais tecnologias utilizadas no código

💻 Node.js

🛠 JavaScript

🛠 TypeScript

🛠 ReactJS

💻 AWS

💻 GraphQL

Vtex Techs|Apis

🛠 VtexIO

🛠 VtexContext

🗄️ Vtex-MasterData

⚓Vtex-Hook