Projeto interno · App da Mentoria

Como construir o app da Mariana, do zero à entrega

Este é o roteiro completo. Serve para você ler e entender, e serve para colar no Claude Code fase por fase. Se seguir na ordem, o app fica pronto e funcionando antes de 06/08.

⏱ ~20 dias 🎯 Entrega 06/08 👤 Executor: Vinícius 🤖 Construído com Claude Code

00 · Como usar este guia

Você não precisa saber programar. Você vai orquestrar o Claude Code: cada passo tem um bloco Cole no Claude com o texto pronto. Você cola, o Claude executa, e você valida pelo checklist do passo.

Abra o Claude Code numa pasta nova (ex: ~/mariana-app).
Comece pela Fase 0.0 (prompt de abertura). Faça uma etapa por vez, na ordem.
Depois de cada bloco, confira o "✔ Validar". Só avance quando estiver verde.
Se algo falhar, cole o erro no Claude e peça pra corrigir. Não pule etapas.

💡 Regra de ouro: quando estiver em dúvida, peça ao Claude "explique o que você vai fazer antes de fazer" e "não instale nada além do necessário". Escopo enxuto = entrega no prazo.

01 · O que vamos construir

Um web app instalável (PWA) para as alunas da mentoria de 16 semanas da Mariana. Sem loja de aplicativos. Duas experiências:

Quem	O que faz no app
Aluna	Uso diário: frase do dia + energia do dia (astrologia) → check-in "Como está seu estado de espírito hoje?" (6 estados) → prática indicada pro estado → coerência cardíaca 3×/dia (com lembretes) → journal com a pergunta reflexiva do dia → Dicas da Mari → evolução dia a dia.
Mentora (Mariana)	Painel da turma: adesão, evolução do estado de espírito, journals com acesso total (resumo + texto completo — decisão do kickoff 18/07), alertas de aluna sumida/estado em queda.

Referência de direção visual: wireframe.7tima.com.br/mariana-app-proto/ (protótipo navegável, já atualizado com as decisões do kickoff de 18/07). ⚠️ Ainda NÃO aprovado pela Mariana — e vai receber a identidade visual dela (logo, cores, fontes do designer Felipe) antes de virar interface final.

⚠️ Pré-requisito de design: aplicar a identidade visual da Mariana no protótipo e aprovar com ela. A base técnica (Fase 0: projeto, login, banco) pode começar em paralelo, mas a interface definitiva só é montada depois do protótipo aprovado. Sem o "ok" dela, não finalize telas.

📌 Decisões do kickoff (18/07) que mandam no produto: (1) home é diária — nunca "Semana 1/Semana 2"; (2) check-in = "Como está seu estado de espírito hoje?" com 6 estados: animada, entusiasmada, neutra, um pouco cansada, ansiosa, depressiva; (3) mentora tem acesso total ao journal (o app é a anamnese da tese dela — consentimento LGPD explícito obrigatório); (4) coerência cardíaca 3×/dia com lembrete em 3 horários; (5) nova aba "Dicas da Mari"; (6) anamnese início/meio/fim (médica integrativa); (7) tom acolhedor "como a Mari pensa" — vocabulário e repertório em clientes/mariana-mentoria/docs/metodo-mariana-v0.md.

02 · Arquitetura

PWA · Next.js na Vercelapp da aluna + painel da mentora

↓

Supabaselogin · banco · segurança RLS · storage · pgvector

↓

Claude · via Vercel AI Gatewayindica prática pelo humor + orienta "na voz dela" (RAG)

Camada	Tecnologia	Por quê
Front + deploy	Next.js (App Router) + Tailwind + shadcn/ui, na Vercel	rápido, PWA fácil, deploy automático
Login + banco + segurança	Supabase (Postgres, Auth, RLS, Storage, pgvector)	tudo pronto de fábrica, seguro pra dado sensível
IA	Claude via Vercel AI Gateway	indicação de prática + orientação com o método dela

03 · Contas e chaves (fazer antes)

