Carregando projeto...


webapp · Dolfyn
O Amigo do Bolso responde à pergunta "para onde vai meu dinheiro todo mês?" com a lógica da conta de luz: cada categoria de gasto tem uma bandeira, azul, amarela ou vermelha, conforme o quanto do alvo já foi consumido. É um app instalável (PWA), mobile-first, em Next.js 15 e React 19, com Supabase para autenticação (e-mail e senha ou Google) e dados, e o método Dolfyn de seis categorias com alvos fixos de renda. Além do app logado (Início, Lançamentos, Relatórios e a série educativa Dica do Amigo), o projeto tem página de produto própria com SEO, AEO e GEO, termos de uso, política de privacidade, tutoriais com capturas de uma conta fictícia, vídeo animado de apresentação e material de divulgação.
A História do Projeto
O Desafio
A Dolfyn, empresa de comunicação e treinamento, criou um método de organização financeira em seis categorias, cada uma com um alvo fixo em porcentagem da renda. O público é um assalariado brasileiro de renda média, com pouca familiaridade com finanças, cuja queixa é "não sei para onde vai meu dinheiro": o salário some todo mês e ele não sabe explicar por quê. Muitos já tentaram planilhas e desistiram. O método existia, mas faltava um produto que o colocasse no bolso, em linguagem leve e sem exigir noção de contabilidade.
A Solução
A solução foi um app mobile-first em que o plano vem antes da planilha. O usuário informa a renda do mês, lança receitas e despesas atribuídas a uma das seis categorias, e o app responde com bandeiras no estilo da conta de luz: azul, amarela ou vermelha, conforme o quanto do alvo foi consumido. O mês é a unidade de tudo, e a linguagem é a de um amigo, que explica e nunca dá bronca. O nome, a paleta e a identidade partem da bandeira tarifária, com papel, linhas finas e números em fonte monoespaçada, como numa conta impressa.
O Processo
O desenvolvimento começou em setembro de 2026, com a migration inicial da tabela de lançamentos, e o produto foi fechado em contratos escritos: PRODUCT.md, com usuários, método e princípios, e DESIGN.md, com cores, tipografia e componentes. O núcleo veio primeiro (autenticação com e-mail e Google, lançamentos, Início e Relatórios), depois etiquetas, parcelas com grupo, exclusão da própria conta e a série educativa Dica do Amigo, com áudio e transcrição. Em paralelo vieram a página de produto com SEO, AEO e GEO, termos e política de privacidade, tutoriais com capturas geradas por script contra uma conta fictícia, suíte E2E em Playwright, um vídeo animado do produto com narração e a identidade para redes sociais.
Os Resultados
O Amigo do Bolso está no ar como MVP em validação com usuários reais, instalável como PWA e gratuito. A página do produto marca 95 em performance mobile e 100 em acessibilidade no Lighthouse, e o repositório tem mais de 100 commits, cinco migrations de banco, suíte E2E e material de divulgação pronto. Como ainda está em validação, não publico números de adoção nem depoimentos.
Lighthouse · página do produto
Performance Mobile
de 86 antes da otimização
95 / 100Acessibilidade
100 / 1006
Categorias do Método
Principais Funcionalidades
Bandeiras por Categoria
Seis medidores com gasto contra alvo e uma bandeira azul, amarela ou vermelha, mais uma bandeira para o mês inteiro.
Lançamentos do Mês
Receitas e despesas agrupadas por dia, com pago ou pendente, etiquetas, filtros e parcelas.
Relatórios
Despesas do mês, mapa de categorias dos últimos seis meses e visão anual.
Dica do Amigo
Série educativa com artigos, áudio e transcrição, com progresso de leitura e estatísticas no Início.
App Instalável
PWA para o celular, com guia de instalação para iOS e login por e-mail ou Google.
Capturas de Tela
Página do produto em /produto — a promessa é uma pergunta que o público já se faz, e a resposta aparece ao lado como uma "conta do mês" de exemplo
Início — a primeira resposta é "estou dentro do plano?": a bandeira do mês vem antes dos valores, e cada categoria mostra medidor, porcentagem e palavra, nunca só cor
Lançamentos — o mês é a unidade: navegador de mês no topo, lançamentos agrupados por dia com saldo corrente e um botão grande para o loop principal
Relatórios em três abas (Despesas, Mapa e Anual) — o resumo do mês cruza receitas, despesas e balanço, e cada categoria carrega a bandeira do período
A página do produto no celular, em coluna única, com o mesmo argumento do desktop
O app no celular, o uso principal — navegação inferior com o botão "Lançar" em destaque, instalável como PWA
Mapa de categorias: gasto contra alvo e o consumo dos últimos seis meses, para ver tendência e não só o mês atual
Stack
Next.js 15 (App Router) · React 19 · TypeScript · Tailwind CSS 3 · buildgrid-ui · Supabase (Auth + Postgres) · TanStack Query 5 · React Hook Form · Zod · Recharts · next-pwa · Playwright · Vercel
Finanças Pessoais · PWA · Mobile-First · Supabase · Next.js · Autenticação · Google OAuth · Relatórios · Educação Financeira · SEO / AEO / GEO · Design System · Em Andamento