Alura Challenge Front End 7

Repositório para guardar o código do site da Meteora, envolvida no Challenge Front End 7 da Alura de acordo com este wireframe do Figma.

🗈 Detalhes do projeto

O objetivo do desafio é criar o front end do site de comércio de roupas Meteora. Escolhi aproveitar a oportunidade para reaprender o NextJs em sua última versão.

⬆️Topo⬆️

📀 Para rodar o projeto

• Clonar o repositório;
• Entrar na pasta meteora com o terminal com o comando cd .\meteora\;
• Rodar o comando npm install;
• Rodar o projeto next com o comando npm run dev;

⬆️Topo⬆️

🔗 Links

• Figma
• Trello - Semana 1
• Trello - Semana 2
• Trello - Semanas 3 e 4
• Deploy

⬆️Topo⬆️

🛠️ Problemas Conhecidos

• Existe algum espaçamento errado no Carrosel com o Swiper que eu ainda não consegui encontrar onde está. (Não resolvido ao usar className: w-full no componente <Image/> no carrossel) (Resolvido ao usar className: w-full em todos os componentes de <section>) ✅
• O componente CarregarProdutos.tsx está rodando em loop quando o contexto de Pesquisa é alterado. (Resolvido com <Suspense>) ✅
• Falta encontrar um meio de desativar o estado ativo nos botôes das categorias quando se clica em outra categoria. ✅
  • Consegui retirar as classes usando manipulação do dom com JS puro, mas agora por algum motivo nem sempre quando se clica no botão da categoria, o clique é efetivado. ❌
  • Talvez o problema seja que o app esteja lendo o estado ativo (um booleano) de cada botão, então tem mais de um botão "ativo" ao mesmo tempo. Tentar alterar o estado em um componente de nível superior e/ou com valor diferente de booleano. ❌
  • Foi necessário usar um novo Context para a categoria ativa. ✅
• Um erro de renderização está acontecendo, porque na <ListaProdutos> a propriedade srcSet/src está diferente no servidor e no cliente.
  • revalidate não funcionou. ❌
  • suppressHydrationWarning={true} não funcionou. ❌
  • O problema parece ser com o uso da tabela random_produtos do supabase, especificamente quando uso a função pesquisaGeral(). Este tinha sido o artifício encontrado para criar aleatoriedade na apresentação dos produtos. Estranhamente, porém, o mesmo não parece ocorrer com as outras funções de pesquisa. Vou fazer mais alguns testes pra ver se é isso mesmo.

⬆️Topo⬆️

👩‍🏫 Recomendações Code Review

Em 06/07/2023, foi feita uma live de revisão de código pelos instrutores da Alura, os pontos abaixo foram os indicados para melhorar neste projeto:

• Padronizar o uso da lingua no código; ✅
• Colocar um backdrop nas modais; ✅
• Separar o código em mais componentes, especialmente com relação aos tags verbosos do Tailwind; ✅
• Tag <p> apenas para textos com duas linhas ou mais, caso contrário usar <span>; ✅
• Conferir a semântica usando IA (Chat GPT); ✅ (Veja Aqui)
• Usar tag <nav> no header; ✅
• Conferir performance no lighthouse do Chrome;
• Nas modais de produtos, alterar os radio buttons para que a cor de fundo não confunda o usuário (accent-color); ✅

⬆️Topo⬆️

🤖 Recomendações do ChatGPT

Conforme recomendado pelos instrutores, pedi ao ChatGPT que revisasse a semântica do meu código (o HTML final gerado) e estas foram as recomendações da IA:

• Usar tags semânticas; ✅
• Usar atributo alt nas imagens. (Já exigido pelo componente <Image> do next); ✅
• Usar Listas para navegação; ✅
• Adicionar rótulos aos formulários; ✅
• Legibilidade do Código; ✅
• Otimizar Imagens. ✅

⬆️Topo⬆️