Olá! Nessa documentação você vai saber mais sobre esse aplicativo, como rodar, o que usa e etc.
O aplicativo foi construído principalmente com React e TypeScript utilizando Function Components com Hooks e o Vite para o build do projeto. A lib de UI utilizada é o Ant Design, acredito que ele trabalha muito bem com o React e não provê somente estilos mas também uma maneira muito simples de trabalhar com os estados na aplicação. Axios para todas as requisições. Styled Components para estilização. Jest, React Testing Library e Cypress para os testes.
Nesse teste decidi utilizar uma arquitetura inspirada no MVC (Model, View, Controller). Certo, mas por quê? Mesmo no front-end é necessário ter um padrão de arquitetura a ser seguido, para que as responsabilidades de cada parte do projeto não sejam misturadas e tenhamos problemas com manutenção, escalabilidade, componentização, desacoplamento e outros no futuro. A aplicação dessa arquitetura na organização das pastas tem o objetivo de evitar tais problemas.
Pasta onde ficam todos os arquivos estáticos da aplicação, imagens, svgs, fontes e etc.
Essa pasta possui todos os componentes visuais do projeto e foi dividida em Atoms e Molecules, seguindo as diretrizes da metodologia Atomic Design.
Essa pasta contém os arquivos que são constantes do projeto como arrays com nomes dos headers das tabelas e etc.
Onde estão os hooks customizados necessários para a aplicação, como os hooks das context apis, por exemplo.
Aqui ficam todas as tipagens necessárias dos componentes, contexts, mappers, requisições e etc.
Uma das pastas da arquitetura do projeto, ela representa a View ela recebe os componentes necessários para construir as páginas e também as propriedades e funções para fazer com que os componentes funcionem.
Essa pasta representa a Model do MVC, ela contém todas as requisições para API's externas, regras de negócios, ContextAPI's, estados e dados, os providers necessários e os mappers.
A pasta com todas as ContextApi's e é uma das pastas da arquitetura MVC, ela serve como a controller. Os arquivos dentro da pasta são responsáveis por prover as Pages os dados e funções necessários para que os componentes funcionem corretamente, dessa forma criando uma camada com os dados necessários ao redor de cada página.
É a pasta aonde ficam as funções que mapeiam os dados retornados das api's e devolvem já formatados de acordo com a necessidade do componente.
Pasta onde estão as funções que executam serviços, como fazer uma requisição numa api e retornar os dados ou, buscar dados no local storage, por exemplo.
Contém todos os arquivos necessários para o tema como tamanhos de fontes, cores, reset css e etc.
Aqui estão as funções que podem ser usadas em componentes ou em outras funções no projeto, como uma função que formata um número de telefone, por exemplo.
Após baixar o projeto execute npm install
para instalar as dependencias.
Depois npm run test
para executar os testes e npm run dev
para rodar o projeto localmente.