Veja o resultado final em:
Pharma Inc. é resultado de um desafio frontend da Coodesh, plataforma de avaliação e recrutamento de desenvolvedores.
O objetivo do desafio é completar uma série de requisitos dentro do contexto de um case, utilizando um framework entre React.js, Vue.js e Angular 8+.
Case:
A empresa Pharma Inc, está trabalhando em um projeto em colaboração com sua base de clientes para facilitar a gestão e visualização da informação dos seus pacientes de maneira simples e objetiva em um Dashboard onde podem listar, filtrar e expandir os dados disponíveis. O seu objetivo nesse projeto, é trabalhar no desenvolvimento do Front end que consumirá a API da empresa Pharma Inc seguindo os requisitos propostos neste desafio.
Veja mais detalhes sobre o desafio.
Em relação ao item 4 da lista de diferenciais do desafio: "Escrever Unit Tests ou E2E Test na Lista de Pacientes. Escolher a melhor abordagem e biblioteca". Optei por uma testagem simples a nível unitário para garantir que a renderização dos componentes seria correta com os props recebidos. Baseado em meus estudos, decidi seguir a ideia de criar testes focados na experiência do usuário, ou seja, sem testar as implementações técnicas e sim o que o usuário vai ver. As implementações devem ter flexibilidade para serem alteradas sem a necessidade dos testes também serem alterados a cada mudança. Para complementar, decidi realizar os testes de integração junto com os E2E. Como é um aplicativo simples, não seria tão custoso do ponto de vista de recursos, tanto que toda a bateria de testes E2E dura cerca de 7 segundos. Como foi minha primeira vez utilizando o Nuxt e o Cypress, foi um pouco complicada a configuração junto com o Typescript, mas em compensação, tanto a escrita dos testes quanto o funcionamento visual da ferramenta são bem legais.
Lendo a documentação do Vue para o Composition API, vi um exemplo onde a lógica do componente era extraída para um arquivo próprio. Tornando essa lógica reutilizável, deixando o componente mais organizado e enxuto, além de resultar em uma maior separação de responsabilidades. Utilizei esse recurso na lista de pacientes, na funcionalidade de busca e filtragem, e no modal. Achei muito positivo, sempre me anima a possibilidade de escrever código mais organizado e elegante. Com certeza irei utilizar em meus projetos daqui em diante.
Esse projeto utiliza:
- Vue.js
- Nuxt
- Random User Generator API
- ESLint
- Windi CSS
- Typescript
- Jest
- Vue Test Utils
- Cypress
- Mobile First
- Netlify
- GitHub Actions
- VS Code
# instalar dependências
$ yarn install
# servir localmente com hot reload em localhost:3000
$ yarn dev
# build para produção e iniciar do servidor
$ yarn build
$ yarn start
# gerar projeto estático
$ yarn generate
# build do container
docker build -t pharmainc .
# rodar container
docker run -it -p 5000:5000 pharmainc
Esse projeto usa a licença MIT.