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.
- 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.
- Site online: https://m3-com-react-e-typescript.vercel.app/
- Versão do projeto feita com HTML, CSS e JavaScript: https://github.com/MarlonPassos-git/Desenvolvedor-M3
- Versão do projeto feita com ReactJS, TypeScript e StyledComponents: https://github.com/MarlonPassos-git/m3-com-react-e-typescript
-
Versão com React JS:
-
Versão Vanilla:
- 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
- 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.
- Nome: Marlon Felipe dos Passos
- E-mail: marlonfelipepassv2@gmail.com
- 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.