App de Organização de Finanças Pessoais com Vibe Coding

1. Visão do Produto

Aplicativo de finanças pessoais que permite ao usuário registrar receitas, despesas e contas a pagar, acompanhar saldo e visualizar relatórios e gráficos.

O diferencial é a abordagem Vibe Coding: interação leve e conversacional com IA, transformando prompts em soluções.

2. Problema

Muitas pessoas não conseguem manter controle financeiro porque:

Aplicativos exigem muita entrada manual.
Orçamentos são vistos como tediosos.
Falta clareza sobre saldo, gastos e compromissos futuros.

3. Público-Alvo

Usuários que desejam organizar suas finanças sem burocracia.

Exemplo: Pessoa com renda mensal de R$ 3.500 que precisa controlar aluguel, alimentação, transporte, lazer e contas.

4. Objetivo

Permitir visão clara da vida financeira, respondendo perguntas como:

Quanto dinheiro eu tenho?
Quanto recebi este mês?
Quanto gastei?
Onde estou gastando mais?
Quais contas ainda preciso pagar?
Quanto consegui economizar?

5. Funcionalidades (MVP)

Cadastro de receita (entrada de dinheiro).
Cadastro de despesa (saída de dinheiro).
Categorias (moradia, alimentação, transporte, saúde, lazer, etc.).
Dashboard com KPIs: saldo atual, receitas, despesas, economia.
Gráficos: gastos por categoria, receitas x despesas, evolução do saldo.
Contas a pagar com status (pendente, pago, atrasado).
Filtros por período, categoria, tipo, forma de pagamento e status.
Histórico financeiro em tabela.

6. Regras de Negócio

Receita aumenta saldo: Saldo = Saldo anterior + Receita.
Despesa reduz saldo: Saldo = Saldo anterior - Despesa.
Conta paga entra nas despesas realizadas.
Conta pendente aparece como compromisso futuro.
Filtros atualizam KPIs e gráficos.

7. Interface (MVP)

Header: Meu Controle Financeiro.
Dashboard: saldo atual, receitas, despesas, economia.
Gráficos: pizza (categorias), barras (receitas x despesas), linha (evolução saldo).
Ações rápidas: nova receita, nova despesa, nova conta.
Histórico: lista de movimentações.

8. Responsividade

Compatível com desktop, notebook, tablet e celular.

9. Fora do Escopo Inicial

Integração bancária.
Open Finance.
Cartão automático.
Investimentos e criptomoedas.
IA avançada.
Sincronização bancária.

10. Métricas de Sucesso

Usuário consegue cadastrar receitas e despesas.
Visualiza saldo e KPIs corretamente.
Acompanha contas e status.
Identifica principais gastos.
Consulta histórico.
Analisa evolução financeira via gráficos.

11. Vibe Coding

O desenvolvimento segue o conceito de Vibe Coding:

Conversas naturais com IA.
Prompts claros e bem estruturados.
MVP rápido e funcional.
Foco em experiência leve e criativa.

🪄 Etapas do Desafio

1. Saber o que Pedir é a Chave! Otimize seus Prompts!

Antes de pedir para a IA "criar um app", é importante definir com clareza o que você quer construir e por quê. Para isso, você vai criar um PRD (Product Requirements Document) simplificado, uma especificação que serve como briefing para a IA entender sua ideia.

Um bom PRD deve descrever o problema, quem será beneficiado, as principais funcionalidades e o que você espera que a IA entregue. Use o modelo abaixo como ponto de partida e adapte conforme o seu estilo:

Ideia

Captura rápida do problema, público e objetivo. Resultado: one‑pager com hipótese de valor.

PRD (Product Requirement Document)

Documento estruturado com visão, público, funcionalidades, regras de negócio, KPIs e critérios de aceitação.

Design

Wireframes, fluxos de tela, protótipos de baixa fidelidade; validação de usabilidade com 2–3 usuários.

Decisões técnicas

Escolha de arquitetura, modelo de dados, APIs, autenticação, limites de performance e decisões de infra.

FSD (Functional Specification Document)

Especificação técnica detalhada por feature: endpoints, payloads, contratos, validações, mensagens de erro e testes esperados.

Código

Implementação guiada por SDD/BDD/TDD; PRs pequenos; integração contínua e testes automatizados.

3. Entregando o Desafio na DIO

Finalize seu projeto criando um repositório no GitHub (pode ser um fork deste).

No README do seu repositório, inclua:

minha foto do produto com lovable

Meu link do site: https://hanzbrito.lovable.app/

Interações com lovable

Sobre a linguagem: aqui o app é feito em HTML, CSS e JavaScript

ajuste por favor

O erro da tela em branco era de uma versão antiga carregada no navegador; recarreguei e as quatro telas (Painel, Lançamentos, Contas a pagar, Categorias) abrem sem erros.

## 💬Conclusão

Vibe Coding é sobre clareza, curiosidade e criatividade — não sobre perfeição técnica. O objetivo é aprender a pensar junto com a IA, transformando ideias em conceitos práticos e enxergando a tecnologia como extensão do seu raciocínio criativo. Cada interação é um experimento: quanto mais clara e intencional for sua comunicação, mais úteis e surpreendentes serão os resultados. Use esse processo para iterar rápido, validar hipóteses e evoluir o produto com foco em valor real para o usuário.