lirbre / opea-frontend-challenge Goto Github PK

Esse é um projeto feito no intuito de resolver o desafio para Frontend da Opea. Através desse readme, venho explicar as escolhas e os motivos das minhas decisões técnicas. acesse o deploy dele, aqui

É um projeto feito através do do create-next-app, logo, basta instalar as dependencias:

npm run install
# or
yarn install
# or
pnpm install

E, em seguida:

npm run dev
# or
yarn dev
# or
pnpm dev

• Estruturado em SPA, através do Next.js um framework feito a partir do React.js. Feito com TypeScript.
• Estilizado através do pré-processador PostCSS, uma opção mais moderna que me permitiu - com mais facilidade - utilizar o Tailwind CSS - através dessa mistura de "Post CSS" e tailwind, o projeto foi estilizado através de classes utilitárias; padrão adotado pelo Tailwind. (Conteúdo sobre o PostCSS)
• Para toasts, foi utilizado o Sonner - Projeto Open Source que eu tive algumas contribuições.
• Para mutations e queries, ou seja, interagir com a API Rest, utilizei o react-query - através disso, POSTS / DELETE e PUT são feitas através do hook useMutation e os GETs feitos através do hooks useQuery. Essas queries são listadas através de uma chave (queryKey) e controladas através do react-query que é uma lib de cacheamento.
  • Por ser uma lib de cache é possível notar que, em alguns momentos, ao sair da página e voltar; será realizado um "refetch" - utilizando do principio de SWR que significa "stale-while-revalidate" e gerenciada através de um cacheTime e um staleTime adicionado dentro do custom hook [useCompany](https://github.com/lirbre/opea-frontend-challenge/blob/main/src/hooks/useCompany.tsx).
  • Aproveitando do react-query é utilizado uma lógica de prefetchQuery através do server side rendering utilizando o getServerSideProps do Next.js.
• Para validação de tipagem e formulários (com o custom hook useForm e os schemas criados para o zod), foi utilizado o zod como extensão do TypeScript. - O useForm é um adaptação minha, de um código do Matt Pocock adicionando a formatação - e listagem - dos erros do formulário buscando se aproximar da react-hook-form.
• Como forma de controle de estado global, foi utiizado a URL como forma de implementar essa ideia aqui. Isso torna possível coisas como https://opea-frontend-challenge.vercel.app/?search=empresa trazendo benefícios de compartilhamento e simplicidade ao projeto.