Tutorial prático sobre como clonar o app viral Cal AI (rastreador de…

INEMA

Aqui está o passo a passo completo para reconstruir o app Cal AI (rastreador de calorias) sem programação, usando Lovable + n8n:

Etapa 1 – Preparação Inicial⌗

1.1. Crie contas gratuitas:⌗

Lovable.dev – para o frontend (interface visual)
n8n.io – para automações (backend)
OpenAI – para análise de imagens com GPT-4 Vision

Etapa 2 – Criando a Interface com o Lovable⌗

2.1. Crie um novo projeto no Lovable:⌗

Nome: Calorie Tracker App
Escolha como base: mobile app

2.2. Construa as telas com prompts simples:⌗

Use linguagem natural (em inglês) como estes exemplos:

Página 1 – Welcome⌗

Build a welcome screen for a calorie tracking app. Add image: [link da imagem de sanduíche] Main headline: "Calorie tracking made easy" Subtext: "Scan your food. Get your custom plan." Button: "Get Started" Style: white background, black text, full-width image, rounded corners

Página 2 – Proposta de Valor⌗

T```itle: "Cal AI creates long-term results" Add line graph: - X-axis: Month 1 to 6 - Y-axis: Weight - Line 1: Cal AI (decline) - Line 2: Traditional diet (queda e depois aumento) Caption: "80% of Cal AI users maintain weight loss after 6 months" Button: Continue Back button to Page 1

#### Página 3 – Altura e Peso

In```puts: Height (cm), Weight (kg)
Dropdown style, large input, same row
Save inputs to localStorage
Continue + Back buttons

```(Siga até a Página 8 conforme modelo do vídeo com prompts semelhantes. Posso gerar todos para você.)

---

## Eta**pa 3 – Lógica de Cálculo no Lovable

#**## 3.1. Use prompt para inserir fórmula de cálculo:

Cal```culate BMR using:
- Male: 10 * weight_kg + 6.25 * height_cm - 5 * age + 5
- Female: 10 * weight_kg + 6.25 * height_cm - 5 * age - 161
Add TDEE = BMR * activity_factor
Adjust calories: 
- Lose: TDEE * 0.8
- Maintain: TDEE
- Gain: TDEE * 1.15
Breakdown macronutrients:
- Protein = 2.2 * weight_kg
- Fat = 0.88 * weight_kg
- Carbs = restante das calorias dividido por 4
Display results and save to localStorage

-```--

## Etap**a 4 – Configurar Backend com n8n

##**# 4.1. Crie um novo workflow com os seguintes nós:

#### 1. Webh**ook (POST)

* **URL: /cal`ai-upload
* P`ayload: imagem enviada via Lovable
* Método: POST
* Tipo de dado: Binário

#### 2. Open**AI (GPT-4 Vision)

* **Operação: Image → Analyze Image
* Prompt:

Iden```tify the food and estimate nutritional values.
Return: name, calories, protein, carbs, fats

##```## 3. AI Ag**ent (opcional)

* U**se para gerar *health suggestion*
* Prompt:

Creat```e a health suggestion for the food based on its nutrition.

###```# 4. Output** Parser

* Es**trutura JSON:

{
  "d```escription": "text",
  "health_suggestion": "text",
  "calories": 0,
  "carbs": 0,
  "protein": 0,
  "fats": 0
}

####``` 5. Respon**d to Webhook

* Re**torne os dados para o frontend do Lovable

---

## Etapa **5 – Conectar Lovable ao n8n

### **5.1. Adicione no Lovable o botão de câmera:

Prompt:

Add fl```oating camera icon (bottom right).
When clicked, take a photo.
Send image to: [URL do webhook do n8n]
Display result: description + health suggestion
Save response in localStorage and update dashboard

---

Etapa 6 – Dashboard e Histórico⌗

Mostre os dados de nutrição diária com gráficos circulares
Adicione um calendário para navegar entre os dias
Seção "Recently Logged" para mostrar alimentos escaneados
Botão “Logout” limpa o localStorage e retorna à tela inicial

Etapa 7 – Teste Final⌗

Faça upload de imagens de comida real
Verifique se calorias e macros estão corretas
Confirme se o histórico é salvo corretamente
Clique em logout e veja se volta à Página 1

tem dublado em portugues

Resumo do vídeo "Como reconstruí o aplicativo viral de US\$ 30 milhões da Cal AI em minutos (sem codificação!)"

Link: https://www.youtube.com/watch?v=UAkEAFvU3VI

Visão Geral⌗

O criador clonou o app Cal AI (Cali) — um rastreador de calorias que se tornou viral com mais de 5 milhões de downloads e US\$ 30 milhões em receita anual.
A clonagem foi feita sem codificação, usando as ferramentas Lovable (para o frontend) e n8n (para backend e automações).
O app detecta alimentos com uma foto, calcula calorias e macronutrientes, e mostra o plano alimentar — tudo de forma automatizada.

Etapas e Funcionalidades Clonadas⌗

1. Interface com Lovable (sem código):

Utilizou prompts em linguagem natural para criar a interface semelhante ao Cali.
Cada tela do app foi criada passo a passo:
Página 1: Tela de boas-vindas
Página 2: Proposta de valor com gráfico
Página 3 a 7: Coleta de dados do usuário (altura, peso, gênero, objetivo, treino, etc.)
Página 8: Geração automática do plano alimentar
Dashboard: Mostra o consumo diário de calorias/macros com gráficos tipo "donut"

2. Cálculo de Macronutrientes (feito no Lovable ou n8n):

Fórmulas personalizadas para BMR, TDEE e distribuição de macros.
Inputs do usuário são armazenados no localStorage.
Opção de mostrar logs de cálculo para debug.

3. Integração com n8n (backend):

Ao tirar uma foto do alimento, o app envia via Webhook do n8n.
O n8n:
Recebe a imagem
Usa OpenAI (GPT-4 Vision) para analisar o alimento
Retorna: nome, calorias estimadas, macros, e uma dica de saúde
A resposta é armazenada e exibida no dashboard do usuário.

4. Funcionalidades extras:

Calendário semanal no topo
Histórico de refeições logadas
Botão flutuante de câmera
Função de logout que apaga todos os dados locais
Interface responsiva para celular

Destaques Técnicos⌗

Lovable:
Interface construída com ShadCN UI
Toda a UI descrita com prompts (cores, margens, fontes, ícones, etc.)
Cálculo pode ser feito direto no frontend se preferir
n8n:
Utiliza OpenAI (imagem + texto) para identificar alimentos
Inclui lógica de raciocínio com ferramenta "Think"
Saída formatada em JSON para integração com o Lovable

Conclusão⌗

O vídeo mostra que qualquer pessoa pode replicar ou criar apps parecidos com o Cal AI, mesmo sem saber programar, usando ferramentas no-code como Lovable e n8n.
Além de construir seu próprio app, é possível oferecer esse serviço como freelancer ou empreendedor digital.
Toda a automação, lógica de negócios e design pode ser feita com drag-and-drop e prompts.

se weight: target_calories = TDEE - (weight_loss_target_kg * 7700 / 7) • Maintain weight: target_calories = TDEE • Gain weight: target_calories = TDEE * 1.15

Macronutrient Breakdown (com base em kg) • Protein: protein_g = 2.2 * weight_kg protein_cal = protein_g * 4 • Fat: fat_g = 0.88 * weight_kg fat_cal = fat_g * 9 • Carbs: carbs_cal = target_calories - (protein_cal + fat_cal) carbs_g = carbs_cal / 4

Retornar e exibir: calorias, carboidratos (g), proteínas (g) e gorduras (g)

Passo 10 Após confirmação do cálculo, o botão Let’s get started! leva à Home Screen. O app deve armazenar estado “Logged In” para abrir diretamente o dashboard nos retornos.

Home Screen: Seção 1 – Top Bar e Logo • Logo: Cal AI • Calendário semanal (segunda a domingo), dia atual com fundo preenchido, demais com borda pontilhada • Indicador de streak

Seção 2 – Resumo Diário • Card de calorias: valor grande, subtexto “Calories over/under”, anel de progresso, sombra sm, sem bordas • Três cards de macronutrientes: Protein, Carbs, Fats, com quantidade em negrito, label semi-bold, gráfico de doughnut, mesma estilização

Seção 3 – Recentemente Registrado • Lista horizontal de entradas de refeição (nome, calorias, timestamp), cards com sombra sm e cantos arredondados

Seção 4 – Floating Action Button • Botão circular no canto inferior direito com ícone de câmera para log via foto, ao clicar abre câmera ao vivo e botão de foto

Passo 11 – Conexão n8n Se o usuário selecionar imagem, enviar POST para https://proxa.app.n8n.cloud/webhook/xxxxxxxxxxxxxxxxx com a imagem no payload.

Resposta esperada:

[ { "output": { "description": "Descrição do alimento", "health_suggestion": "Sugestão de saúde", "calories": 550, "carbs": 40, "protein": 30, "fats": 30 } } ]

Após receber, mostrar página de resultado com description e health_suggestion, armazenar em localStorage com data atual e atualizar estatísticas do dashboard.

Dashboard: alocar informação nutricional ao longo do dia e mostrar resumo diário de calorias, carbs, protein e fats. Picker de data clicável para consultar histórico. Em “Recently logged” mostrar corretamente o registro de escaneamento.

n8n Setup: Lembre-se de ativar o workflow e usar a URL de produção.

Image Analysis: Identificar alimento e estimar nutrientes para porção típica, indicando suposições se necessário.

AI Agent: Parsear conteúdo para JSON usando {{ \$json.content }} e adicionar health suggestion.

Structured Output Parser

{"description": "text", "health_suggestion": "text", "calories": 0, "carbs": 0, "protein": 0, "fats": 0 }

eda inicial e recuo • Legenda abaixo do gráfico: 80% of Cal AI users maintain their weight loss even 6 months later • Botão: Continue • Botão de voltar para Página 1 • Não há campos de entrada nesta página.

Passo 3 Conectar Página 2 à Página 3 (Height and Weight)

Página 3: Altura e Peso • Título: Height & weight • Subtítulo: This will be used to calibrate your custom plan. • Entradas: Altura (cm) e Peso (kg), cada uma em dropdown nativo e no mesmo alinhamento de linha • Botão: Continue • Botão de voltar para Página 2 • Salvar inputs (altura e peso) em localStorage para usar no cálculo da página final.

Passo 4 Conectar Página 3 à Página 4 (Workout Frequency)

Página 4: Frequência de Exercícios • Título: How many workouts do you do per week? • Subtítulo: This will be used to calibrate your custom plan. • Três opções selecionáveis (botões com fundo cinza, hover mais claro e borda preta quando ativo): – 0–2: Workouts now and then – 3–5: A few workouts per week – 6+: Dedicated athlete • Botão: Continue • Botão de voltar para Página 3 • Salvar input de frequência de exercícios para cálculo do multiplicador de atividade.

Passo 5 Conectar Página 4 à Página 5 (Goal Selection)

Página 5: Seleção de Objetivo • Título: What is your goal? • Subtítulo: This helps us generate a plan for your calorie intake. • Três opções selecionáveis: – Lose weight – Maintain – Gain weight • Botão: Continue • Botão de voltar para Página 4 • Salvar input de objetivo para ajustar o TDEE no cálculo final.

Passo 6 Conectar Página 5 à Página 6 (Gender Selection)

Página 6: Seleção de Gênero • Título: Choose your Gender • Subtítulo: This will be used to calibrate your custom plan. • Três opções selecionáveis: – Male – Female – Other • Botão: Continue • Botão de voltar para Página 5 • Salvar input de gênero para fórmula de BMR.

Passo 7 Conectar Página 6 à Página 7 (Birthdate)

Página 7: Data de Nascimento • Título: When were you born? • Subtítulo: This will be used to calibrate your custom plan. • Entradas em dropdown nativo para Mês, Dia e Ano, alinhados na mesma linha • Botão: Continue • Botão de voltar para Página 6 • Salvar data de nascimento para cálculo de idade.

Passo 8 Conectar Página 7 à Página 8 (Custom plan page)

Página 8: Resumo do Plano Seção principal: • Ícone de checkmark (✔️) • Headline: Congratulations your custom plan is ready! • Subtexto: You should lose: xx lbs by xxxx (exemplo: perder 2 kg até 7 de maio — data calculada como uma semana após a confirmação)

Seção de Recomendação Diária: • Subtítulo: Daily recommendation • Nota: You can edit this anytime • Quatro métricas em grade 2x2 com ícones, valores e anéis de progresso:

Calories – ícone de chama, xxx calories, anel circular
Carbs – ícone de trigo, xxx g, anel laranja
Protein – ícone de drumstick, xxx g, anel vermelho
Fats – ícone de gota, xxx g, anel azul Cada item com ícone de lápis para edição

Seção inferior: • Botão: Let’s get started! (fundo preto, texto branco)

Lógica de cálculo: Unit Conversion

weight_kg = weight_lbs / 2.205 height_cm = height_ft * 30.48 + height_in * 2.54

BMR (Mifflin-St Jeor) • Male: BMR = 10 * weight_kg + 6.25 * height_cm - 5 * age + 5 • Female: BMR = 10 * weight_kg + 6.25 * height_cm - 5 * age - 161

Activity Factor • 0–2 workouts: 1.2 • 3–5 workouts: 1.375 • 6+ workouts: 1.55 TDEE = BMR × activity_factor

Goal Adjustment • Lose weight: TDEE × 0.8 • Maintain: TDEE • Gain weight: TDEE × 1.15

Macronutrient Breakdown • Protein: 1.0g por libra de peso protein_cal = protein_g * 4 • Fat: 0.4g por libra de peso fat_cal = fat_g * 9 • Carbs: carbs_cal = TDEE - (protein_cal + fat_cal) carbs_g = carbs_cal / 4

Exibir todas as etapas de cálculo em um log de debug

Passo 9 Ajustar a lógica para usar kg e cm

Age Calculation: calcular idade a partir da data de nascimento BMR Calculation: BMR = 10 * weight_kg + 6.25 * height_cm - 5 * age + 5

Activity Factor: • 0–2 workouts/week → 1.2 • 3–5 workouts/week → 1.375 • 6+ workouts/week → 1.55

TDEE Calculation: TDEE = BMR * activity_factor

Goal Adjustment: • Lo

"al24 Lovable + n8n = Cal.ai

Observações: O mesmo prompt pode produzir saídas diferentes a cada vez. Melhores práticas para criar prompts para o Lovable AI: Forneça uma descrição de projeto clara e detalhada. Comece com uma visão geral em linguagem natural que delineie o propósito do seu aplicativo, suas funcionalidades principais e fluxos de usuário desejados para orientar a geração de código inicial do Lovable. Especifique seu stack tecnológico e integrações desde o início. Indique frameworks preferidos (por exemplo, React, TypeScript), ferramentas de estilo (por exemplo, Tailwind) e qualquer serviço de API ou banco de dados (por exemplo, Stripe, Supabase) para garantir que o código gerado esteja alinhado com seu ambiente. Divida requisitos complexos em etapas iterativas."

24 Lovable + n8n = Cal.ai

Observações: o mesmo prompt pode produzir saídas diferentes a cada vez.

Melhores práticas para criar prompts para o Lovable AI • Forneça uma descrição de projeto clara e detalhada. Comece com uma visão geral em linguagem natural que aponte o propósito do seu app, suas funcionalidades principais e os fluxos de usuário desejados para orientar a geração inicial de código pelo Lovable.

• Especifique sua stack e integrações desde o início. Indique frameworks preferidos (por exemplo, React, TypeScript), ferramentas de estilo (por exemplo, Tailwind) e quaisquer serviços de API ou banco de dados (por exemplo, Stripe, Supabase) para garantir que o código gerado esteja alinhado com seu ambiente.

• Divida requisitos complexos em etapas iterativas. Em vez de sobrecarregar um único prompt, decomponha recursos avançados (autenticação, modelos de dados, integrações de terceiros) em solicitações sequenciadas, revisando e testando cada saída antes de avançar.

• Use prompts de acompanhamento direcionados para refinamento e depuração. Quando encontrar erros ou precisar de ajustes — como tipos conflitantes ou ajustes de interface — peça ao Lovable para analisar, explicar e corrigir o código, guiando-o até um produto final polido.

Nossos exemplos de prompts

Passo 1 Build an Onboarding Flow for a Calorie Tracking App like Cal.ai

Descrição: criar um fluxo de onboarding para um app de rastreamento de calorias. O fluxo deve coletar informações do usuário e gerar uma recomendação diária personalizada de calorias e macronutrientes. Use interface minimalista e moderna semelhante ao Cal.ai, de acordo com as capturas de tela fornecidas. O objetivo do app é gerar um plano personalizado para o usuário perder, manter ou ganhar peso.

Especificações: • Aplicativo móvel fixo para tela de celular. • Fundo branco e texto preto como cores principais. • Cada botão de opção (radio) deve ser totalmente clicável, não apenas o círculo. • Use a fonte do Google conforme link:

fonts.googleapis.com ↗">
fonts.gstatic.com ↗" crossorigin>
fonts.googleapis.com/css2 ↗" rel="stylesheet">
• Use shadcn ui e amarelo como cor principal, raio de borda de 1rem.

Tarefas:

Preparar a página 1 (Welcome Screen) • Centralizar a imagem (sanduíche) de URL: https://images.unsplash.com/photo-1592415486689-125cbbfcbee2?q=80\&w=800\&auto=format\&fit=crop\&ixlib=rb-4.0.3\&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D • Título principal: Calorie tracking made easy • Subtítulo: Scan your food. Get your custom plan. • Botão de chamada para ação: Get Started • Não incluir botão de login ou botão de voltar.

Passo 2 Conectar Página 1 à Página 2 (Value Proposition)

Página 2: Proposição de Valor • Título: Cal AI creates long-term results • Incluir gráfico de linha comparativo: – Eixo X: do Mês 1 ao Mês 6 – Eixo Y: Peso – Linha 1 (Cal AI): queda constante e manutenção de peso – Linha 2 (Traditional Diet):

al24 - n8n + lovable clone qq app (exemplo Cal.ai)

chatgpt.com ↗