🏛️ Regra central deste projeto: todas as contas e serviços são criados no nome e nos dados da Mariana (e-mail e cartão dela). Ela é a dona da infraestrutura e do código (contrato, cláusulas 3.3 e 4.2), e os custos caem direto no cartão dela. A 7Tima entra em cada serviço como colaborador/admin para construir e manter. Nada fica centralizado na conta da 7Tima.

Crie as contas abaixo com os dados da Mariana e guarde as chaves num cofre seguro. O Claude pede cada uma na hora certa.

Conta	Titular	O que pegar
GitHub	Mariana (7Tima colaboradora)	repositório novo `mariana-app` (privado)
Vercel	Mariana (7Tima membro)	conectar ao repo · variáveis de ambiente
Supabase	Mariana (7Tima membro)	projeto novo → `Project URL`, `anon key`, `service_role key`
Vercel AI Gateway	Mariana	chave da API (para chamar o Claude)

🔒 Nunca cole a service_role key nem chaves de IA em arquivos que vão pro GitHub. Elas vão só nas Environment Variables da Vercel e no arquivo local .env.local (que já vem ignorado pelo git).

04 · Prompt de abertura

Este é o primeiro texto que você cola no Claude Code. Ele dá todo o contexto pra IA "assumir o projeto".

Cole no Claude — passo 0.0

Você é o engenheiro responsável por construir um web app (PWA) para a mentoria da Mariana, seguindo um guia de arquitetura definido pela 7Tima. Regras de trabalho:

- Trabalhe em fases, uma de cada vez. Antes de cada fase, explique em 3 linhas o que vai fazer e espere meu "pode ir".
- Stack fixa: Next.js (App Router) + TypeScript + Tailwind + shadcn/ui na Vercel; Supabase (Postgres, Auth, RLS, Storage, pgvector); Claude via Vercel AI Gateway. Não troque a stack.
- Não instale dependências além do necessário. Priorize simplicidade e prazo (entrega 06/08).
- Idioma da interface: português do Brasil.
- Design: a direção visual é o protótipo navegável em https://wireframe.7tima.com.br/mariana-app-proto/ (paleta placeholder 7Tima até chegar a identidade da Mariana; fontes Fraunces para títulos, Sora para texto, JetBrains Mono para números). ATENÇÃO: esse protótipo ainda NÃO está aprovado e vai receber a identidade visual dela. Comece pela base técnica; monte a UI definitiva só depois do "ok" dela.
- Produto (decisões do kickoff 18/07, inegociáveis): home DIÁRIA (nunca "Semana N") na ordem saudação → frase do dia → energia do dia → "Como está seu estado de espírito hoje?" com 6 estados (animada, entusiasmada, neutra, um_pouco_cansada, ansiosa, depressiva) → prática indicada com variação. Coerência cardíaca 3×/dia com lembretes (web push). Journal abre com pergunta reflexiva do dia; a MENTORA TEM ACESSO TOTAL ao journal (resumo + texto completo) — o aceite LGPD deve dizer isso com todas as letras. Aba "Dicas da Mari". Anamnese em 3 fases (início/meio/fim). Tom de todo o copy: acolhedor, "como a Mari pensa" — use o vocabulário do dossiê do método (me peça o arquivo metodo-mariana-v0.md).
- Contas e infraestrutura: tudo é criado nos dados da Mariana (cliente), que é a dona e paga os custos. A 7Tima entra como colaborador. Não centralize nada na conta da 7Tima.
- Dados são sensíveis (estado de espírito, diário). Segurança por RLS no banco é obrigatória.

Confirme que entendeu e liste as fases que vamos seguir. Ainda NÃO comece a codar.

05 · Fase 0 — Fundação

Projeto no ar (vazio), login funcionando, banco criado.
Janela: 17–22/07 · em paralelo: receber o material do método da Mariana

0.1 — Criar o projeto e publicar

Cole no Claude

Crie um projeto Next.js (App Router, TypeScript) com Tailwind e shadcn/ui, já configurado como PWA instalável (manifest + service worker, ícones com o "7" da 7Tima). Configure as fontes Fraunces, Sora e JetBrains Mono. Crie o layout base com a paleta do guia. Depois me diga exatamente os comandos para subir no GitHub e conectar na Vercel, e como abrir o site publicado.

