Este projeto trata-se de um e-commerce de estudo, desenvolvido para desktop, trazendo todo o fluxo principal de compra encontrado em um e-commerce: home, navegação por departamentos, exibição de página de produto, processo de compra e finalização de pedido.
Foi desenvolvido a partir do intuito inicial de aprender sobre rotas com React Router Dom, utilizando a temática de livros, que é um assunto que eu gosto, e encima do que eu trabalho, que é com e-commerce.
Proporcionou ainda, além do estudo de rotas, todo um estudo sobre animações, desde transições de uma página para outra, até a montagem de um carrossel sem o uso de ferramentas externas, apenas com as animações do Framer Motion.
Além disto, contribuiu com o entendimento do uso de estados globais, e as transições de dados por meio dos estados e das rotas criadas.
Foi realizado também um estudo de acessibilidade e SEO encima desse desenvolvimento, afim de alcançar bons índices na análise do PageSpeed nessas duas categorias. Toda a implementação foi realizada visando uma boa performance de navegação, onde foram alcançados índices acima de 92 pontos em todas as páginas.
Front-end:
Desenvolvido usando: HTML5, Styled Components, Polished, React, React Router Dom, re-state, Typescript, Framer Motion, SWR, Axios, eslint, prettier
Front-end:
yarn install
Para rodar o Front-end:
yarn start
A API key da Google Books e a baseUrl são gerenciadas pelo BFF (Backend For Frontend). O front-end apenas precisa apontar para a URL do BFF.
Crie um arquivo .env na raiz do projeto com:
REACT_APP_BASE_URL=http://localhost:3333No Netlify, configure a mesma variável passando o endereço da hospedagem do BFF em:
Site settings > Environment variables