Estudo de caso
Receitas da Gi
Aplicativo que desenvolvi para minha mãe guardar e consultar as receitas dela pelo celular, com front-end em React e API própria em Node.js/Express com MySQL.
- Estágio
- MVP funcional
- Período
- 2026
- Papel
- Front-end, API e banco
- Tipo
- Projeto pessoal
O problema
Minha mãe queria um lugar para guardar as receitas dela e encontrá-las rápido na hora de cozinhar, usando o celular.
Uma receita tem partes com usos diferentes: a lista de ingredientes, conferida antes de começar, e o modo de preparo, acompanhado passo a passo. O app precisava tornar o cadastro simples, permitir achar uma receita lembrando só de um ingrediente e ajudar a não se perder durante o preparo.
A solução
Um aplicativo web configurado como PWA, com service worker, pensado para o celular, com navegação inferior, categorias editáveis e uma tela de receita dividida em ingredientes, modo de fazer e links.
Cada receita é cadastrada em campos estruturados: ingredientes com quantidade, unidade e nome, passos numerados, tempo de preparo, porções e dificuldade. É essa estrutura que permite buscar por ingrediente e marcar os ingredientes já separados durante o preparo.
Minha participação
Desenvolvi o aplicativo para minha mãe e modelei as receitas como dados estruturados, com ingredientes, passos e links em tabelas próprias. Criei a API em Node.js/Express com MySQL e migrei o front-end, que na primeira versão usava o Supabase, para consumir essa API.
Fluxos demonstráveis
Cadastrar uma receita
- 1Toca no botão central “+” da navegação.
- 2Preenche nome, categoria, tempo de preparo, porções e dificuldade.
- 3Adiciona os ingredientes linha a linha, com quantidade, unidade e nome, e os passos do modo de fazer.
- 4Se quiser, inclui uma foto pela câmera do celular ou colando uma imagem ou um link. A receita é salva pela API e aparece na categoria.
Encontrar uma receita por ingrediente
- 1Abre a busca e digita um ingrediente, por exemplo “ovos”.
- 2A lista mostra as receitas que usam esse ingrediente, além das que combinam com o nome ou a categoria.
- 3Toca na receita para abrir os detalhes.
Cozinhar com o checklist
- 1Abre a receita na aba Ingredientes.
- 2Toca em cada ingrediente já separado, que fica marcado e riscado.
- 3Passa para a aba Modo de Fazer e segue os passos numerados.
- 4As marcações ficam salvas no próprio aparelho e continuam lá se o app for fechado.
Telas do app
As telas foram capturadas com as receitas de exemplo do app, sem as receitas reais da minha mãe. O fundo listrado aparece porque as receitas de exemplo foram carregadas sem foto.
Desafios técnicos
Dados estruturados em vez de texto corrido
Guardar a receita como um texto único seria mais simples de cadastrar, mas impediria a busca por ingrediente e o checklist. Separei quantidade, unidade e nome em linhas próprias, em tabelas de ingredientes e passos ligadas à receita e com a ordem preservada.
Migração para uma API própria
O app nasceu usando o Supabase direto no front-end. Depois escrevi uma API em Express com MySQL e troquei a camada de dados do front-end para consumi-la, mantendo o mesmo formato de receita nas telas.
Sensação de app no celular
Além da navegação inferior e do modo escuro, integrei o botão voltar do celular ao histórico do navegador: ele leva à tela anterior do app em vez de fechar a página.
Estágio atual
MVP funcional, com a API publicada: cadastro, busca e consulta de receitas funcionam de ponta a ponta, do app à API e ao banco de dados.
- Não há link público do front-end nesta página.
- As categorias personalizadas ficam salvas no próprio aparelho e não são sincronizadas entre dispositivos.
- O app busca as receitas na API; a instalação e o uso sem conexão não foram testados.