/m3-com-react-e-typescript

Primary LanguageTypeScript

Desafio M3

Preview


Acessibilidade

O desafio | Links | Ferramentas usadas | Coisa para se fazer | Recursos

🌋 O desafio

Esta é a solução do desafio proposto pela Agência Digital M3.

O objetivo deste desafio foi para avaliar os conhecimentos fundamentais de front-end, por isto foi pedido que não fosse usado nenhum framework, ou se fosse usar algo, que usasse ReactJS.

  • HTML5 e CSS3;
  • Requisição a API para obter os produtos;
  • Funcionalidade: filtrar produtos por cor, tamanho e preço;
  • Funcionalidade: adicionar produto ao carrinho;
  • Funcionalidade: carregar mais produtos;
  • Não utilizar Bootstrap, Foundation CSS, Semantic UI ou semelhantes;
  • Responsividade.

🔎 Observações

  • Como foi deixado bem explícito que este desafio era para os validar os conhecimentos fundamentais, porém, eu vi que a M3 usa ferramentas como o ReactJS e TypeScript. Então decidi fazer duas versões deste mesmo projeto, uma usando HTML, CSS e JavaScript e outra versão usando ReactJS, TypeScript e CSSinJS.
  • No relatório de acessibilidade do lighthouse ficou mostrando que ocorreu um erro de acessibilidade com o botão de "Mostrar mais itens", devido as suas cores, porém, como tentei deixar o mais próximo possivel do Figma deixei este pequeno detalhe.
  • Em vez de colocar as imagens otimizadas localmente nos arquivos do projeto, otimizei as mesmas para .webp (-95% do tamanho) e as coloquei em um serviço de hospedagem de imagens.

🔗 Links

👷‍♂️ Ferramentas utilizadas

  • Versão com React JS:

  • TypeScript;

  • Styled-Components;

  • ReactJS.

  • Versão Vanilla:

  • HTML5;

  • CSS3;

  • JavaScript;

  • Gulp;

📝 Como rodar o projeto localmente?

  • Verção com React JS:
  git clone https://github.com/MarlonPassos-git/m3-com-react-e-typescript

  cd m3-com-react-e-typescript

  npm install

  npm run start
  • Verção Vanilla:
  git clone https://github.com/MarlonPassos-git/Desenvolvedor-M3

  cd Desenvolvedor-M3

  npm install

  npm run dev

⚙ Funcionalidades

  • Criar o projeto sem usar nenhuma biblioteca de componentes pré-prontos;
  • Criar versão com HTML, CSS e JavaScript;
  • Pegar os dados da API e renderizar na tela;
  • Filtras os produtos por:
    • Cor;
    • Tamannho;
    • Preço.
  • Reorganizar a ordem dos produtos:
    • Mais recente;
    • Maior preço;
    • Menor preço.
  • Otimizar as imagens;
  • Adicionar produtos no carrinho quando clicar em comprar;
  • Formulário ficar sincronizado com a versão desktop e mobile;
  • O botão de mostrar mais itens soma quando não tem mais nada de produtos;
  • Efeito de hover em todos os elementos clicáveis;
  • Efeito de foco em todos os elementos usando o TAB;
  • Colocar o site no ar;
  • Colocar a API no ar.

👨‍🎓 Autor

🚧 Problemas para corrigir

  • Arrumar o controle por TABs da página (ordem e mostrar elementos selecionados);
  • Tem que adicionar o restante dos textos com o Cypress;
  • Adicionar um Lasy Load nos elementos do menu para evitar download de código desnecessário em resoluções específicas;
  • Adicionar MEMO nos componentes para evitar renderização desnecessária;
  • Adicionar uma mensagem para o usuário quando não tiver nenhum produto nos filtros que ele selecionou.

    • 📚 Recursos

    • Para alguns elementos que eu queria um tamanho diferente em várias telas usei uma bibliote que estou desenvolvendo, denominada progressive-size, que tem origem neste artigo. Sendo assim, é por isto que em alguns elementos o tamanho não está em PX, mas em função CSS usando clamp, min, max e calc.
    • Documentação do ReactJS.