/recipes-app

Projeto foi realizado em grupo e teve como objetivo exercitar os conhecimentos de React.js e Redux. A aplicação nada mais é que um app de receitas onde você pode pesquisar receitas de comidas e bebidas e também favorita-las.

Primary LanguageJavaScript

Boas vindas ao repositório do projeto de Receitas! Receitate 2.0 😄

Habilidades

Nesse projeto, foi utilizado:

  • React
  • Redux para gerenciar estado
  • A biblioteca React-Redux
  • React Hook useState
  • React Hook useContext
  • React Hook useEffect
  • Metodologias ágeis Kanban e Scrum
  • Docker
  • Vite

O que foi desenvolvido

Um app de receitas que é possível ver, buscar, filtrar, favoritar e acompanhar o processo de preparação de receitas e drinks!

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

O layout tem como foco dispositivos móveis (360x640 pixels), então todos os protótipos estão desenvolvidos em telas menores.

Gif de demonstração do aplicativo

Protótipo do projeto

Você pode acessar um protótipo no link abaixo:

PROTÓTIPO NO FIGMA

Instruções de execução

Deploy da aplicação

  • caso queira testar por aqui vá direto para o passo 4. 😎
  1. Clone o repositório
  • git clone git@github.com:dihsantanna/recipes-app.git.
  • Entre na pasta do repositório que você acabou de clonar:
    • cd recipes-app
  1. Caso não possua docker em sua máquina pule para o proximo passo
  • Execute aplicação com Docker:
    • npm run compose:up * pode demorar alguns minutos, varia de máquina para máquina
  • Inicialize o projeto acessando:
  1. Rodando sem Docker
  • Instale as dependencias:
    • npm install
  • Inicialize a aplicação:
    • npm start

  1. Como aplicação é apenas front-end, possui validação simples para acessar

    • Insira um email no formato email@email.com;
    • E uma senha com 7 dígitos;
      • Pra ficar mais fácil 😄 Email: email@email.com Senha: 1234567

  2. Interrompendo aplicação

  • Caso tenha utilizado o Docker execute o comando:
    • npm run compose:down
  • Caso não tenha utilizado o Docker:
    • Vá ao terminal onde a aplicação está sendo executada e pressione as teclas ctrl+c

APIs

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

É possível listar todas as categorias, áreas e ingredientes:

categorias: https://www.themealdb.com/api/json/v1/1/list.php?c=list
areas: 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

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

Adições futuras

  • Adicionar persistência em banco de dados, construindo uma nova api para gerenciamento de usuários e suas receitas salvas.
  • Adicionar Testes.