fehsouza / estante-virtual

Projeto de um e-commerce de livros | Estudo de rotas com React Router, animações e performance

Estante-Virtual

Contexto

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.

 

Tecnologias usadas

Front-end:

Desenvolvido usando: HTML5, Styled Components, Polished, React, React Router Dom, re-state, Typescript, Framer Motion, SWR, Axios, eslint, prettier

 

Instalando as dependências

Front-end:

yarn install

 

Executando a aplicação

Para rodar o Front-end:

yarn start

 

Link Netlify

https://estante-virtual.netlify.app/