Develop the screens on the side following the best software development practices. We will evaluate how you work on building components aiming for reuse and performance, extracting the most out of React.
- Deputies catalog with pagination
- Filtering deputies by name, party, and state
- Number of deputies per page
- Detailed deputy page
- 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 are using node version > 19 in PowerShell
npm run storybook
- e2e with Cypress:
npm run cypress
- Code must be in Typescript
- Unit testing (Jest) and E2E testing (Cypress)
- Use use-context-selector to handle properties
- Use Storybook to document components
- Use ESlint for static code analysis
- Use TanStackQuery for API calls
- Follow the style guide below prioritizing theme creation in MUI
- Follow the Figma prototype
- https://dadosabertos.camara.leg.br/swagger/api.html
- Deputies listing --> /deputados
- Deputy data --> /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