Demo - direct-data-gym.vercel.app
O projeto consiste em uma aplicação web simulando um formulário de cadastro de usuários em aulas de boxe, adicionando numa api passada previamente e consumindo os dados para exibição em uma tabela.
Pensei em dividir a aplicação em 3 partes principais:
- Formulário de cadastro
- Visualização dos dados
- Ajustes gerais que não eram bloqueantes para o produto final, mas que deviam ser feitos, como preenchimento campos usando o cep
Com isso em mente, criei um mockup de baixíssima fidelidade, para não gastar muito tempo com o design e focar na implementação. O design serviria muito mais como um guia de onde iria cada coisa.
Link para o mockup: Figma
O formulário foi feito pensando numa melhor usabilidade, dividindo em 3 partes e usando etapas (Sobre você, Endereço e Revisão). Durante o fluxo, os dados são salvos na session storage, dando possibilidade de atualizar a página ou voltar para a etapa anterior sem perder os dados.
Os dados só são enviados para a api no final do fluxo, na etapa de revisão, onde o usuário pode rever os dados e confirmar.
Todos os campos tem validação de com o Yup, e o formulário só pode ser enviado se todos os campos passarem.
- Validações adicionadas:
- CEP (formato)
- CPF (formato e validação se o cpf é válido)
- Telefone (formato)
- Email (formato)
- Todos os campos tem um tamanho máximo de caracteres.
O cep tem uma integração com a api do ViaCEP, que preenche os campos de endereço automaticamente.
A tabela está na rota /all-students (link) e é carregada ao entrar na página.
Na tabela, temos a possibilidade de buscar os valores de cada coluna, ordenar de forma crescente ou decrescente ao clicar no header, e editar os dados de cada célula clicando diretamente em cada.
Demo:
TableDemo.mp4
Algumas coisas considerei como não bloqueantes, mas que deviam ser feitas caso eu conseguisse avançar bem sem travamentos:
- Integração com a api do ViaCEP para preencher os campos de endereço automaticamente.
- Estilização personalizada do componente de etapas
- A Home page (tive dificuldade com o design)
- Formato da data nos campos de data de nascimento (o default do chakra era em mm/dd/yyyy e eles não possuem um datepicker)
Apesar de serem consideradas como não bloqueantes, todas elas foram concluídas. Sem elas, a UX da aplicação seria bem prejudicada.
Unitários:
- Criei testes unitários usando vitest e testing library (muito boa para testar a acessibilidade dos componentes), para os componentes mais importantes da aplicação, como o formulário e a tabela.
End to end:
- Já para os testes end to end, usei o cypress e também a testing library, para testar os principais fluxos da aplicação, como o cadastro com um responsável e o cadastro sem um responsável.
Além disso, todas as imagens adicionadas tinham o formato webp ou svg, para melhor carregamento.
- React with Typescript
- Chakra UI
- Axios
- Cypress
- Vitest
- Testing Library
- Formik with Yup for form handling
- AgReactTable
- Clone o repositório
- Instale as dependências
yarn-
Crie o arquivo .env copiando o conteúdo do arquivo .env.example e substitua as variáveis de ambiente
-
Rode o projeto
yarn deve abra o navegador na url mostrada no terminal.
yarn vitestyarn cypress run