Esse projeto é uma aplicação web responsiva de receitas e drinks.
Neste projeto é possível listar receitas e drinks, ver mais detalhes de uma receita ou drink selecionado, filtrar a lista de receitas ou drinks por categorias, por ingrediente, nome, primeira letra ou local de origem.
Esta aplicação tem rotas protegidas, para acessar as rotas é necessário fazer uma simulação de login na página inicial validando se o campo de email é um email válido e se a senha possuí ao menos 6 digitos.
Você poderá favoritar e marcar como concluídas as receitas e drinks e posteriormente acessa-lás na pagina de profile.
Este projeto utiliza APIs de terceiros são elas:
Assim sendo possível ter uma vasta quantidade de receitas.
Para a realização desse projeto foi utilizado o framework Nextjs com TypeScript, o NextJS é um framework que faz uso do ecossistema React mas traz algumas vantagens como SSR que auxilia no sistemas de buscas(SEO) e faz caching o que torna a navegação muito mais rápida, roteamento automatico, sem a necessidade de libs como React Router. Sendo um projeto relativamente grande, o TypeScript auxilia muito na manutenção do código, trazendo um intelisense que aumenta a produtividade mesmo após muito tempo sem ver o código.
Para gerenciar os estados globais fiz a escolha do Zustand, apesar de ser uma lib relativamente nova, é uma lib que vem ganhando bastante notoriedade, por se tratar de um gerenciador de estado simples e intuitivo sem perder a escalabilidade, se comparado ao ContextAPI e Redux o nível de complexidade é menor, porém tão bem estruturado quanto, mas o grande destaque do zustand é que não é necessário envolver os componentes em um contexto, você pode acessar seus estados e actions através de um hook, e isso não gera uma atualização desnecessária de componentes que estariam envolvidos em um contexto, além disso tem integrações nativas como por exemplo o persist que é utilizado neste projeto.
Apesar de não ter utilizado de todo o potencial do react-query ele é uma lib simples de ser utilizada e tem cache automático, dessa forma após fazer a primeira requisição a segunda já é automatica enquanto você não encerrar a seção, o que torna a navegação entre as páginas muito rápidas apesar das requisições, além disso ele gerencia o status da solicitação sem a necessidade de criar useEffects e estados para lidar com carregamento, erro e resultado da requisição, o react-query faz isso por você.
Para lidar com os formulários foi utilizado o react-hook-form em conjunto com o zod, o react-hook-form é uma excelente lib para gerenciar os formulários, sem a necessidade de ter formulários controlados, diminuindo a quantidade de renderizações a cada alteração em um campo de input, já o zod é uma ótima lib para validação de dados, o que destaca ele entre outras libs, é ele ter sido construído com TypeScript, tornando o trabalho de fazer tipagens e validações mais eficiente.
Para executar esse projeto será necessário ter o node instalado, de preferência para as versões apresentadas nas tags do início desse readme.
Para conseguir transitar bem entre as versões sugiro o uso do nvm
Agora você deve executar os seguintes passos no seu terminal:
# instalação dos pacotes
$ npm install
# execução do servidor
$ npm run dev