PROJETO APP DE RECEITAS

Projeto desenvolvido em grupo no módulo de Front-End do curso de desenvolvimento web da Trybe

Acesse o projeto em produção clicando aqui

🎯 Objetivo

Desenvolver um app de receitas onde o usuario possa visualizar, buscar, filtrar, favoritar ,compartilhar e acompanhar o progresso das receitas.

O aplicativo consome duas APIs, uma para comidas e outra para bebidas. O layout tem como foco dispositivos móveis*

📝 Habilidades adquiridas

1. Utilizar a Context API do React para gerenciar estado
2. Utilizar o React Hook useState
3. Utilizar o React Hook useContext
4. Utilizar o React Hook useEffect
5. Criar Hooks customizados
6. Utilizar a métodologia ágil Kanban para dividir e organizar as demandas do projeto

📌 Tecnologias utilizadas no desenvolvimento

✔️ Requisitos do projeto

• Desenvolva os testes unitários de maneira que a cobertura seja de, no mínimo, 90%

• Crie todos os elementos que devem respeitar os atributos descritos no protótipo para a tela de login

• Desenvolva a tela de maneira que a pessoa consiga escrever seu email no input de email e sua senha no input de senha

• Desenvolva a tela de maneira que o formulário só seja válido após um email válido e uma senha de mais de 6 caracteres serem preenchidos

• Após a submissão do formulário, salve no localStorage o e-mail da pessoa usuária na chave user

• Redirecione a pessoa usuária para a tela principal de receitas de comidas após a submissão e validação com sucesso do login

• Redirecione a pessoa usuária para a tela de perfil ao clicar no botão de perfil

• Desenvolva o botão de busca que, ao ser clicado, a barra de busca deve aparecer. O mesmo serve para escondê-la

• Implemente os elementos da barra de busca respeitando os atributos descritos no protótipo

• Implemente 3 radio buttons na barra de busca: Ingredient, Name e First letter

• Busque na API de comidas caso a pessoa esteja na página de comidas, e na API de bebidas caso esteja na de bebidas

• Redirecione para a tela de detalhes da receita caso apenas uma receita seja encontrada, com o ID da mesma na URL

• Caso a busca retorne mais de uma receita, renderize as 12 primeiras encontradas, exibindo a imagem e o nome de cada uma

• Exiba um alert caso nenhuma receita seja encontrada

• Implemente o menu inferior posicionando-o de forma fixa e contendo 2 ícones: um para comidas e outro para bebidas

• Exiba o menu inferior apenas nas telas indicadas pelo protótipo

• Redirecione a pessoa usuária para a tela correta ao clicar em cada ícone no menu inferior

• Carregue as 12 primeiras receitas de comidas ou bebidas, uma em cada card

• Implemente os botões de categoria para serem utilizados como filtro

• Implemente o filtro das receitas por meio da API ao clicar no filtro de categoria

• Implemente o filtro como um toggle, o qual se for selecionado novamente, o app deve retornar as receitas sem nenhum filtro

• Redirecione a pessoa usuária ao clicar no card para a tela de detalhes, que deve mudar a rota e conter o id da receita na URL

• Realize uma request para a API passando o id da receita que deve estar disponível nos parâmetros da URL

• Desenvolva a tela de modo que contenha uma imagem da receita, o título, a categoria em caso de comidas e se é ou não alcoólico em caso de bebidas, uma lista de ingredientes seguidos pelas quantidades, instruções, um vídeo do youtube incorporado e recomendações

• Implemente as recomendações. Para receitas de comida, a recomendação deverá ser bebida, já para as receitas de bebida a recomendação deverá ser comida

• Implemente os 6 cards de recomendação, mostrando apenas 2. O scroll é horizontal, similar a um carousel

• Desenvolva um botão de nome "Start Recipe" que deve ficar fixo na parte de baixo da tela o tempo todo

• Implemente a solução de forma que, caso a receita já tenha sido feita, o botão "Start Recipe" desapareça

• Implemente a solução de modo que, caso a receita tenha sido iniciada mas não finalizada, o texto do botão deve ser "Continue Recipe"

• Redirecione a pessoa usuária caso o botão "Start Recipe" seja clicado, a rota deve mudar para a tela de receita em progresso

• Implemente um botão de compartilhar e um de favoritar a receita

• Implemente a solução de forma que, ao clicar no botão de compartilhar, o link de detalhes da receita deve ser copiado para o clipboard e uma mensagem avisando que o link foi copiado deve aparecer na tela em uma tag HTML

