Esta foi uma aplicação incrível que tive a oportunidade de desenvolver durante o módulo de Front end na Trybe.
O objetivo do projeto era desenvolver um app de receitas, e para isto utilizamos React Hooks e Context API.
Acesse o app Taste & Travel pelo link: https://projeto-app-receitas-sigma.vercel.app/
A aplicação foi pensada para ser usada na versão mobile. Pensando nisso, para melhor visualização utilize a resolução 360 x 650 pixel
-
React
- React Router
- React Hooks
- React Context API
-
Usamos o método
fetchpara chamar a API. -
As APIs utilizadas no projeto foram:
The Meal DB e The CocktailDB -
A estilização foi feita inteiramente usando CSS puro
- Login
O e-mail é verificado usando regex, assim como a senha. A senha deve ter mais de 6 caracteres. Só então o botão de login é habilitado.
Quando isso acontece, um localStorage é configurado com a chave "email" e valor como o e-mail que o usuário digitou.
- Explorar
Aqui a pessoa usuária tema opção de explorar receitas filtrando por ingredientes, nacionalidade da receita ou uma opção aleatória chamada "Me surpreenda!"
- Pagina principal de receitas
A pessoa usuária pode pesquisar por uma refeição específica ou listar por categorias. No rodapé, você tem a opção de navegar para as páginas exclusivas de comidas ou bebidas ou ainda para a aba explorar.
- Perfil
Na pagina de perfil, a pessoa usuária pode ver as receitas que ela já finalizou, receitas favoritadas e fazer logout.
- Exemplo de receita em progresso
Exemplo de uma pagina de receita em progresso, ao marcar todos os ingredientes como concluídos o botão de finalizar receita é habilitado e ao clicar nele a receita é adicionada a aba de receitas prontas
- Clonar o repositório
- Instalar dependências com
npm install - Entre na pasta do projeto e execute
npm start - Pronto, projeto rodando em:
http://localhost:3000/
Protótipo desenvolvido pelo Luiz Tharik e utilizado como base para a estilização original do projeto: Imagem - protótipo