Este projeto é apenas um teste prático de frontend sem foco no design, apenas em funcionalidades. Pode ser acessado pelo link: https://stoic-meitner-be6279.netlify.app/
Antes de começar, verifique se você atendeu aos seguintes requisitos:
- Você precisa ter instalado
<NodeJs / NPM>para rodar este projeto
Para instalar o MagaNets, siga estas etapas:
1- Clone este repositório:
git clone https://github.com/igoohd/luizalabs-frontend-test.git
2- Instale as dependências:
npm install
Para usar o MagaNets, siga estas etapas:
1- Inicie o ambiente de desenvolvimento com o script abaixo:
npm run serve
2- Será fornecido um endereço localhost para testar a aplicação
3- Para rodar os testes você deve digitar em seu terminal:
npm run test:unit:watch
ou
npm run test:unit:watch:coverage
Caso rode o script com cobertura de testes, você terá acesso ao relatório na pasta: coverage/lcov-report/index.html
Este projeto teve uso de algumas tecnologias importantes para o desenvolvimento front-end, muitas delas poderiam não ser utilizadas em um projeto simples como esse, porém, preferi utilizar ao máximo para mostrar meu conhecimento com elas. Abaixo explico os motivos de ter utilizado e documentações para conferência:
1- VueJS (https://vuejs.org/) Framework Javascript utilizado para criação de interfaces, foi utilizado apenas para demonstração do meu conhecimento com a tecnologia, tentei utilizar ao máximo tudo o que ele pode oferecer como Vuex, Vue Router, Vue test utils e etc. A versão 2 foi utilizada por ser a versão mais popular, utilizada e estável até o momento deste teste.
2- Sass (https://sass-lang.com/) A extensão de linguagem CSS Sass foi utilizada para dar "super-poderes" ao CSS comum. Evitar reescrita de código, tornar a estilização mais legível e bem estruturada.
3- Jest (https://jestjs.io/)
Framework de testes JS utilizado para testar a aplicação em si, e evitar possíveis erros em alterações de código. Esse projeto teve 85% de cobertura de testes como mostra a imagem abaixo:
4- VueTestUtils (https://vue-test-utils.vuejs.org/) Biblioteca de testes unitários para VueJs, responsável por ajudar no desenvolvimento de testes com o framework.
5- Eslint Ferramenta responsável por encontrar e reportar problemas no código JavaScript, foi utilizado para evitar bugs e manter o código consistente. Além de ter integração com o Vue, Prettier e diversas outras tecnologias, criando regras e padrões de códigos que podem ser corrigidos automaticamente.
1- RSCSS (https://rscss.io/) Conjunto de regras para escrita e estruturação do CSS, utilizado para facilitar a manutenção da estilização do projeto, todas classes, representam um componente, elemento ou variante, dando sentido à estilização. Por ser um projeto pequeno preferi utilizá-lo ao invés do BEM(http://getbem.com/introduction/) pois é mais simples e prático de se utilizar.
2- Conventional Commits (https://www.conventionalcommits.org/en/v1.0.0/) Convenção de commits utilizada para manter um bom tracking de steps do projeto, todas as branchs foram criadas a partir da Master, isolando cada feature do projeto, além de todos commits seguirem as regras da convenção organizadas em feature, fix, refactor, entre outras.
3- Responsividade O layout mobile começa a ser aplicado à partir de 800px de largura nos dispositivos, como não temos o layout no Figma ou outro software, peguei esta largura como base por acreditar encaixar melhor para o layout fornecido pela LuizaLabs.