/cooking-art-app

Primary LanguageJavaScript

Boas-vindas ao repositório do projeto Cooking Art App!

Aqui você vai encontrar os detalhes de como clonar o projeto e como ele funciona.

Projeto

👨‍💻 O que deverá ser desenvolvido

O projeto tem como objetivo ser um aplicativo de receitas com o layout voltado para dispositivos móveis, utilizando o que há de mais moderno dentro do ecossistema React: Hooks e Context API!! Desenvolvido em grupo com suas funcionalidades de acordo com as demandas pré definidas em um quadro Kanban e utilizando o método SCRUM, temos uma aplicação onde a pessoa usuária pode:

  • Logar no app, sendo necessário adicionar um email e uma senha válida

  • Acessar a tela principal, onde é possível navegar tanto em receitas de Meals quanto de Drinks, através da tab bar

  • Ainda na tela principal, também é possível filtrar por ingredientes, nome ou a primeira letra, através do ícone lupa (🔎), localizado no header. E também filtrar por categorias, por meio das tags

  • Acessar a tela de profile, vizualizar seu email cadastrado no login, e navegar pelo aplicativo, tendo acesso as telas de receitas favoritas e receitas finalizadas, além de ser possível deslogar do aplicativo

  • Acessar a tela de receitas finalizadas, filtrar com base em All, Drinks e Meals e vizualizar as receitas terminadas

  • Acessar a tela de receitas favoritas, filtrar com base em All, Drinks e Meals e vizualizar as receitas favoritas

  • Acessar a tela de detalhes da receita, vizualizar seus ingredientes, modo de preparo, video explicativo do passo a passo da receita, além de algumas sugestões e ao final da tela, iniciar a receita

  • Ainda na tela de detalhes, também é possível salvar a receita em favoritos e compartilhar a receita com um amigo

  • Ao iniciar a receita, é possível selecionar alguns checkbox conforme a pessoa usuária tenha os ingredientes, ler o modo de preparo e ao final da tela, finalizar a receita

📝 Habilidades

Além da utilização de 2 APIs distintas (comidas e bebidas). Nesse projeto, fomos capazes de:

  • Utilizar a Context API do React para gerenciar estado

  • Utilizar o React Hook useState

  • Utilizar o React Hook useContext

  • Utilizar o React Hook useEffect

  • Utilizar o React Router Dom

  • Escrever testes utilizando TDD, com RTL e Jest, para garantir que a aplicação possua uma boa cobertura de testes e assim manter a qualidade do código.

Orientações

🛠 Como clonar o repositório?
  1. Clone o repositório
  • Use o comando: git clone git@github.com:bruna-moraes/cooking-art-app.git.
  • Entre na pasta do repositório que você acabou de clonar:
    • cd cooking-art-app
  1. Instale as dependências e inicialize o projeto
  • Instale as dependências:
    • npm install
  • Inicialize o projeto:
    • npm start (uma nova página deve abrir no seu navegador com a aplicação funcionando)
💻 Protótipo do projeto no Figma

Além da qualidade do código e do atendimento aos requisitos, um bom layout é um dos aspectos responsáveis por melhorar a usabilidade de uma aplicação, além de torná-la mais atraente.

Para isso, criamos esse protótipo do Figma para gerar mais valor ao nosso projeto!