Construa seu próprio app de hábitos com streak em menos de 2 horas

Existem dois tipos de projeto perfeitos para aprender vibe coding: os que você vai vender e os que você vai usar.

Um app de controle de hábitos é dos segundos — e por isso é melhor para aprender. Você sabe exatamente como deve funcionar (porque é você o usuário), vai usar todos os dias (então vai notar qualquer bug), e tem escopo pequeno o suficiente para terminar em uma sessão.

Este tutorial constrói um app completo: cadastro de hábitos, marcação diária, streak visual, histórico em calendário e notificação de lembrete.

---

O que vamos construir

• Tela principal com lista de hábitos do dia e checkbox para marcar

• Streak (sequência) exibido por hábito — quantos dias consecutivos

• Histórico visual em grid de calendário (estilo GitHub contributions)

• Adição e edição de hábitos com cor e ícone customizáveis

• Lembrete diário configurável por horário

• PWA instalável no celular (sem app store)

Stack: Lovable para interface, Supabase para banco e autenticação.

---

Passo 1 — Prompt inicial no Lovable

Crie um app de controle de hábitos chamado "Hábitos".

TELA PRINCIPAL:
- Header com data de hoje e saudação ("Bom dia, [nome]")
- Lista de hábitos do dia com checkbox à esquerda
- Cada hábito mostra: ícone + nome + streak atual (🔥 X dias)
- Hábito marcado fica com visual diferente (riscado ou opacidade)
- Botão flutuante "+" para adicionar novo hábito
- Barra de progresso no topo mostrando X de Y hábitos feitos hoje

TELA DE DETALHE DO HÁBITO:
- Nome, ícone e cor do hábito
- Streak atual e maior streak histórico
- Grid de calendário dos últimos 90 dias (quadradinhos verdes/cinzas)
- Botão para editar ou arquivar o hábito

TELA DE ADICIONAR/EDITAR HÁBITO:
- Campo de nome
- Seletor de ícone (emojis: 🏃 💧 📚 🧘 💪 ✍️ 🎯 😴)
- Seletor de cor (6 opções)
- Frequência: diário, dias da semana específicos, X vezes por semana
- Horário de lembrete (opcional)

AUTENTICAÇÃO:
- Login com e-mail e senha via Supabase Auth
- Criar conta simples — apenas e-mail e nome

Design: fundo muito escuro #0D0D0D, cards com bordas sutis,
cor de destaque configurável por hábito, fonte Inter,
totalmente responsivo e otimizado para mobile.

---

Passo 2 — Estrutura no Supabase

sql

-- Hábitos do usuário
create table habitos (
  id            uuid primary key default gen_random_uuid(),
  user_id       uuid references auth.users(id) on delete cascade,
  nome          text not null,
  icone         text default '🎯',
  cor           text default '#2563EB',
  frequencia    text default 'diario', -- diario | semanal | customizado
  dias_semana   int[], -- [1,2,3,4,5] = seg a sex (domingo = 0)
  horario_lembrete time,
  ativo         boolean default true,
  criado_em     timestamp default now()
);

-- Registros de conclusão
create table registros (
  id         uuid primary key default gen_random_uuid(),
  habito_id  uuid references habitos(id) on delete cascade,
  user_id    uuid references auth.users(id) on delete cascade,
  data       date not null,
  criado_em  timestamp default now(),
  unique(habito_id, data) -- um registro por hábito por dia
);

-- RLS
alter table habitos enable row level security;
alter table registros enable row level security;

create policy "usuário gerencia próprios hábitos"
on habitos for all using (auth.uid() = user_id);

create policy "usuário gerencia próprios registros"
on registros for all using (auth.uid() = user_id);

---

Passo 3 — A lógica do streak

O streak é o coração do app — e precisa ser calculado corretamente. Instrua o Lovable:

Para calcular o streak de cada hábito, crie uma função que:

1. Busca todos os registros do hábito ordenados por data decrescente
2. Começando de hoje (ou ontem, se hoje ainda não foi marcado),
   conta os dias consecutivos que têm registro
3. Para hábitos com frequência semanal, conta semanas consecutivas
4. Exibe o streak como número ao lado do ícone de fogo 🔥

Também calcule e salve o "maior streak histórico" para exibir 
no detalhe do hábito.

A lógica em JavaScript para o streak diário:

javascript

function calcularStreak(registros) {
  if (!registros.length) return 0;
  
  const datas = registros.map(r => new Date(r.data))
    .sort((a, b) => b - a); // mais recente primeiro
  
  const hoje = new Date();
  hoje.setHours(0, 0, 0, 0);
  
  const ontem = new Date(hoje);
  ontem.setDate(ontem.getDate() - 1);
  
  // Verifica se o streak ainda está ativo
  const ultimaData = datas[0];
  if (ultimaData < ontem) return 0; // streak quebrado
  
  let streak = 1;
  for (let i = 1; i < datas.length; i++) {
    const diff = (datas[i-1] - datas[i]) / (1000 * 60 * 60 * 24);
    if (diff === 1) {
      streak++;
    } else {
      break;
    }
  }
  
  return streak;
}

---

Passo 4 — O grid de calendário

O histórico visual é o que torna o app viciante — a sensação de não querer "quebrar a corrente" é um mecanismo psicológico poderoso.

Crie um componente de grid de calendário que:
- Mostra os últimos 90 dias em quadradinhos 10x10px
- Dia com registro: cor do hábito em 100% opacidade
- Dia sem registro (mas no passado): cinza escuro
- Dia futuro: invisível
- Tooltip ao passar o mouse: data e status
- Layout: 7 colunas (dias da semana), linhas de semanas
- Semelhante ao contribution graph do GitHub

---

Passo 5 — Tornando um PWA instalável

Um PWA (Progressive Web App) permite que o usuário instale o app no celular como se fosse um app nativo — sem passar pela App Store.

Instrua o Lovable:

Configure o app como PWA para ser instalável no celular:

1. Adicione um arquivo manifest.json com:
   - name: "Hábitos"
   - short_name: "Hábitos"  
   - theme_color: "#0D0D0D"
   - background_color: "#0D0D0D"
   - display: "standalone"
   - icons em 192x192 e 512x512

2. Configure o service worker para cache básico
   (funcionar offline para visualizar hábitos do dia)

3. Adicione o banner "Adicionar à tela inicial" em iOS e Android

Com isso, o usuário abre o Safari no iPhone, acessa a URL e adiciona à tela inicial — e o app abre sem barra de navegador, exatamente como um app nativo.

---

Variações para transformar em produto

Este projeto é um ótimo portfólio — mas também tem potencial de micro SaaS com algumas adições:

Hábitos compartilhados: dois usuários acompanham o mesmo hábito e se veem no ranking — elemento social que aumenta retenção.

Relatório semanal por e-mail: toda segunda-feira o app manda um resumo da semana passada com taxa de conclusão por hábito.

Integração com Apple Health / Google Fit: alguns hábitos (exercício, sono) podem ser marcados automaticamente via API de saúde.

Hábitos com coach de IA: ao fim de uma semana com baixa taxa de conclusão, a IA gera uma mensagem de análise e sugestão de ajuste.

---

Conclusão

Um app de hábitos parece simples — e é, de propósito. Projetos com escopo pequeno e bem definido são os melhores para aprender vibe coding porque você chega ao fim, você usa o resultado e você tem algo para mostrar.

O que torna esse projeto além de um exercício é a combinação de streak, histórico visual e PWA — elementos que criam um produto que as pessoas realmente voltam a usar todo dia.

E quem usa todo dia tem muito mais chances de pagar por uma versão premium.