✔ Validar: existe uma URL .vercel.app abrindo uma tela inicial com as cores/fontes certas.
✔ Validar: consigo "instalar" o site no celular (ícone na tela inicial).

0.2 — Conectar o banco e o login

Cole no Claude

Conecte o Supabase ao projeto. Configure autenticação por link mágico (magic link) por e-mail. Crie duas áreas protegidas: /hoje (para alunas) e /mentora (só para quem tem papel "mentora"). Me diga quais variáveis de ambiente preciso colar na Vercel e no .env.local (NEXT_PUBLIC_SUPABASE_URL, NEXT_PUBLIC_SUPABASE_ANON_KEY, SUPABASE_SERVICE_ROLE_KEY).

✔ Validar: consigo pedir um link de acesso por e-mail e entrar.
✔ Validar: /mentora só abre para conta marcada como mentora.

0.3 — Criar as tabelas

Vá para a próxima seção, copie o SQL do banco e cole no Supabase (menu SQL Editor → New query → Run). Depois volte e siga para a Fase 1.

06 · Banco de dados (SQL pronto)

Cole isto no Supabase → SQL Editor e clique em Run. Cria as tabelas, ativa o pgvector e liga a segurança (RLS).

SQL — Supabase

-- Extensões
create extension if not exists vector;

-- Perfis (aluna | mentora)
create table profiles (
  id uuid primary key references auth.users on delete cascade,
  nome text,
  role text not null default 'aluna' check (role in ('aluna','mentora')),
  cohort_id uuid,
  created_at timestamptz default now()
);

-- Turmas
create table cohorts (
  id uuid primary key default gen_random_uuid(),
  nome text not null,
  data_inicio date not null,
  semanas int default 16
);

-- Check-in diário (6 estados de espírito + coerência cardíaca 3×/dia)
create table checkins (
  id uuid primary key default gen_random_uuid(),
  user_id uuid not null references profiles(id) on delete cascade,
  data date not null default current_date,
  estado_espirito text check (estado_espirito in
    ('animada','entusiasmada','neutra','um_pouco_cansada','ansiosa','depressiva')),
  coerencia_cardiaca int not null default 0 check (coerencia_cardiaca between 0 and 3),
  respiracao_feita boolean default false,
  created_at timestamptz default now(),
  unique (user_id, data)
);

-- Journal (diário — a mentora tem acesso TOTAL, decisão do kickoff 18/07)
create table journal_entries (
  id uuid primary key default gen_random_uuid(),
  user_id uuid not null references profiles(id) on delete cascade,
  data date not null default current_date,
  texto text,
  resumo_ia text,
  created_at timestamptz default now()
);

-- Biblioteca de práticas (indicação varia dentro da categoria do estado)
create table practices (
  id uuid primary key default gen_random_uuid(),
  titulo text not null,
  descricao text,
  tags_estado text[],
  categoria text check (categoria in ('autorregulacao','energia','calma','equilibrio')),
  audio_url text,
  link_spotify text
);

-- Conteúdo diário da home (frase do dia + energia do dia + pergunta do journal)
create table daily_content (
  data date primary key,
  frase_do_dia text,
  autor_frase text,
  energia_do_dia text,
  pergunta_journal text
);

-- Dicas da Mari (frases curtas, citações)
create table dicas_mari (
  id uuid primary key default gen_random_uuid(),
  texto text not null,
  fonte text,
  publicada_em date default current_date
);

-- Anamnese da médica integrativa (início / meio / fim)
create table anamneses (
  id uuid primary key default gen_random_uuid(),
  user_id uuid not null references profiles(id) on delete cascade,
  fase text check (fase in ('inicio','meio','fim')),
  respostas jsonb,
  created_at timestamptz default now(),
  unique (user_id, fase)
);

-- Web push (lembretes de coerência cardíaca em 3 horários)
create table push_subscriptions (
  id uuid primary key default gen_random_uuid(),
  user_id uuid not null references profiles(id) on delete cascade,
  subscription jsonb not null,
  horarios time[] default '{08:00,14:00,20:00}',
  created_at timestamptz default now()
);

