Mais um challenge de Front-End concluído!! Esse foi bem divertido de criar e como terminei antes da hora, resolvi incluir também um painel de gerenciamento da loja para edição dos produtos.

Caso queira apenas dar uma olhada, utilize a página Loja Meteora no Github Pages ou assista a esse vídeo demonstrativo.
Se quiser contribuir, siga as instruções em Como rodar o projeto. Vou ficar feliz com as sugestões!

Status do Projeto: Versão 1.0.1 entregue 🫡

A estrutura do projeto é feita em HTML e CSS, sem a utilização de framework. Diria que da estrutura, as partes mais legais de customizar foram a grade de produtos e o modal "ver mais", que foram bem satisfatórios de olhar quando concluídos. Depois de finalizar o projeto base, resolvi criar também uma página para administração do site, fazendo o CRUD completo.

Utilizando JS e simulando uma API, os produtos exibidos em tela são gerados dinâmicamente, permitindo fácil gerenciamento da loja. Nesse primeiro momento não é utilizado um sistema de login, já que o foco do estudo é apenas nos produtos em si (tanto que o painel ADM pode ser acessado por qualquer usuário a partir da página inicial).

Como disse anteriormente, além da entrega do projeto base, inseri um painel administrativo, onde é possível criar, editar e excluir produtos. Nessa parte de edição e criação, alguns campos tiveram de ser tratados de maneira especial: tamanhos e cores, que precisam ter cada valor lido individualmente; e o preço, que precisa estar no formato correto para exibição.
Para tratar o primeiro ponto, foi preciso "quebrar" o valor lido do formulário e ler os valores separados pela vígula. Já para tratar do segundo, utilizei o jquery-maskmoney do Diego Plentz, assim o valor estará sempre com o "R$" no início.

• Responsividade;
• Exibição dinâmica de produtos;
• Filtro por categoria;
• Botão pesquisar;
• Painel administrativo: criação, edição e exclusão de produtos;
• Cadastro de email: emails válidos são armazenados no db.json.

Depois de clonar o repositório, instale o JSON server usando
npm install json-server
E o browser-sync usando
npm install -g browser-sync
NOTA: se você utilizar a extensão LIVE SERVER no seu VSCode não é necessário intalar o browser-sync

Após isso, é possível rodar nosso db.json pelo JSON server
json-server --watch db.json

E então rodar o projeto utilizando o Browsersync:
browser-sync start --server --file . --host --port 5000 --startPath index.html