Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/thiagomartins367/trybe-project-recipes-app

Projeto de desenvolvimento de um App de Receitas com filtros de busca, acompanhamento de receitas em progresso e receitas favoritas. 🧑‍🍳 🍲 🍰
https://github.com/thiagomartins367/trybe-project-recipes-app

context-api css3 eslint javascript jsx react-testing-library reatctjs stylelint

Last synced: 3 days ago
JSON representation

Projeto de desenvolvimento de um App de Receitas com filtros de busca, acompanhamento de receitas em progresso e receitas favoritas. 🧑‍🍳 🍲 🍰

Awesome Lists containing this project

README 

        
# Descrição



Este projeto foi desenvolvido durante o período de Curso da Trybe 🚀



O projeto tem por objetivo a avaliação e prática dos conhecimentos adquiridos na Trybe, visando o cumprimento do requisitos solicitados.



:warning: Projeto desenvolvido em equipe de 5 integrantes.



:warning: Resolução ideal 360 x 640



### :star: [Acesse](https://thiagomartins367.github.io/Trybe-project-recipes-app) a aplicação agora mesmo



---



# Sumário

- [Descrição](#descrição)

- [Habilidades](#habilidades-requeridas)

- [O que foi desenvolvido](#o-que-foi-desenvolvido)

- [Tecnologias utilizadas](#tecnologias-utilizadas)

- [Demonstração da aplicação](#demonstração-da-aplicação)

- [Protótipo do projeto](#protótipo-do-projeto)

- [ANTES DE INICIALIZAR A APLICAÇÃO](#antes-de-inicializar-a-aplicação)

- [Linter](#linter)

- [APIs](#apis)

  - [TheMealDB API](#themealdb-api)

  - [The CockTailDB API](#the-cocktaildb-api)



- [Usando o Trello como ferramenta kanban](#usando-o-trello-como-ferramenta-kanban)



- [Observações técnicas](#observações-técnicas)

  - [Rotas](#rotas)

  - [Biblioteca clipboard-copy](#biblioteca-clipboard-copy)



---



# Habilidades requeridas



  - 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



---



## O que foi desenvolvido



Foi implementado, em equipe, um app de receitas, utilizando o que há de mais moderno dentro do ecossistema React: Hooks e Context API!



Nessa aplicação de receitas é possível ver, buscar, filtrar, favoritar e acompanhar o progresso de preparação de receitas e drinks!



A base de dados são 2 APIs distintas, uma para comidas e outra para bebidas.



Além disso, o layout tem como foco dispositivos móveis, em função disso, foi usado o conceito de "Mobile First" no desenvolvimento sendo utilizada a resolução de tela de `360 x 640` (360 pixels de largura por 640 pixels de altura).



⚠️ Logo, recomenda-se visualizar o projeto usando a mesma resolução, via instalação [deste plugin](https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh?hl=en) do `Chrome`. ⚠️



---



## Tecnologias utilizadas



- `javascript` , `css` , `jsx` , `React` , `ContextAPI` e `Jest`.



---



## Demonstração da aplicação



[Aqui](https://www.linkedin.com/posts/thiago-dioria-martins_css-desenvolvimentoweb-devs-activity-6959607508952862720-MVsP?utm_source=share&utm_medium=member_desktop) é possível ver uma pequena demonstração da Aplicação.



---



## Protótipo do projeto



No desenvolvimento também foi usado a ferramenta "Figma" para analisar mais detalhadamente as "views" da apliacação;



O protótipo foi usado como base para o desenvolvimento do projeto.



[Acesse o Protótipo](https://www.figma.com/file/cBDVGdqQxUuVlQp3ehW7wx/Recipes-App)



#### ⚠️ Para ver os comentários sobre cada componente, basta clicar no ícone de comentários no Figma (lado esquerdo superior).



![image](https://res.cloudinary.com/drdpedroso/image/upload/c_scale,w_400/v1575815877/Screenshot_2019-12-08_at_11.37.25_kzt7rl.png)



---



## ANTES DE INICIALIZAR A APLICAÇÃO:



1. Clone o repositório

  * `git clone [email protected]:THIAGOMARTINS367/Trybe-project-recipes-app.git`

  * Entre na pasta do repositório que você acabou de clonar:

    * `cd Trybe-project-recipes-app`



2. Instale as dependências e inicialize o projeto

  * Instale as dependências:

    * `npm install`

  * Inicialize o projeto:

    * `npm start` (uma página de Login deve abrir no seu navegador)

    * ⚠️ Lembrando que já deve se estar dentro da pasta do projeto `Trybe-project-recipes-app` ⚠️

---



## Linter



Para garantir a qualidade do código de forma a tê-lo mais legível, de mais fácil manutenção e seguindo as boas práticas de desenvolvimento foi utilizado neste projeto o linter `ESLint`. Para rodar o linter localmente execute o comando abaixo:



```bash

npm run lint

```

---



## Usando o Trello como ferramenta kanban



Na organização das tarefas foi utilizado o modelo kanban, através da ferramenta "Trello", para garantir que todos tivessem suas tarefas bem definidas e que a qualidade e a organização do projeto como um todo se mantivesse. Além de fazer com que o proceso de desenvolvimento fosse mais ágil e acertivo.



---



## APIs



### TheMealDB API



O [TheMealDB](https://www.themealdb.com/) é 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](https://www.themealdb.com/api.php)



O modelo de resposta para uma `meal` é o seguinte:

  

    Ver modelo de resposta para uma meal



  ```json

    {

      "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") e `ingredientes`:



```

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 bebidas.



Os end-points também são bastante ricos, você pode [vê-los aqui](https://www.thecocktaildb.com/api.php)



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



  ```json

    {

      "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).



---



## Observações técnicas



### Rotas



As rotas utilizadas na aplicação são as seguintes:



* Tela de login: `/`;

* Tela principal de receitas de comidas: `/foods`;

* Tela principal de receitas de bebidas: `/drinks`;

* Tela de detalhes de uma receita de comida: `/foods/{id-da-receita}`;

* Tela de detalhes de uma receita de bebida: `/drinks/{id-da-receita}`;

* Tela de receita em progresso de comida: `/foods/{id-da-receita}/in-progress`;

* Tela de receita em progresso de bebida: `/drinks/{id-da-receita}/in-progress`;

* Tela de explorar: `/explore`;

* Tela de explorar comidas: `/explore/foods`;

* Tela de explorar bebidas: `/explore/drinks`;

* Tela de explorar comidas por ingrediente: `/explore/foods/ingredients`;

* Tela de explorar bebidas por ingrediente: `/explore/drinks/ingredients`;

* Tela de explorar comidas por nacionalidade: `/explore/foods/nationalities`;

* Tela de perfil: `/profile`;

* Tela de receitas feitas: `/done-recipes`;

* Tela de receitas favoritas: `/favorite-recipes`.



### Biblioteca `clipboard-copy`



Para os componentes que contêm a funcionalidade de favoritar pratos ou bebidas, foi necessário utilizar a biblioteca `clipboard-copy` para copiar as informações da receita.



Para mais informações, consulte a [documentação](https://www.npmjs.com/package/clipboard-copy)