Sobre o Projeto
- Este projeto foi desenvolvido no módulo de Front-end do curso de Desenvolvimento Web da Trybe.
- O projeto foi realizado em grupo, onde tivemos que colocar em prática habilidades interpessoais também ensinadas ao longo do curso.
- Você pode ver o projeto em funcionanto atráves deste link.
Foi desenvolvido um app de receitas, utilizando o que há de mais moderno dentro do ecossistema React: Hooks e Context API!
Nele será possível: ver, buscar, filtrar, favoritar e acompanhar o progresso de preparação de receitas de comidas e bebidas!
Nesse projeto, fui capaz de:
- Utilizar Redux para gerenciar estado
- Utilizar a biblioteca React-Redux
- Utilizar a Context API do React para gerenciar estado
- Utilizar o React Hook useState
- Utilizar o React Hook useContext
- Utilizar o React Hook useEffect
- Criar Hooks customizados
-
APIs ⚙️
🚨 IMPORTANTE
Para fazer as requisições, você deve utilizar apenas o
fetch!! Outros bibliotecas como o Axios podem causar problemas no avaliador.-
TheMealDB API
O TheMealDB é 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=listAs 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 bebidas.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)
Os ingredientes seguem uma ordem lógica onde o nome dele (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" } ] }strIngredient1) e a quantidade (strMeasure1) tem o mesmo número no final (1, nesse caso).
-
📝 Sobre a Trybe
-
A trybe é uma escola de desenvolvimento web que possui comprometimento genuíno com o sucesso profissional dos estudantes. Com metodologia ativa e currículo construído junto com o mercado, possibilitam que mais de 90% das pessoas formadas trabalhem com tecnologia Tem um ensino de alta qualidade, onde o currículo e atividades foram desenhados para que as pessoas estudantes tenham a melhor experiência de ensino e, de fato, aprendam as habilidades e competências necessárias para trabalhar.
-
São mais de 1500 horas de formação distribuídas entre estudo de conteúdo, aulas ao vivo, projetos individuais, em grupo e desenvolvimento de habilidades socioemocionais, pois para que se construa uma carreira de sucesso, é preciso mais que capacidade técnica.