Projeto Recipe App

Projeto realizado durando o período de estudo na Trybe.



Organização de tarefas.

  • O projeto foi realizado em equipe utilizando metologias ágeis, scrum e kanban. Em uma semana de projeto, fizemos daily meetings para alinhamentos dos requisitos organizados no Trello

Desenvolvimento.

  • Projeto desenvolvido utilizando React e seus sistemas de Hooks e Context API.

  • Estilizado através da ferramenta Styled Components com o conceito de mobile first.

  • Foram utilizadas duas API's, um para comidas e outra para bebidas.


Sobre as API's.

  • O TheMealDB é um banco de dados que contém receitas do mundo todo junto de seus ingredientes, aqui estão seus end-points.

  • 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
        }
    ]
  }
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"
        }
    ]
  }

Sobre a aplicação.

Nela será possível ver, buscar, filtrar, favoritar e acompanhar o progresso de preparação de receitas e drinks!

Login

É feito uma verificação do input email e password

Drinks e Foods

Página principal de bebidas e comidas, mostra uma lista de receitas onde é possível acessar páginas mais detalhadas.
Drinks
Foods

Progress

Página detalhada que mostra seus ingredientes e o progresso caso seja iniciada. Receitas finalizadas podem ser acessadas através da área de perfil do usuário.

Favorites

Possibilita o usuário a favoritar receitas e acessá-las quando quiser através do seu perfil.

Filters

À esquerda área com filtros pré definidos para o usuário acessar receitas com aquele ingrediente rapidamente. À direita, uma área onde o usuário pode inserir filtros mais específicos.

Explore

Área que permite que o usuário procure por receitas através de ingredientes, nacionalidade ou até mesmo uma receita aleatória.

Profile

Área onde o usuário tem seu email exibido (O mesmo inserido no login), e consegue acessar suas receitas favoritas ou receitas feitas.