-- Log de indicações da IA
create table recommendations (
  id uuid primary key default gen_random_uuid(),
  user_id uuid not null references profiles(id) on delete cascade,
  data date default current_date,
  practice_id uuid references practices(id),
  motivo text
);

-- Base de conhecimento do método (RAG)
create table knowledge_base (
  id uuid primary key default gen_random_uuid(),
  fonte text,
  chunk_texto text,
  embedding vector(1536)
);

-- Histórico de conversa com a IA
create table ai_messages (
  id uuid primary key default gen_random_uuid(),
  user_id uuid not null references profiles(id) on delete cascade,
  role text check (role in ('user','assistant')),
  conteudo text,
  created_at timestamptz default now()
);

-- Segurança: liga RLS
alter table profiles enable row level security;
alter table checkins enable row level security;
alter table journal_entries enable row level security;
alter table recommendations enable row level security;
alter table ai_messages enable row level security;
alter table anamneses enable row level security;
alter table push_subscriptions enable row level security;

-- Cada aluna só acessa os próprios dados
create policy "own profile" on profiles for all using (auth.uid() = id);
create policy "own checkins" on checkins for all using (auth.uid() = user_id);
create policy "own journal" on journal_entries for all using (auth.uid() = user_id);
create policy "own recs" on recommendations for all using (auth.uid() = user_id);
create policy "own ai" on ai_messages for all using (auth.uid() = user_id);
create policy "own anamnese" on anamneses for all using (auth.uid() = user_id);
create policy "own push" on push_subscriptions for all using (auth.uid() = user_id);

-- A mentora LÊ os dados da turma (decisão do kickoff 18/07: acesso total ao journal)
create policy "mentora reads profiles" on profiles for select using (
  exists (select 1 from profiles p where p.id = auth.uid() and p.role = 'mentora'));
create policy "mentora reads checkins" on checkins for select using (
  exists (select 1 from profiles p where p.id = auth.uid() and p.role = 'mentora'));
create policy "mentora reads journal" on journal_entries for select using (
  exists (select 1 from profiles p where p.id = auth.uid() and p.role = 'mentora'));
create policy "mentora reads anamneses" on anamneses for select using (
  exists (select 1 from profiles p where p.id = auth.uid() and p.role = 'mentora'));

⚠️ Privacidade do journal (DECIDIDO em 18/07): a mentora vê tudo — resumo por aluna + texto completo. O app é instrumento de anamnese/pesquisa da tese dela. Em contrapartida, o aceite LGPD do primeiro acesso deve dizer com todas as letras que a Mariana lê o diário e que os dados alimentam o acompanhamento e a pesquisa. Sem o aceite, a aluna não usa o app.

💡 Nota técnica: a policy "mentora reads profiles" consulta a própria tabela profiles — se o Supabase acusar recursão no RLS, o Claude deve trocar por uma function security definer (ex: is_mentora()). Peça a ele exatamente isso.

07 · Fase 1 — Núcleo

A aluna já consegue usar o app no dia a dia.
Janela: 23–27/07

1.1 — Home diária + check-in de estado de espírito

Cole no Claude

Na tela /hoje, monte a home DIÁRIA nesta ordem exata (nunca mostre "Semana 1/Semana 2"):
1. Saudação pelo nome ("Boa tarde, Jana") com a data por extenso.
2. Frase do dia (da tabela daily_content: frase_do_dia + autor_frase).
3. Energia do dia (daily_content.energia_do_dia — lua/astrologia/clima, texto curto).
4. Check-in com o título "Como está seu estado de espírito hoje?" e 6 carinhas: animada, entusiasmada, neutra, um pouco cansada, ansiosa, depressiva. Salve em checkins (um por dia; se já existir hoje, edita).
5. Ao escolher o estado, mostre a prática indicada: busque em practices pelas tags_estado, variando a escolha dentro da categoria (não repita sempre a mesma). Ansiosa → categoria autorregulacao (nervo vago/polivagal); animada/entusiasmada → energia (com link_spotify quando houver).
6. Card de coerência cardíaca: 3 marcações por dia (manhã/tarde/noite), salvas em checkins.coerencia_cardiaca.
Todo o copy no tom acolhedor da Mariana (vou te passar o dossiê do método com o vocabulário dela).

