https://github.com/joaoespacheco/trybe-project-20-recipes-app
Aplicação front-end com receitas de comidas e bebidas
https://github.com/joaoespacheco/trybe-project-20-recipes-app
context-api css-modules html javascript react react-router react-testing-library
Last synced: 4 months ago
JSON representation
Aplicação front-end com receitas de comidas e bebidas
- Host: GitHub
- URL: https://github.com/joaoespacheco/trybe-project-20-recipes-app
- Owner: joaoespacheco
- Created: 2022-11-14T22:21:12.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-01-12T02:28:35.000Z (over 2 years ago)
- Last Synced: 2025-01-22T09:33:17.796Z (5 months ago)
- Topics: context-api, css-modules, html, javascript, react, react-router, react-testing-library
- Language: JavaScript
- Homepage: https://recipes-app-joaoespacheco.vercel.app/
- Size: 600 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Recipes App 👨🏽🍳
## 📄 Sobre:
Projeto desenvolvido em grupo durante o módulo de front-end do curso de desenvolvimento web da [Trybe](https://www.betrybe.com/).
Neste projeto foi desenvolvido uma aplicação com receitas de comidas e bebidas.
Através da aplicação os usuários poderão:
> * Logar no aplicativo
> * Selecionar receitas de comidas ou de bebidas
> * Filtrar as receitas por nome, ingrediente ou tipo
> * Favoritar ou compartilhar as receitas
> * Acessar a tela de preparo
> * Visualizar as receitas finalizadas
> * Visualizar as receitas favoritadas
> * Realizar o logout da aplicação
Os dados das receitas utilizadas no projeto foram obtidos através das API's [TheMealDB](https://www.themealdb.com/) e [TheCocktailDB](https://www.thecocktaildb.com/api.php)
Para o gerenciamento do estado global foi utilizado Context API.
Também foram realizados testes unitários utilizando React Testing Library.
Durante a elaboração do projeto foram utilizadas metodologias de desenvolvimento ágil.
Desempenho
Aprovado com 100% de desempenho em todos os requisitos
Requisitos
Requisitos obrigatórios:
Testes unitários:
1. Desenvolva os testes unitários de maneira que a cobertura seja de, no mínimo, 90%
Tela de login:
2. Crie todos os elementos que devem respeitar os atributos descritos no protótipo para a tela de login
3. Desenvolva a tela de maneira que a pessoa consiga escrever seu email no input de email e sua senha no input de senha
4. Desenvolva a tela de maneira que o formulário só seja válido após um email válido e uma senha de mais de 6 caracteres serem preenchidos
5. Após a submissão do formulário, salve no localStorage o e-mail da pessoa usuária na chave user e os tokens nas chaves mealsToken e cocktailsToken
6. Redirecione a pessoa usuária para a tela principal de receitas de comidas após a submissão e validação com sucesso do login
Header:
7. Implemente o header de acordo com a necessidade de cada tela
8. Redirecione a pessoa usuária para a tela de perfil ao clicar no botão de perfil
9. Desenvolva o botão de busca que, ao ser clicado, a barra de busca deve aparecer. O mesmo serve para escondê-la
Barra de buscas - Header:
10. Implemente os elementos da barra de busca respeitando os atributos descritos no protótipo
11. Implemente 3 radio buttons na barra de busca: Ingredient, Name e First letter
12. Busque na API de comidas caso a pessoa esteja na página de comidas, e na API de bebidas caso esteja na de bebidas
13. Redirecione para a tela de detalhes da receita caso apenas uma receita seja encontrada, com o ID da mesma na URL
14. Mostre as receitas em cards, caso mais de uma receita seja encontrada
15. Exiba um alert caso nenhuma receita seja encontrada
Menu inferior:
16. Implemente o menu inferior posicionando-o de forma fixa e contendo 2 ícones: um para comidas e outro para bebidas
17. Exiba o menu inferior apenas nas telas indicadas pelo protótipo
18. Redirecione a pessoa usuária para a tela correta ao clicar em cada ícone no menu inferior
Tela principal de receitas:
19. Carregue as 12 primeiras receitas de comidas ou bebidas, uma em cada card
20. Implemente os botões de categoria para serem utilizados como filtro
21. Implemente o filtro das receitas por meio da API ao clicar no filtro de categoria
22. Implemente o filtro como um toggle, o qual se for selecionado novamente, o app deve retornar as receitas sem nenhum filtro
23. Redirecione a pessoa usuária ao clicar no card para a tela de detalhes, que deve mudar a rota e conter o id da receita na URL
Tela de detalhes de uma receita:
24. Realize uma request para a API passando o id da receita que deve estar disponível nos parâmetros da URL
25. Desenvolva a tela de modo que contenha uma imagem da receita, o título, a categoria em caso de comidas e se é ou não alcoólico em caso de bebidas, uma lista de ingredientes seguidos pelas quantidades, instruções, um vídeo do youtube "embedado" e recomendações
26. Implemente as recomendações. Para receitas de comida, a recomendação deverá ser bebida, já para as receitas de bebida a recomendação deverá ser comida
27. Implemente os 6 cards de recomendação, mostrando apenas 2. O scroll é horizontal, similar a um carousel
28. Desenvolva um botão de nome "Start Recipe" que deve ficar fixo na parte de baixo da tela o tempo todo
29. Implemente a solução de forma que, caso a receita já tenha sido feita, o botão "Start Recipe" desapareça
30. Implemente a solução de modo que, caso a receita tenha sido iniciada mas não finalizada, o texto do botão deve ser "Continue Recipe"
31. Redirecione a pessoa usuária caso o botão "Start Recipe" seja clicado, a rota deve mudar para a tela de receita em progresso
32. Implemente um botão de compartilhar e um de favoritar a receita
33. Implemente a solução de forma que, ao clicar no botão de compartilhar, o link da receita dentro do app deve ser copiado para o clipboard e uma mensagem avisando que o link foi copiado deve aparecer na tela em uma tag HTML
34. Salve as receitas favoritas no localStorage na chave favoriteRecipes
35. Implemente o ícone do coração (favorito) de modo que: deve vir preenchido caso a receita esteja favoritada e "despreenchido" caso contrário
36. Implemente a lógica no botão de favoritar. Caso seja clicado, o ícone do coração deve mudar seu estado atual, caso esteja preenchido deve mudar para "despreenchido" e vice-versa
Tela de receita em progresso:
37. Desenvolva a tela de modo que contenha uma imagem da receita, o título, a categoria em caso de comidas e se é ou não alcoólico em caso de bebidas, uma lista de ingredientes com suas respectivas quantidades e instruções
38. Desenvolva um checkbox para cada item da lista de ingredientes
39. Implemente uma lógica que ao clicar no checkbox de um ingrediente, o nome dele deve ser "riscado" da lista
40. Salve o estado do progresso, que deve ser mantido caso a pessoa atualize a página ou volte para a mesma receita
41. Desenvolva a lógica de favoritar e compartilhar. A lógica da tela de detalhes de uma receita se aplica aqui
42. Implemente a solução de modo que o botão de finalizar receita ("Finish Recipe") só pode estar habilitado quando todos os ingredientes estiverem _"checkados"_ (marcados)
43. Redirecione a pessoa usuária após clicar no botão de finalizar receita ("Finish Recipe"), para a página de receitas feitas, cuja rota deve ser /done-recipes
44. Implemente os elementos da tela de receitas feitas respeitando os atributos descritos no protótipo
Tela de receitas feitas:
45. Desenvolva a tela de modo que, caso a receita do card seja uma comida, ela deve possuir: a foto da receita, nome, categoria, nacionalidade, a data em que a pessoa fez a receita, as 2 primeiras tags retornadas pela API e um botão de compartilhar
46. Desenvolva a tela de maneira que, caso a receita do card seja uma bebida, ela deve possuir: a foto da receita, o nome, se é alcoólica, a data em que a pessoa fez a receita e um botão de compartilhar
47. Desenvolva a solução de modo que o botão de compartilhar deve copiar a URL da tela de detalhes da receita para o clipboard
48. Implemente 2 botões que filtram as receitas por comida ou bebida e um terceiro que remove todos os filtros
49. Redirecione para a tela de detalhes da receita caso seja clicado na foto ou no nome da receita
Tela de receitas favoritas:
50. Implemente os elementos da tela de receitas favoritas (cumulativo com os atributos em comum com a tela de receitas feitas), respeitando os atributos descritos no protótipo
51. Desenvolva a tela de modo que, caso a receita do card seja uma comida, ela deve possuir: a foto da receita, nome, categoria, nacionalidade, um botão de compartilhar e um de "desfavoritar"
52. Desenvolva a tela de modo que, caso a receita do card seja uma bebida, ela deve possuir: a foto da receita, nome, se é alcoólica ou não, um botão de compartilhar e um de "desfavoritar"
53. Desenvolva a solução de modo que o botão de compartilhar deve copiar a URL da tela de detalhes da receita para o clipboard
54. Desenvolva a solução de modo que o botão de "desfavoritar" deve remover a receita da lista de receitas favoritas do localStorage e da tela
55. Implemente 2 botões que filtram as receitas por comida ou bebida e um terceiro que remove todos os filtros
56. Redirecione a pessoa usuária ao clicar na foto ou no nome da receita, a rota deve mudar para a tela de detalhes daquela receita
Tela de perfil:
57. Implemente os elementos da tela de perfil respeitando os atributos descritos no protótipo
58. Implemente a solução de maneira que o e-mail da pessoa usuária deve estar visível
59. Implemente 3 botões: um de nome "Done Recipes", um de nome "Favorite Recipes" e um de nome "Logout"
60. Redirecione a pessoa usuária que, ao clicar no botão de "Done Recipes", a rota deve mudar para a tela de receitas feitas
61. Redirecione a pessoa usuária que, ao clicar no botão de "Favorite Recipes", a rota deve mudar para a tela de receitas favoritas
62. Redirecione a pessoa usuária que ao clicar no botão de "Logout", o localStorage deve ser limpo e a rota deve mudar para a tela de login
Imagens do projeto
Versão mobile
### Tela de login:
### Tela de buscas:
### Tela de receitas:
### Tela de preparo:
### Receitas prontas:
### Receitas favoritas:
### Tela de profile:
### [👨💻 Clique aqui para acessar o projeto em seu navegador](https://recipes-app-joaoespacheco.vercel.app/)
## ⚙️ Execução
Faça o clone deste repositório com o seguinte comando:
git clone [email protected]:joaoespacheco/Trybe-Project-20-recipes-app.git
Dentro da pasta raiz do projeto, instale as dependências com o seguinte comando:
npm install
Inicie a aplicação com o comando abaixo:
npm start
Para exeutar os testes deve-se utilizar o seguinte comando:
npm test
Caso queira executar um teste específico, rode o comando abaixo:
npm test
Para executar e verificar a cobertura de testes, rode o comando abaixo:
npm run test-coverage
## 🤹🏽 Habilidades Desenvolvidas:
* Trabalhar em grupo e em pair programming utilizando metodologias de desenvolvimento ágil
* SCRUM
* KANBAN
* Desenvolver uma aplicação react
* Utilizar a Context API do React para gerenciar estado
* Utilizar o React Hook useState
* Utilizar o React Hook useContext
* Utilizar o React Hook useEffect
* Criar Hooks customizados
* Consumir dados de uma API
* Utilizar React Router
* Realizar testes unitários utilizando React Testing Library
* Criar layout com foco em dispositivos móveis
## 🧰 Ferramentas:
* HTML
* CSS
* CSS.modules
* JavaScript
* React
* React Context API
* React Router
* React Testing Library
* React Icons
* Trello
## 📝 Desenvolvido por:
* [João Emanuel Soares Pacheco](https://github.com/joaoespacheco)
* [Vinícius Barbosa](https://github.com/ViniciusBF)
* [Pedro Jorge Machado](https://github.com/PedroJoMa)
* [João Sousa](https://github.com/rsajoao)