Recipe App Project

đŸ‡§đŸ‡· PortuguĂȘs

Esse foi o Ășltimo projeto do mĂłdulo de Frontend no curso de Desenvolvimento Web Full Stack da Trybe. O desenvolvimento aconteceu em parceria com os amigos: Filipe Onoue, Junio Álves, Luiz MĂłdolo e Lucas Toledo, utilizando Metodologias Ágeis(SCRUM) com o uso de Kanban(pelo Trello). O seu objetivo primĂĄrio foi praticar transferĂȘncia de informaçÔes por Props, ContextAPI, React Hooks e React Components atravĂ©s do desenvolvimento de um site no estilo app de receitas para telas pequenas (320X640px), que posteriormente pode ser adaptado atravĂ©s da metodologia mobile first para telas maiores.

Objetivos

  • Usar Props, ContextAPI e React Hooks para enviar informaçÔes entre componentes;
  • Desenvolver primariamente para telas pequenas fazendo a estilização;
  • Funcionar como um app de receitas onde Ă© possĂ­vel se consultar receitas, e filtra-las de vĂĄrias maneiras;
  • Explorar receitas por origem, ingredientes e atĂ© mesmo usar o modo Surpreenda Me para obter uma receita aleatĂłria;
  • Salvar as receitas completas e as receitas favoritadas localmente;
  • Copiar links das receitas;
  • Assistir o vĂ­deo da execução da receita.

Live Link

Recipe App

Screenshot

ScreenShot

Tecnologias usadas

  • React
  • ContextAPI
  • React Hooks
  • React Components
  • HTML
  • CSS
  • Javacript

Como usar

Acesse o site, use “[email protected]” como email e “1234567” como senha. Navegue pelo menu escolhendo Comidas, Bebidas ou Explorar; filtre as receitas, escolha a sua, inicie a sua receita, assista o vĂ­deo e leia as instruçÔes, vĂĄ executando a receita junto com o site, finalize a sua receita e salve as suas favoritas;

Rodar Localmente

Requisitos:

  • Node v16
  • Google Chrome

Clonar no seu computador (via SSH)

No terminal:

git clone [email protected]:IgorMarinhoArgollo/recipe-app.git
npm install

Iniciando o projeto localmente

No diretório em que o repositório foi clonado, cole o seguinte comando no terminal para iniciar a aplicação localmente:

  npm start

InformaçÔes de Desenvolvimento (Projeto Original)

Commits de Desenvolvimento: 75; Tempo Gasto: 6 dias;

, Junio Álves, Luiz Módolo and Lucas Toledo, using Agile Methodologies (SCRUM) with the use of Kanban (by Trello). Its primary objective was to practice transferring information through Props, ContextAPI, React Hooks and React Components through the development of a recipe app-style website for small screens (320X640px), which can later be adapted using the mobile first methodology for larger screens.

My Goals

  • Use Props, ContextAPI and React Hooks to send information between components;
  • Develop primarily for small screens doing the styling;
  • Function as a recipe app where you can consult recipes, and filter them in different ways;
  • Explore recipes by origin, ingredients and even use the Surprise Me mode to get a random recipe;
  • Save complete recipes and favorite recipes locally;
  • Copy recipe links;
  • Watch the recipe execution video.

Live Link

Recipe App

Screenshot

ScreenShot

Used Technologies

  • React
  • ContextAPI
  • React Hooks
  • React Components
  • HTML
  • CSS
  • Javacript

How to use it

Access the website, use “[email protected]” as Email and “1234567” as Password. Browse the menu by choosing Food, Drinks or Explore; filter the recipes, choose yours, start your recipe, watch the video and read the instructions, run the recipe along with the website, finish your recipe and save your favorites;

Run Locally

Requirements:

  • Node v16
  • Google Chrome

Cloning into your computer (via SSH)

On terminal:

  git clone [email protected]:IgorMarinhoArgollo/recipe-app.git
  npm install

Starting project locally

On the directory that you have cloned the repository, paste the command on terminal to start the application:

  npm start

Development Information (Original Project)

Development Commits: 75; Time Spent: 6 days;

GitHub

View Github