Um projeto mais simples, com apenas uma página e utilizando dados mocados, porém foca em funcionalidades básicas de um ecomerce, como os filtros de busca, adição e remoção de itens no carrinho e é claro, a estética de uma página de vendas de produtos estilizados, no caso fazendo referência a pagina da Nerd Universe.
Este trabalho foi realizado durante o bootcamp da Labenu, e contou com a participação dos meus colegas:
Alguns meses depois de ter concluádo este bootcamp, realizei algumas revisões no código, acrescentei estilizações e efeitos aos elementos, também modifiquei as estruturas das pastas e arquivos para padronizinar melhor. Nesta nova versão a página está responsiva, ajustada para grandes telas e pequenas, como tablets e celulares.
Sei que comentários dentro do código podem atrapalhar a performance, mas este projeto é pequeno por isso não há tanta perda, decidi manter alguns comentários por questões didaticas, assim quem estiver iniciando pode ter mais clareza em enterpretar certas funções do código.
- Card de produto tem animações ao passar o mouse neles, tanto nas estampas quanto no botão.
- Ao clicar na imagem dos cards, a imagem irá se expandir na tela para melhor visualização.
- O botão de adicionar item faz acrecentar o produto no carrinho de compras e ao mesmo tempo abre a aba do carrinho para mostrar os itens selecionados.
- O carrinho de compras fica oculto mas surge se o ícone de carrinho no header for clicado.
- Dentro do carrinho podemos ver os itens selecionados, a quantia de cada um e o valor total de compra.
- É possível remover os itens do carrinho e assim o valor total é recalculado.
- Os filtros de busca por valor e de pesquisa estão todos funcionando, retornando os itens correspondentes.
- Os itens postos no carrinho ficam salvos, mesmo atualizando a pagina eles se mantem no carrinho até serem retirados.
- As opções de login e criar conta no header não tem funcionalidade, são apenas para ilustrar uma possível adição em um projeto mais robusto.
Esta é a versão feita durante o bootcamp.
https://bite-sized-low.surge.sh
Esta é a versão mais recente.
https://projeto-lab-universe.vercel.app
Estas foram algumas das técnologias utilizadas no projeto, caso precise de referências ou mais detalhes na documentação.
- Reactjs - O framework web usado.
- Javascript - Linguagem escolhida para construir esta aplicação.
- Styled Components - Para estilização do nosso Front.
Celular - Dimensões de um iPhone 12 Pro
- Conte a outras pessoas sobre este projeto 📢;
- Dê um presente para alguem especial 🎁;
- Vista-se com conforto 👕;
- Beba água 💧.
⌨️ com ❤️ por Matheus Souza 😊