| 🪧 Vitrine.Dev | Minha Vitrine Dev |
|---|---|
| ✨ Nome | Meteora |
| 🏷️ Tecnologias |    |
| 🚀 URL | Projeto |
| 🔥 Desafio | Conheça o Challenge Alura |
Meteora é uma empresa do comércio eletrônico de roupas atemporais, casuais e sem gênero. Ela acredita que a moda é muito mais do que apenas tendências passageiras e oferece peças versáteis que se adaptam a qualquer estilo e ocasião.
A empresa tem por objetivo se tornar referência no mercado, atraindo mais clientes e impulsionando suas vendas, buscando alcançar um novo patamar e consolidando-se como uma empresa mais digital.
Para isso, eles solicitaram nossa ajuda como desenvolvedores para criar um site de um e-commerce, que proporcione uma experiência de compra incrível para seus clientes.
- Página inicial que contenha um buscador de produtos oferecidos pela empresa;✅
- Banner/carrossel que contenha informações sobre a coleção do momento;✅
- Galeria com as categorias dos produtos disponíveis na loja;✅
- Galeria com as informações dos produtos, como: imagem, nome do produto, descrição e link que leva até a página de “Saiba mais sobre o produto”.✅
- Uma modal que contenha a imagem, o nome, a descrição, o preço, as variações do produto e a opção de adicionar na sacola;✅
- Modal após cadastrar seu email;✅
- Seção para divulgar as facilidades que a loja proporciona para realizar as compras;✅
- Seção para cadastrar na newsletter e receber novidades;✅
- Rodapé com informação do site;✅
- Funcionalidades para adicionar e remover itens à sacola (usando LocalStorage);🚧EM BREVE🚧
- Email cadastrado salvo no localStorage✅
Comecei estruturando o código html de cada sessão da página, buscando uma divisão por sections e criando a estrutura de cada parte do site.
Depois nomeei as classes e fiz a estilização da página no css buscando classes reutilizáveis a fim de melhorar o código e evitar classes repetidas.
Inicialmente os produtos foram criados via html um a um, porém com o avançar do desenvolvimento fiz um arquivo json com a lista de produtos e utilizei javascript para criar esses produtos de forma dinâmica.
O carousel do banner foi feito usando a biblioteca SwiperJS e adicionando os banners de acordo com o tamanho de tela.
Para a criação dos modais de newsletter e de produtos tive que aprender como fazer isso no html5 e descobri a facilidade da tag dialog que já possibilita a criação de modais de forma mais prática, só tive que captar a ação de clique no botão e utilizando o atributo .showModal consegui fazer o efeito do modal aparecer e sumir utilizando javascript.
Juntamente com isso fiz com que o email cadastrado ficasse salvo no localStorage para uso futuro.
Por fim fiz o menu hamburguer e a responsividade da página.
A parte mais complicada foi a criação do modal e fazer com que ele funcionasse, porém com uma ajuda de outras pessoas do discord da Alura e um pouco de pesquisa na documentação consegui entender que tag usar e como criar o JS para tal.