wilkensgomes / mks-frontend-challenge

Loja MKS - Desafio Frontend

Este projeto foi desenvolvido para o desafio frontend da MKS, utilizando a API REST de produtos fornecida.

Funcionalidades:

• Exibição da lista de produtos: A página principal exibe a lista completa de produtos, buscando-os dinamicamente da API.
• Carrinho de compras: Permite adicionar produtos ao carrinho, aumentar a quantidade de itens e visualizar o total da compra.
• Shimmer/Skeleton Loading: Implementação de um efeito visual de carregamento enquanto a lista de produtos é carregada da API. Para melhor visualização do Skeleton, foi adicionado um atraso de 2 segundos na renderização dos produtos.
• Responsividade: Design responsivo que se adapta a diferentes tamanhos de tela.

Tecnologias utilizadas:

• Next.js: Framework para desenvolvimento web em React.
• TypeScript: Linguagem de programação que adiciona tipagem estática ao JavaScript.
• React Query: Biblioteca para gerenciamento de estado do lado do cliente para buscar, armazenar em cache e atualizar dados assíncronos.
• Styled-Components: Biblioteca para estilização de componentes React com CSS-in-JS.
• Framer Motion: Biblioteca para animações em React.
• Jest: Framework de testes para JavaScript.
• React Testing Library: Biblioteca para testes de interface do usuário React.

Arquitetura do projeto:

O código segue uma estrutura organizada em pastas:

• components: Contém os componentes reutilizáveis da interface do usuário.
• hooks: Contém os hooks customizados utilizados no projeto.
• lib: Contém funções utilitárias e configurações gerais da aplicação.
• styles: Contém os arquivos de estilo global da aplicação.
• types: Contém as definições de tipos TypeScript para os dados da aplicação.

Instruções de execução:

1. Clone o repositório: git clone https://github.com/wilkensgomes/mks-frontend-challenge
2. Acesse a pasta do projeto: cd ./mks-frontend-challenge
3. Instale as dependências: npm install
4. Inicie a aplicação: npm run dev

Observações:

• A URL da API está definida na variável de ambiente NEXT_PUBLIC_API_URL no arquivo .env.local.
• O projeto foi desenvolvido utilizando boas práticas de código e testes unitários para garantir a qualidade e a manutenibilidade.

Considerações finais:

Este projeto demonstra minhas habilidades em desenvolvimento frontend com as tecnologias mencionadas. Agradeço a oportunidade de participar do processo seletivo e me coloco à disposição para esclarecer qualquer dúvida.