• Salve as receitas favoritas no localStorage na chave favoriteRecipes

• Implemente o ícone do coração (favorito) de modo que: deve vir preenchido caso a receita esteja favoritada e vazio caso contrário

• Implemente a lógica no botão de favoritar. Caso seja clicado, o ícone do coração deve mudar seu estado atual, caso esteja preenchido deve mudar para vazio e vice-versa

• Desenvolva a tela de modo que contenha uma imagem da receita, o título, a categoria em caso de comidas e se é ou não alcoólico em caso de bebidas, uma lista de ingredientes com suas respectivas quantidades e instruções

• Desenvolva um checkbox para cada item da lista de ingredientes

• Implemente uma lógica que ao clicar no checkbox de um ingrediente, o nome dele deve ser "riscado" da lista

• Salve o estado do progresso, que deve ser mantido caso a pessoa atualize a página ou volte para a mesma receita

• Desenvolva a lógica de favoritar e compartilhar. A lógica da tela de detalhes de uma receita se aplica aqui

• Implemente a solução de modo que o botão de finalizar receita ("Finish Recipe") só pode estar habilitado quando todos os ingredientes estiverem "checkados" (marcados)

• Redirecione a pessoa usuária após clicar no botão de finalizar receita ("Finish Recipe"), para a página de receitas feitas, cuja rota deve ser /done-recipes

• Implemente os elementos da tela de receitas feitas respeitando os atributos descritos no protótipo

• Desenvolva a tela de modo que, caso a receita do card seja uma comida, ela deve possuir: a foto da receita, nome, categoria, nacionalidade, a data em que a pessoa fez a receita, as 2 primeiras tags retornadas pela API e um botão de compartilhar

• Desenvolva a tela de maneira que, caso a receita do card seja uma bebida, ela deve possuir: a foto da receita, o nome, se é alcoólica, a data em que a pessoa fez a receita e um botão de compartilhar

• Desenvolva a solução de modo que o botão de compartilhar deve copiar a URL da tela de detalhes da receita para o clipboard

• Implemente 2 botões que filtram as receitas por comida ou bebida e um terceiro que remove todos os filtros

• Redirecione para a tela de detalhes da receita caso seja clicado na foto ou no nome da receita

• Implemente os elementos da tela de receitas favoritas (cumulativo com os atributos em comum com a tela de receitas feitas), respeitando os atributos descritos no protótipo

• Desenvolva a tela de modo que, caso a receita do card seja uma comida, ela deve possuir: a foto da receita, nome, categoria, nacionalidade, um botão de compartilhar e um de "desfavoritar"

• Desenvolva a tela de modo que, caso a receita do card seja uma bebida, ela deve possuir: a foto da receita, nome, se é alcoólica ou não, um botão de compartilhar e um de "desfavoritar"

• Desenvolva a solução de modo que o botão de compartilhar deve copiar a URL da tela de detalhes da receita para o clipboard

• Desenvolva a solução de modo que o botão de "desfavoritar" deve remover a receita da lista de receitas favoritas do localStorage e da tela

• Implemente 2 botões que filtram as receitas por comida ou bebida e um terceiro que remove todos os filtros

• Redirecione a pessoa usuária ao clicar na foto ou no nome da receita, a rota deve mudar para a tela de detalhes daquela receita

• Implemente os elementos da tela de perfil respeitando os atributos descritos no protótipo

• Implemente a solução de maneira que o e-mail da pessoa usuária deve estar visível

• Implemente 3 botões: um de nome "Done Recipes", um de nome "Favorite Recipes" e um de nome "Logout"

• Redirecione a pessoa usuária que, ao clicar no botão de "Done Recipes", a rota deve mudar para a tela de receitas feitas

• Redirecione a pessoa usuária que, ao clicar no botão de "Favorite Recipes", a rota deve mudar para a tela de receitas favoritas

• Redirecione a pessoa usuária que ao clicar no botão de "Logout", o localStorage deve ser limpo e a rota deve mudar para a tela de login

🚧 Funcionalidades e melhorias a serem implementadas futuramente:

• Conectar com o back-End
• Opção para o usuario buscar refeicoes por categorias e nacionalidade
• Responsividade e melhorias no CSS da pagina

⬇️ Instalando dependências

Frontend

cd src/
npm install

⚡ Executando a aplicação

Para rodar o front-end:

cd src/ && npm start

🧪 Executando os testes

Para rodar todos os testes:

npm test

👩🏻‍💻 Projeto desenvolvido por :