Uma loja completa de eletrônicos sonoros e fones de ouvido.
O desafio é construir este site de comércio eletrônico de várias páginas e torná-lo o mais próximo possível do design.
Você pode usar qualquer ferramenta que desejar para ajudá-lo a completar o desafio. Então, se você tem algo que gostaria de praticar, sinta-se à vontade para tentar.
Se você optar por usar uma abordagem pesada em JS, forneceremos um data.jsonarquivo local para os produtos. Se você quiser ir além, sinta-se à vontade para construí-lo como um aplicativo full-stack ou usar um CMS headless!
Seus usuários devem ser capazes de:
- Adicionar/Remover produtos do carrinho
- Editar as quantidades dos produtos no carrinho
- Preencher todos os campos na finalização da compra
- Receba validações de formulário se campos forem perdidos ou incorretos durante a finalização da compra
- Veja o layout ideal para o aplicativo dependendo do tamanho da tela do dispositivo-
- Veja os estados de foco para todos os elementos interativos na página
Link do desafio: Frontend Mentor
- Temas de cores propostos pelo desafio
- Preview em tempo real
- Modo tela cheia
- Multiplataforma
- Design responsivo
- Páginas e menus interativos
- Carrinho funcional
Front-end: NextJS, TailwindCSS, Daisy UI, Typescript
Back-end: Supabase
Enfrentei diversos desafios durante o desenvolvimento, recebi um figma com várias telas, tamanhos diferentes, cores e estados de foco dos elementos.
No início do projeto precisei pensar como organizar o fluxo da página, para melhor experiência de navegação, e como organizar todos os dados (imagens e textos) dentro de um banco de dados de forma estruturada, testei de primeira o firebase, porém ao fazer deploy não obtive sucesso e então procurei por outra solução e encontrei o supabase, nele foi possível estruturar toda a lógica de armazenamento dos dados e comunicação com o frontend.