✔ Validar: a home segue a ordem exata; escolho "ansiosa" e recebo prática de nervo vago; escolho de novo no dia seguinte e a prática varia.

1.2 — Journal com a pergunta do dia

Cole no Claude

Crie a tela /journal: no topo, a pergunta reflexiva do dia (daily_content.pergunta_journal — ex: "E se a melhor parte de você estivesse guardada sob anos de adaptação? Quem você seria sem essas camadas?"). Abaixo, campo de escrita livre e histórico das entradas (data + trecho). Salve em journal_entries. Deixe claro no microcopy, com carinho, que a Mari lê o journal pra acompanhar de perto (sem tom jurídico — o aviso formal fica no aceite LGPD).

✔ Validar: escrevo, salvo, recarrego a página e a entrada continua lá; a pergunta muda por dia.

1.3 — Respiração, Dicas da Mari e Evolução

Cole no Claude

Crie a tela /respiracao com um guia animado (inspirar 4s / segurar 4s / soltar 6s, 8 ciclos) e um modo curto de coerência cardíaca (2 min) que marca +1 em checkins.coerencia_cardiaca. Crie a tela /dicas ("Dicas da Mari"): feed simples da tabela dicas_mari (frases curtas e citações). Crie a tela /evolucao com a curva DIA A DIA do estado de espírito ao longo das 16 semanas + adesão (dias com check-in) + comparação início/meio/fim (dados de anamneses). Use uma biblioteca de gráficos leve.

✔ Validar: a evolução mostra a curva diária do estado de espírito; /dicas lista as frases; a coerência cardíaca soma até 3 por dia.

08 · Fase 2 — IA + Painel da Mentora

A joia: o método da Mariana vira IA. E a mentora acompanha a turma.
Janela: 28/07–01/08

2.1 — Ingerir o método (RAG)

Cole no Claude

Crie um script/rota de administração para ingerir o material do método da Mariana (textos, PDFs e transcrições de áudio). O fluxo: quebrar o conteúdo em trechos, gerar embeddings via Vercel AI Gateway e salvar na tabela knowledge_base (coluna embedding vector(1536)). Comece ingerindo o dossiê metodo-mariana-v0.md (semente do método, extraído do kickoff) e a transcrição da reunião de 18/07; quando chegar o documento-base oficial da Mariana, ingira por cima. Me explique como eu rodo essa ingestão e como confiro que os trechos entraram.

✔ Validar: a tabela knowledge_base tem várias linhas com o conteúdo do método.

2.2 — Orientação por IA "na voz dela"

Cole no Claude

Crie a orientação por IA: quando a aluna faz o check-in ou pergunta algo, busque os trechos mais relevantes do método (RAG sobre knowledge_base) e gere uma resposta com o Claude, no tom acolhedor da Mariana, sugerindo a prática certa e uma palavra de direção. Regras: nunca dar diagnóstico ou conselho médico/psicológico; incluir um aviso curto de que é apoio de desenvolvimento pessoal, não terapia. Salve as mensagens em ai_messages.

✔ Validar: pergunto algo e a resposta usa claramente o método dela (não é genérica).

2.3 — Painel da mentora

Cole no Claude

Na tela /mentora (só role mentora), monte o painel da turma: lista de alunas com adesão (check-in hoje/na semana + coerência cardíaca média), estado de espírito médio da turma, e alertas quando alguém está há 3+ dias sem entrar ou com estado em queda persistente. Journals: mostre o RESUMO por aluna (journal_entries.resumo_ia, gerado pela IA ao salvar) com clique para abrir o TEXTO COMPLETO — a mentora tem acesso total (decisão de produto, já coberta pelo aceite LGPD). Inclua um bloco "preparação pro encontro": síntese da semana da turma em poucos bullets (temas mais escritos, quem precisa de atenção, sinais de evolução como entusiasmo e sincronicidades).

✔ Validar: como mentora, vejo resumos e abro o journal completo de qualquer aluna; os alertas aparecem.

