Este projeto é um aplicativo web de receitas que utiliza React Hooks e Context API.
Foi desenvolvido em grupo, utilizando metodologias ágeis (scrum e kanban), como desafio final do módulo de front-end da Trybe.
- Sobre o projeto
- Tecnologias utilizadas
- APIs
- Instalação
- Requisitos do projeto
- Status de desenvolvimento
- Desenvolvedores
- Agradecimentos
O nosso desafio nesse projeto foi desenvolver a interface em React js de um sistema que permite visualizar, buscar, filtrar, favoritar, compartilhar e acompanhar o processo de preparação de receitas e drinks. A base de dados são 2 APIs distintas, uma para comidas e outra para bebidas.
A sprint foi de 9 dias dedicados, em dez/2022.
- Buscar receitas por ingrediente, nome ou primeira letra;
- Explorar receitas por categoria, origem ou surpresa;
- Acessar os detalhes de cada receita, com ingredientes, instruções e vídeo;
- Iniciar, pausar e finalizar o preparo de uma receita;
- Favoritar e desfavoritar receitas;
- Compartilhar receitas nas redes sociais;
- Acessar o perfil do usuário com as receitas favoritas e feitas;
Screenshot em breve
Sugestão de uso opcional para estilização: Protótipo no Figma
Deploy: https://ligiabicalho.github.io/app-receitas/
- HTML
- CSS
- JavaScript
- React
- React Router
- React Hooks
- Context API
- Biblioteca clipboard-copy
- Jest
- React Testing Library
As requisições foram feitas utilizando apenas o fetch, orientação dada para evitar conflitos com a avaliação dos requisitos.
-
TheMealDB API
O The Meal DB é um banco de dados aberto, mantido pela comunidade, com receitas e ingredientes de todo o mundo.
Os end-points são bastante ricos, você pode vê-los aqui.
O modelo de resposta para uma
mealé o seguinte:Ver modelo de resposta para uma meal
{ "meals":[ { "idMeal":"52882", "strMeal":"Three Fish Pie", "strDrinkAlternate":null, "strCategory":"Seafood", "strArea":"British", "strInstructions":"Preheat the oven to 200C\/400F\/Gas 6 (180C fan).\r\nPut the potatoes into a saucepan of cold salted water. Bring up to the boil and simmer until completely tender. Drain well and then mash with the butter and milk. Add pepper and taste to check the seasoning. Add salt and more pepper if necessary.\r\nFor the fish filling, melt the butter in a saucepan, add the leeks and stir over the heat. Cover with a lid and simmer gently for 10 minutes, or until soft. Measure the flour into a small bowl. Add the wine and whisk together until smooth.\r\nAdd the milk to the leeks, bring to the boil and then add the wine mixture. Stir briskly until thickened. Season and add the parsley and fish. Stir over the heat for two minutes, then spoon into an ovenproof casserole. Scatter over the eggs. Allow to cool until firm.\r\nSpoon the mashed potatoes over the fish mixture and mark with a fork. Sprinkle with cheese.\r\nBake for 30-40 minutes, or until lightly golden-brown on top and bubbling around the edges.", "strMealThumb":"https:\/\/www.themealdb.com\/images\/media\/meals\/spswqs1511558697.jpg", "strTags":"Fish,Seafood,Dairy,Pie", "strYoutube":"https:\/\/www.youtube.com\/watch?v=Ds1Jb8H5Sg8", "strIngredient1":"Potatoes", "strIngredient2":"Butter", "strIngredient3":"Milk", "strIngredient4":"Gruy\u00e8re", "strIngredient5":"Butter", "strIngredient6":"Leek", "strIngredient7":"Plain Flour", "strIngredient8":"White Wine", "strIngredient9":"Milk", "strIngredient10":"Parsley", "strIngredient11":"Salmon", "strIngredient12":"Haddock", "strIngredient13":"Smoked Haddock", "strIngredient14":"Eggs", "strIngredient15":"", "strIngredient16":"", "strIngredient17":"", "strIngredient18":"", "strIngredient19":"", "strIngredient20":"", "strMeasure1":"1kg", "strMeasure2":"Knob", "strMeasure3":"Dash", "strMeasure4":"50g", "strMeasure5":"75g", "strMeasure6":"2 sliced", "strMeasure7":"75g", "strMeasure8":"150ml", "strMeasure9":"568ml", "strMeasure10":"2 tbs chopped", "strMeasure11":"250g", "strMeasure12":"250g", "strMeasure13":"250g", "strMeasure14":"6", "strMeasure15":"", "strMeasure16":"", "strMeasure17":"", "strMeasure18":"", "strMeasure19":"", "strMeasure20":"", "strSource":"https:\/\/www.bbc.co.uk\/food\/recipes\/three_fish_pie_58875", "dateModified":null } ] }Os ingredientes seguem uma ordem lógica onde o nome dele (
strIngredient1) e a quantidade (strMeasure1) tem o mesmo número no final (1, nesse caso).É possível listar todas as
categorias,nacionalidades(vindas da API como "areas") eingredientes:categorias: https://www.themealdb.com/api/json/v1/1/list.php?c=list nacionalidades: https://www.themealdb.com/api/json/v1/1/list.php?a=list ingredientes: https://www.themealdb.com/api/json/v1/1/list.php?i=list
As fotos dos ingredientes vêm de um end-point padronizado com a seguinte lógica:
https://www.themealdb.com/images/ingredients/${nome-do-ingrediente}-Small.png // Exemplo com "Lime": https://www.themealdb.com/images/ingredients/Lime-Small.png -
The CocktailDB API
Bem similar (inclusive mantida pela mesma entidade) a TheMealDB API, só que focado em drinks.Os end-points também são bastante ricos, você pode vê-los aqui
As respostas seguem a mesma estrutura, com algumas particularidades relativas às bebidas (como ser ou não alcoólica, por exemplo)
Ver modelo de resposta para drinks
{ "drinks":[ { "idDrink":"17256", "strDrink":"Martinez 2", "strDrinkAlternate":null, "strDrinkES":null, "strDrinkDE":null, "strDrinkFR":null, "strDrinkZH-HANS":null, "strDrinkZH-HANT":null, "strTags":null, "strVideo":null, "strCategory":"Cocktail", "strIBA":null, "strAlcoholic":"Alcoholic", "strGlass":"Cocktail glass", "strInstructions":"Add all ingredients to a mixing glass and fill with ice.\r\n\r\nStir until chilled, and strain into a chilled coupe glass.", "strInstructionsES":null, "strInstructionsDE":"Alle Zutaten in ein Mischglas geben und mit Eis f\u00fcllen. Bis zum Abk\u00fchlen umr\u00fchren und in ein gek\u00fchltes Coup\u00e9glas abseihen.", "strInstructionsFR":null, "strInstructionsZH-HANS":null, "strInstructionsZH-HANT":null, "strDrinkThumb":"https:\/\/www.thecocktaildb.com\/images\/media\/drink\/fs6kiq1513708455.jpg", "strIngredient1":"Gin", "strIngredient2":"Sweet Vermouth", "strIngredient3":"Maraschino Liqueur", "strIngredient4":"Angostura Bitters", "strIngredient5":null, "strIngredient6":null, "strIngredient7":null, "strIngredient8":null, "strIngredient9":null, "strIngredient10":null, "strIngredient11":null, "strIngredient12":null, "strIngredient13":null, "strIngredient14":null, "strIngredient15":null, "strMeasure1":"1 1\/2 oz", "strMeasure2":"1 1\/2 oz", "strMeasure3":"1 tsp", "strMeasure4":"2 dashes", "strMeasure5":null, "strMeasure6":null, "strMeasure7":null, "strMeasure8":null, "strMeasure9":null, "strMeasure10":null, "strMeasure11":null, "strMeasure12":null, "strMeasure13":null, "strMeasure14":null, "strMeasure15":null, "strCreativeCommonsConfirmed":"No", "dateModified":"2017-12-19 18:34:15" } ] }Os ingredientes seguem uma ordem lógica onde o nome dele (
strIngredient1) e a quantidade (strMeasure1) tem o mesmo número no final (1, nesse caso).
Para instalar o projeto localmente, siga os seguintes passos:
- Clone o repositório
git clone git@github.com:ligiabicalho/app-receitas.git- Entre na pasta do projeto
cd app-receitas- Instale as dependências
npm install- Inicie o servidor local
npm startÉ possível verificar o percentual da cobertura de testes com o comando
npm run test-coverageClique na seta para ver a lista de requisitos que recebemos para desenvolver durante o processo avaliativo.
Utilizamos o quadro Kanban no Trello para acompanhar o andamento do trabalho em equipe.
Tela de login
- 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.
Tela principal de receitas
- Implemente o header de acordo com a necessidade de cada tela.
- 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.
- Caso a busca retorne mais de uma receita, renderize as 12 primeiras encontradas, exibindo a imagem e o nome de cada uma.
- 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
idda receita que deve estar disponível nos parâmetros da URL.
Tela de detalhes da receita
- 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.
- Redirecione a pessoa usuária caso o botão "Start Recipe" seja clicado, a rota deve mudar para a tela de receita em progresso.
Tela de receita em progresso
- 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.
- Salve o estado do progresso, que deve ser mantido caso a pessoa atualize a página ou volte para a mesma receita.
- 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).
Tela de receitas feitas
- 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
Tela de receitas favoritas
- 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
localStoragee 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
Tela de perfil do usuário
- 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
localStoragedeve ser limpo e a rota deve mudar para a tela de login
O projeto foi entregue dentro do esperado, no entanto ainda carece de algumas melhorias na estilização e algumas funcionalidades podem ser aperfeiçoadas como: o botão finalizar receitas estar disponível somente quando todos os checks de ingredientes forem marcados; manter o estado do progresso do progresso caso volte para a mesma receita;
Além disso, os requisitos avaliativos exigia que o menu inferior estivesse presente apenas na tela principal de receitas. No entanto, sua presença é útil nas demais telas, para facilitar o retorno do usuário à busca de receita, e essa funcionalidade ainda precisa ser implementada.
Ficou a cargo do grupo definir as prioridades de desenvolvimento dos requisitos, exigindo que soubéssemos analisar a aplicação como um todo, suas diferentes telas e componentes, e prever possíveis conflitos e/ou reaproveitamento de componentes. No entanto, ainda sim enfrentamos algumas necessidades de refatoramento para garantir um código mais limpo.
ℹ️ Lígia Bicalho |
Victor Reis |
Carlos Eduardo |
Sahra Di Bernardi |
Marcel Guimarães |
Paulo Vitor Martins |
Trybe |
Agradeço à Trybe por nos proporcionar esta oportunidade de aprendizado e desenvolvimento de habilidades técnicas e de trabalho em equipe. Também agradeço aos colegas da equipe pelas trocas, aos instrutores e mentores que nos apoiaram e orientaram durante o projeto.