/recipe-app

Website capaz de buscar, filtrar, favoritar, iniciar e acompanhar o progresso de preparação de diferentes receitas de comida e bebidas

Primary LanguageJavaScript

Recipe App Project

Demo

https://recipe-app-vercel.app/

Welcome!!

The project

  • Projeto em grupo de aprendizado desenvolvido ao longo do curso de desenvolvimento Web da Trybe.

  • O projeto se trata de uma aplicação capaz de buscar, filtrar, favoritar, iniciar e acompanhar o progresso de preparação de diferentes receitas de comida e bebidas.

  • Usa localStorage para armazenar informações como as de usuário, receitas favoritas, feitas ou em progresso.

  • Usa React Testing Library(RTL) e JEST como ferramentas de teste no modelo Test-driven development(TDD) e Quality assurance(QA).

  • Layout desenvolvido alinhado ao conceito mobile first.

Squad
Quick start
  1. Clone e mude para a pasta do repositório:
git clone git@github.com:xxxx/recipe-app-project.git
cd recipe-app-project
npm install
npm start
  1. Abra http://localhost:3000 com seu browser para ver o resultado.
Features

  • Fazer login e logout;

  • Pesquisar por receitas de comida ou bebida (por ingrediente, nome ou primeira letra);

  • Filtrar receitas por categoria;

  • Visualizar detalhes das receitas;

  • Favoritar e compartilhar link de uma receita específica;

  • Iniciar e acompanhar os ingredientes já utilizados em uma receita;

Developed skills

  • Utilizar o React Hook useState;

  • Utilizar o React Hook useContext;

  • Utilizar o React Hook useEffect;

  • Utilizar a Context API do React como gerenciador de estado;

  • Criar Hooks customizados;

  • Utilizar os ciclos de vida de um componente React;

  • Fazer requisições e consumir dados vindos de uma API;

  • Elaborar mocks e testes com React Testing Library e JEST;

  • Utilizar o componente BrowserRouter corretamente;

  • Criar rotas, mapeando o caminho da URL com o componente correspondente, via Route;

  • Utilizar o Switch do React Router;

  • Usar o componente Redirect pra redirecionar para uma rota específica;

  • Criar links de navegação na aplicação com o componente Link;

Tools
APIs
  • TheMealDB e TheCocktailDB
    • Bancos de dados aberto, mantido pela comunidade, com receitas e ingredientes de todo o mundo.
Trybe
  • São de total autoria da Trybe:
    • Proposta e modelo do projeto.
    • Regras de ESLint e StyleLint.