Desenvolver as telas ao lado seguindo as melhores práticas de desenvolvimento de software. Avaliaremos como você trabalha a construção dos componentes visando reutilização e performance, extrando o máximo do React.
- Catálogo de deputados com paginação
- Filtragem deputados por nome, partido e uf
- Quantidade de deputados por pagina
- Página detalhada do deputado
- Application with Vite:
npm install
npm run dev
- Test with Vitest:
npm run test
- Coverage with Vitest:
npm run coverage
$env:NODE_OPTIONS="--openssl-legacy-provider"
you need to run the bash above if you had using node version > 19 at powershell
npm run storybook
- e2e with Cypress:
npm run cypress
- Código deve estar em Typescript
- Teste unitário (Jest) e Teste E2E (Cypress)
- Utilizar o use-context-selector para lidar com as properties
- Utilizar o Storybook para documentar os componentes
- Utilizar ESlint para análise de código estático
- Utilizar o TanStackQuery para as chamadas de API
- Seguir o styleguide a baixo priorizando a criação de temas no MUI
- Seguir o protótipo do Figma
- https://dadosabertos.camara.leg.br/swagger/api.html
- Listagem de deputados --> /deputados
- Dados do deputado --> /deputados/:id
- https://blog.openreplay.com/react-architecture-patterns-for-your-projects
- https://andela.com/insights/structuring-your-react-application-atomic-design-principles/
- https://www.npmjs.com/package/use-context-selector
- https://tanstack.com/query/v4/docs/react/overview
- https://mui.com/material-ui/customization/theming/
Made with ❤️ by Enzo Glauber