- Descrição
- Deploy
- Como rodar o projeto localmente
- Documentação da API
- Aspectos Técnicos
- Como rodar os testes automatizados
- Considerações Finais
A aplicação Fullstack simula um sistema da Cashforce onde é possível o cliente visualizar todas as suas notas fiscais, contendo informações como: número da nota, data de emissão, valor total, status da nota e etc.
https://cashforce-front.up.railway.app/- *Offline por conta das limitações do plano gratuito do Railway.
- Clone o repositório
git clone [email protected]:Brendon-Lopes/fullstack-cashforce.git- Entre na pasta do projeto
cd fullstack-cashforce- Inicie o projeto com o docker-compose
docker-compose up -d- Acesse o app em http://localhost:5173
- Pode demorar alguns minutos para iniciar, pois o docker leva um tempo para baixar as imagens e instalar as dependências.
- Local: http://localhost:3001/api-docs
- Deploy:
https://api-cashforce.up.railway.app/api-docs/- *Offline por conta das limitações do plano gratuito do Railway.
O projeto foi feito utilizando tecnologias do ecossistema JavaScript.
Todo o projeto contém testes unitários e end to end, tanto no frontend quanto no backend.
Todo o código foi feito tendo em mente boas práticas de desenvolvimento, como Clean Code e SOLID, para facilitar a manutenção e organização do projeto.
Os commits foram feitos seguindo o padrão de Conventional Commits.
Foi utilizado o eslint para manter o padrão de código.
O docker e docker-compose foram utilizados para facilitar a configuração do ambiente de desenvolvimento.
O Frontend foi desenvolvido em Vue.js (V3) + TypeScript.
A estilização foi feita com CSS puro.
As integração com a API foi feita utilizando Axios.
Os testes unitários foram feitos utilizando Vitest. E os testes end to end usando Cypress.
Para mais informações sobre como rodar os testes, ver a seção de testes.
O Backend foi feito utilizando Node.js + TypeScript + Express. O banco de dados utilizado foi o MySQL, usando Sequelize (sequelize-typescript) como ORM.
O código foi desenvolvido utilizando um padrão de POO, com o uso de classes e interfaces, seguindo os princípios de SOLID.
Os testes unitários foram feitos utilizando Mocha, Chai e Sinon. E os testes end to end usando Mocha, Chai, Sinon e chai-http.
Foi utilizado também um banco de dados em memória para rodar os testes de forma mais confiável. Utilizar boas práticas do SOLID fez bastante diferença nessa etapa, já que a classe de Repository espera que o banco de dados seja passado em seu construtor, facilitando a troca de banco de dados.
Para mais informações sobre como rodar os testes, ver a seção de testes.
Para rodar os testes unitários do frontend, basta entrar na pasta client e seguir os seguintes passos:
- Instalar as dependências localmente
npm install- Para rodar os testes unitários
npm test- Para rodar os testes end to end. (OBS.: É necessário que o projeto esteja rodando, para que o Cypress consiga acessar a aplicação)
npm run test:e2ePara rodar os testes unitários do backend, basta entrar na pasta server e seguir os seguintes passos:
- Instalar as dependências localmente
npm install- Para rodar os testes unitários
npm test- Para rodar os testes end to end.
npm run test:e2eApesar de ter experiência desenvolvendo algumas aplicações Fullstack, esse foi o meu primeiro contato com Vue.js (usava React.js), foi uma ótima oportunidade de aprendizado e me ajudou a conhecer melhor o framework, que inclusive gostei bastante de usar! Apesar de alguns pontos que necessitaram de uma pequena curva de aprendizado (como especifidades do framework, e o fato da versão 3 ser relativamente nova), foi uma experiência de desenvolvimento bem fluida, principalmente por conta da documentação bem completa do Vue.
O desenvolvimento do Backend foi bem tranquilo, já que é o que eu mais pratico e mais gosto no geral. Me desafiei a fazer os testes com um banco de dados em memória ao invés de apenas mockar os dados como estava acostumado. Eu já tinha utilizado Sequelize em projetos com JS puro, mas nunca de uma forma muito fluida em TypeScript, foi uma ótima oportunidade de conhecer a biblioteca sequelize-typescript (indicada na própria documentação do sequelize), ajudou bastante durante o desenvolvimento.
Se eu tivesse mais tempo pra esse desafio, gostaria de estudar melhor como o Vue funciona por baixo dos panos e as suas outras funcionalidades básicas (rotas, gerenciamento de estado, etc). Também faria um CSS mais organizado e quem sabe utilizar algum framework de CSS (como o tailwindcss, que gosto bastante). Também deixaria os testes muito mais completos e cobrindo mais cenários.
Apesar de não ser proposto no desafio, fiz o deploy da aplicação completa no Railway. Foi um desafio bem interessante, principalmente por precisar adaptar o código pra ambientes diferentes (desenvolvimento e produção). O docker e o docker-compose ajudaram demais nesse quesito!
Por fim, gostaria de agradecer a oportunidade de participar desse processo seletivo, foi uma experiência muito boa e aprendi bastante! Espero que gostem do resultado final!