Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/coelhoreinaldo/recipes-app
A mobile recipe app powered by React.js, TypeScript, and Tailwind CSS. Explore, cook, and share delightful recipes with ease. Happy cooking!
https://github.com/coelhoreinaldo/recipes-app
context-api jest react-hooks reactjs rtl tailwind typescript vitest
Last synced: 27 days ago
JSON representation
A mobile recipe app powered by React.js, TypeScript, and Tailwind CSS. Explore, cook, and share delightful recipes with ease. Happy cooking!
- Host: GitHub
- URL: https://github.com/coelhoreinaldo/recipes-app
- Owner: coelhoreinaldo
- Created: 2023-07-28T14:06:37.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-08-04T00:51:06.000Z (over 1 year ago)
- Last Synced: 2024-10-25T01:26:41.703Z (3 months ago)
- Topics: context-api, jest, react-hooks, reactjs, rtl, tailwind, typescript, vitest
- Language: TypeScript
- Homepage: http://www.coelhoreinaldo.dev/recipes-app/
- Size: 1.61 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🥗 Recipes APP
Acesse [aqui](https://www.coelhoreinaldo.dev/recipes-app/).
## 📘 Sobre
Um aplicativo de receitas desenvolvido em React.js para dispositivos móveis. Nele, é possível encontrar diversas receitas de bebidas e comidas, visualizar instruções e ingredientes para prepará-las, marcar suas receitas favoritas e compartilhá-las com amigos e familiares.
Esta versão é uma refatoração da primeira versão desenvolvida em grupo, disponível [aqui](https://github.com/coelhoreinaldo/cook-script). Os principais objetivos dessa refatoração foram o aprimoramento do código, a prática de TypeScript e TailwindCSS e a implementação de novas funcionalidades.
## 🧩 Funcionalidades
- Simulação de login;
- Acesso a uma variedade de receitas de comidas e/ou bebidas;
- Filtragem das receitas por tipo;
- Visualização detalhada de uma receita (ingredientes, instruções, vídeos explicativos);
- Início de uma receita e controle do progresso marcando os ingredientes utilizados;
- Finalização de uma receita;
- Adição de receitas aos favoritos;
- Visualização do perfil do usuário e acesso às receitas feitas e favoritadas.
## ⚛️ Ferramentas
O projeto foi construído utilizando as seguintes tecnologias:
- React.js com TypeScript;
- Tailwind CSS para estilização;
- Context API para gerenciamento de estado;
- Componentes Funcionais do React;
- React Router para navegação;
- React Hooks, incluindo useState, useEffect, useCallback, useMemo, etc;
- Requisições de API para obtenção de dados;
- Formulários em React;
- Testes com RTL, Jest e Vitest;
- Abordagem Mobile First para design responsivo;
- Metodologias Scrum e Kanban para gestão do projeto.
## 🛠️ Como executar o projeto?
1. Instalando dependências
`npm install`
2. Executando a aplicação
`npm run dev`
## 📝 Nota
## 🧪 Testes
Comando para executar os testes: `npm test`
## ©️ Copyright
Este projeto foi desenvolvido por mim e todos os direitos estão reservados. A pasta de mocks (/tests/mocks) foi inicialmente fornecida pela Trybe, e converti os arquivos para TypeScript para utilizá-los nos meus testes. Os assets foram providos pela Trybe e estavam disponíveis no protótipo do Figma.