{"id":23119028,"url":"https://github.com/vbss-io/react-recipe-app","last_synced_at":"2026-04-08T21:31:01.712Z","repository":{"id":58825013,"uuid":"533878233","full_name":"vbss-io/react-recipe-app","owner":"vbss-io","description":"Aplicação utilizando React para exibição de receitas de comidas e bebidas. É possível acompanhar o progresso no desenvolvimento de receitas, explorar receitas, favoritar, compartilhar e mais.  ","archived":false,"fork":false,"pushed_at":"2022-10-09T00:05:01.000Z","size":3159,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-05T05:46:38.659Z","etag":null,"topics":["bootstrap","context-api","linter","localstorage","react","reacthooks","reactjs","thecocktaildb","themealdb","trybe","trybe-projects"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vbss-io.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-09-07T17:52:42.000Z","updated_at":"2024-11-19T11:30:35.000Z","dependencies_parsed_at":"2023-01-19T16:17:22.193Z","dependency_job_id":null,"html_url":"https://github.com/vbss-io/react-recipe-app","commit_stats":null,"previous_names":["vbss-io/react-recipe-app","vitorbss12/recipe-app-with-react-and-contextapi"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/vbss-io/react-recipe-app","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vbss-io%2Freact-recipe-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vbss-io%2Freact-recipe-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vbss-io%2Freact-recipe-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vbss-io%2Freact-recipe-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vbss-io","download_url":"https://codeload.github.com/vbss-io/react-recipe-app/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vbss-io%2Freact-recipe-app/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31575347,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-08T14:31:17.711Z","status":"ssl_error","status_checked_at":"2026-04-08T14:31:17.202Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","context-api","linter","localstorage","react","reacthooks","reactjs","thecocktaildb","themealdb","trybe","trybe-projects"],"created_at":"2024-12-17T05:31:12.521Z","updated_at":"2026-04-08T21:31:01.698Z","avatar_url":"https://github.com/vbss-io.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# App de Receitas - React, Context API e Bootstrap\n\n[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=vitorbss12_Recipe-App-with-React-and-ContextAPI\u0026metric=alert_status)](https://sonarcloud.io/summary/new_code?id=vitorbss12_Recipe-App-with-React-and-ContextAPI)\n[![Reliability Rating](https://sonarcloud.io/api/project_badges/measure?project=vitorbss12_Recipe-App-with-React-and-ContextAPI\u0026metric=reliability_rating)](https://sonarcloud.io/summary/new_code?id=vitorbss12_Recipe-App-with-React-and-ContextAPI)\n[![Security Rating](https://sonarcloud.io/api/project_badges/measure?project=vitorbss12_Recipe-App-with-React-and-ContextAPI\u0026metric=security_rating)](https://sonarcloud.io/summary/new_code?id=vitorbss12_Recipe-App-with-React-and-ContextAPI)\n[![Maintainability Rating](https://sonarcloud.io/api/project_badges/measure?project=vitorbss12_Recipe-App-with-React-and-ContextAPI\u0026metric=sqale_rating)](https://sonarcloud.io/summary/new_code?id=vitorbss12_Recipe-App-with-React-and-ContextAPI)\n\nEsse projeto é uma aplicação de receitas, onde é possível ver receitas de comidas e bebidas a partir das APIs do [TheMealDB](https://www.themealdb.com/api.php) e [TheCocktailDB](https://www.thecocktaildb.com/api.php). É possível acessar cada uma das receitas e ver detalhes sobre elas, como ingredientes e instruções. Também é possível favoritar receitas e marca-las como prontas a partir de checkboxes com os ingredientes necessários na tela de detalhes, e acessar na página de receitas prontas, da mesma forma que as favoritas. A aplicação também possui um sistema de busca, onde é possível pesquisar por nome de receitas ou ingredientes, além de filtros por categorias. É baseada em três principais páginas, de comidas, bebidas e explorar, que contém mais opções de receitas. A aplicação foi desenvolvida em React, utilizando Context API para gerenciar o estado global da aplicação, e Bootstrap para estilização.\n\nFoi desenvolvido em grupo durante o curso de Desenvolvimento Web da Trybe, com os companheiros(a):\n  - [Vinícius Teixeira](https://github.com/tex008)\n  - [Luciano Freitas](https://github.com/Ludoug-f)\n  - [Paula Henrique](https://github.com/henriquesPaula)\n  - [Celso Fiorani](https://github.com/fioranicelso)\n\nA aplicação pode ser testada aqui: [Recipe App](https://vitorbss12.github.io/Recipe-App-with-React-and-ContextAPI/) \n\n![recipesAppDemo](./readmeImages/recipesAppDemo.png)\n\n## Conteúdo\n\n- [App de Receitas - React, Context API e Bootstrap](#app-de-receitas---react-context-api-e-bootstrap)\n  - [Conteúdo](#conteúdo)\n- [**Recursos App de Receitas**](#recursos-app-de-receitas)\n    - [**Login**](#login)\n    - [**Página Principal de Comidas**](#página-principal-de-comidas)\n    - [**Página Principal de Bebidas**](#página-principal-de-bebidas)\n    - [**Explorar**](#explorar)\n    - [**Detalhes de Receita**](#detalhes-de-receita)\n    - [**Perfil, Receitas Favoritas e Feitas**](#perfil-receitas-favoritas-e-feitas)\n- [**Instruções**](#instruções)\n    - [**Instalação**](#instalação)\n    - [**Execução**](#execução)\n- [**Linguagens e Ferramentas**](#linguagens-e-ferramentas)\n    - [**React**](#react)\n    - [**React Hooks**](#react-hooks)\n    - [**Context API**](#context-api)\n    - [**Local Storage**](#local-storage)\n    - [**Bootstrap**](#bootstrap)\n    - [**TheMealDB API e TheCocktailDB API**](#themealdb-api-e-thecocktaildb-api)\n    - [**Linter**](#linter)\n- [**Observações**](#observações)\n\n# **Recursos App de Receitas**\nOs recursos serão listados conforme as páginas.\n\n### **Login**\n\nA tela inicial da aplicação é a de login, onde o usuário pode acessar a aplicação com e-mail e senha. É apenas uma abstração de forms de login, e quando o usuário clica no botão de login, é redirecionado para a página de comidas e seu e-mail e token para as APIs são salvos no LocalStorage.\n\n![Login](./readmeImages/loginApp.png)\n\n### **Página Principal de Comidas**\n\nEssa é a primeira página acessada após o login, conta com um header com o nome da página e um botão para acessar a página de perfil. Logo abaixo uma barra de buscas podendo ser utilizada pelo nome, ingrediente ou primeira letra da receita. Em seguida os botões de categoria para filtrar receitas. O conteúdo principal da página é uma lista de receitas de comidas consumida pela API do TheMealDB, que podem ser acessadas clicando nelas. O usuário pode acessar a página de bebidas ou explorar clicando nos botões do footer.\n\n![Foods Home](./readmeImages/foodsHomeApp.png)\n\n### **Página Principal de Bebidas**\n\nFunciona da mesma forma forma que a página de comidas, com a diferença de que a lista de receitas é consumida pela API do TheCocktailDB.\n\n![Drinks Home](./readmeImages/drinksHomeApp.png)\n\n### **Explorar**\n\nA página de explorar permite encontrar receitas de comidas e bebidas utilizando características das receitas. As comidas podem ser exploradas por ingrediente, região e de forma aleatória, enquanto as bebidas apenas por ingrediente e região.\n\n![Explore](./readmeImages/exploreApp.png)\n![Explore By Ingredients and Nationalities](./readmeImages/exploreIngreAndNat.png)\n\n### **Detalhes de Receita**\n\nCada receita possui uma página com suas informações, como nome, foto, ingredientes, instruções e recomendações. Nessa página o usuário pode adicionar a receita aos favoritos, compartilhar a receita, iniciar e finalizar a receita. O modelo de detalhes funciona da mesma forma para comidas e bebidas.\n\n![Recipe Details](./readmeImages/detailsApp.png)\n\n### **Perfil, Receitas Favoritas e Feitas**\n\nA página de perfil permite que o usuário veja seu e-mail e acessar a página de receitas feitas e receitas favoritas, além de fazer logout que removera o e-mail do local storage.\nA página de receitas feitas mostra as receitas que o usuário finalizou, e a página de receitas favoritas mostra as receitas que o usuário adicionou aos favoritos.\n\n![Recipe Details](./readmeImages/profileFavoriteAndDoneApp.png)\n\n# **Instruções**\n\n### **Instalação**\n\nPara rodar a aplicação localmente é necessário fazer a instalação das dependências utilizadas com o comando:\n\n```\nnpm install\n```\n### **Execução**\n\nDepois de ter as dependências instaladas é possível executar o projeto localmente com o comando:\n\n```\nnpm start\n```\n\n# **Linguagens e Ferramentas**\n\n`React` é o coração da aplicação, foi desenvolvida utilizando componentes funcionais, `Hooks` disponíveis pelo React e também customizados, o estado da aplicação foi gerido utilizando `Context API` e a estilização foi feita com `Bootstrap` e `CSS`\n\n### **React**\n\nA aplicação foi componentizada utilizando `React`.\n\n### **React Hooks**\n\nOs principais hooks utilizados na aplicação foram `useState`, `useContext`, `useEffect` e `useHistory`, também foram desenvolvidos hooks customizados para a aplicação.\n\n### **Context API**\n\n`Context API` ficou responsável pelo estado global da aplicação para gerenciar alterações na busca, categorias, receitas favoritas e prontas.\n\n### **Local Storage**\n\nEssa aplicação não possui banco de dados, então pra simular esse comportamento foi utilizado o Local Storage do usuário para salvar informações, como e-mail, receitas favoritas, receitas prontas e token de acesso.\n\n### **Bootstrap**\n\nA aplicação teve estilização principal com `Bootstrap`.\n\n### **TheMealDB API e TheCocktailDB API**\n\nA API utilizada para as receitas de comidas é a [TheMealDB](https://www.themealdb.com/api.php). Já a API utilizada para as receitas de bebidas é a [TheCocktailDB](https://www.thecocktaildb.com/api.php).\n\n### **Linter**\n\nEste projeto foi desenvolvido utilizando o linter `ESLint` seguindo as boas práticas definidas na [Trybe](https://www.betrybe.com/).\n\nPara executar o Lint utilize o comando:\n````\nnpm run lint\n````\n\nPara executar o styleLint utilize o comando:\n````\nnpm run lint:styles\n````\n\n# **Observações**\n\n- Este é um projeto de estudo desenvolvido em grupo durante minha formação na [Trybe](https://www.betrybe.com/). :rocket:\n\n- Este repositório está sendo monitorado pelo [SonarCloud](https://sonarcloud.io/) para avaliação de qualidade.\n\n- Quer saber mais sobre mim? Veja o meu [LinkedIn](https://www.linkedin.com/in/vitorbss/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvbss-io%2Freact-recipe-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvbss-io%2Freact-recipe-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvbss-io%2Freact-recipe-app/lists"}