Version 1.0.0
Desafio técnico realizado para a agência 2B.
- Optei por construir o projeto com react, utilizando Vite e Typescript. O Vite oferece um tempo de execução muito rápido, o que facilita o desenvolvimento. Igualmente o typescript, que além disso oferece mais segurança e diminui a possibilidade de erros em runtime.
- Apesar do desafio frontend, se tratando de uma agência que trabalha prioritariamente com VTEX, escolhi criar um projeto 100% funcional. Sendo assim utilizei das apis públicas da VTEX do site Champion (espero que não se importem, hehe) para garantir o funcionamento do site. O site utilize um orderform e dados reais, sendo inclusive possível finalizar a compra no site da Champion ao clicar no botão 'Finalizar compra' do minicart.
- Para gerenciamento de estado global optei por usar a biblioteca global Zustand, pois se tratando de um projeto com prazo curto ela oferece mais facilidade, visto que trata o estado como um hook genérico.
- Alguns funcionamentos exigiram páginas ou componentes não presentes no layout do figma, nesse caso tentei apenas seguir o tema geral do site. (Exemplo: página 404.)
- Para evitar erros de CORS tive que utilizar um proxy público. Por ser público ele 'dorme' se ficar muito tempo inativo, sendo assim as prateleiras podem demorar um pouco a carregar no primeiro acesso. Após isso funcionará normalmente.
- Na VTEX um produto com estoque não pode ser adicionado em quantidade maior que o estoque disponível. Sendo assim, é possível que um produto não tenha sua quantidade aumentada mesmo o adicionando duas vezes. Não é um erro, apenas significa que aquele produto tem apenas uma unidade em estoque.
Execute os comandos a seguir e você terá uma versão local do projeto em execução.
$ git clone https://github.com/jonathasgouv/2bstore
$ cd 2bstore
$ yarn$ yarn dev😀