09 · Fase 3 — Acabamento e entrega

Seguro, testado e cheio de conteúdo real.
Janela: 02–05/08 · entrega 06/08

3.1 — Consentimento e segurança

Cole no Claude

Adicione uma tela de aceite (consentimento LGPD) no primeiro acesso, dizendo COM TODAS AS LETRAS: (1) estado de espírito, práticas e diário são coletados para o acompanhamento da mentoria; (2) a mentora Mariana LÊ o journal (resumo e texto completo) para acompanhar de perto cada aluna; (3) os dados, de forma agregada, alimentam a pesquisa/tese dela — publicação futura exigirá novo consentimento específico. Sem aceitar, a aluna não usa o app. Revise todas as políticas de RLS e confirme que nenhuma ALUNA acessa dados de outra (a mentora pode ler, aluna não). Configure também os lembretes de coerência cardíaca por web push nos 3 horários da tabela push_subscriptions, com fallback de lembrete in-app no iOS sem PWA instalada. Faça um checklist de segurança e me mostre.

✔ Validar: primeiro acesso pede o aceite com os 3 pontos; teste com 2 contas de aluna prova que uma não vê a outra; a conta mentora lê as duas; o push chega nos horários.

3.2 — Conteúdo real + teste final

Cole no Claude

Cadastre as práticas reais e as lições das 16 semanas (vou te passar o conteúdo). Crie a turma da Mariana com data de início 12/08. Faça um roteiro de teste ponta a ponta (criar aluna, 3 dias de uso simulado, ver evolução, painel da mentora) e rode comigo. Liste qualquer ajuste final.

✔ Validar: o fluxo completo funciona do começo ao fim, sem erro.

10 · Entrega 100% (Definition of Done)

O app só é considerado pronto quando todos estes itens estiverem verdes:

App publicado numa URL estável e instalável no celular (PWA).
Aluna: login, home diária (frase + energia + estado de espírito com 6 estados), prática indicada com variação, coerência cardíaca 3×/dia com lembretes, journal com pergunta do dia, Dicas da Mari, respiração e evolução dia a dia funcionando.
IA responde usando o método real da Mariana (não genérico), no tom dela, e com o aviso de "não é terapia".
Mentora: painel com adesão, evolução, alertas e journals completos (resumo + texto), com bloco de preparação pro encontro.
Segurança RLS testada: aluna não vê aluna; mentora lê a turma. Aceite LGPD com os 3 pontos (coleta, leitura do journal pela mentora, pesquisa).
Anamnese início/meio/fim funcionando e refletida na evolução.
Conteúdo real cadastrado (práticas + daily_content + dicas) e turma criada para 12/08.
Teste ponta a ponta aprovado.
Custos de operação anotados e repassados (Vercel + Supabase + IA).

11 · O que NÃO fazer (pra não estourar o prazo)

Não finalizar as telas antes do protótipo com a identidade dela e aprovado pela Mariana.
Não estruturar a home por semana ("Semana 1/Semana 2"). A home é diária — veto explícito da Mariana no kickoff.
Não esconder o journal da mentora. A decisão é acesso total, com o aceite LGPD explícito compensando.
Não criar contas/serviços no nome da 7Tima. Tudo no cadastro da Mariana; a 7Tima entra como colaborador.
Não publicar nas lojas (Apple/Google). É PWA. Loja fica pra depois (aditivo).
Não adicionar funcionalidade nova no meio do caminho. Anota e vira "v2".
Não deixar a IA dar conselho médico/psicológico. É desenvolvimento pessoal.
Não começar a IA (Fase 2) sem o material do método em mãos. É o caminho crítico.
Não colocar chave secreta em arquivo do GitHub. Só em variável de ambiente.

Dúvida ou travou? Cola o erro no Claude e pede pra explicar e corrigir. Se for decisão de produto (ex: privacidade, conteúdo), fala com o Leonardo. O guia é o mapa; o Claude é o motor; você é o piloto.

7Tima · Build Guide interno · App "A Grande Reorganização" (Mariana) · v2 pós-kickoff · 2026-07-20