Finanças a Dois: React + Firebase

4.0

6/15/2025

Desenvolvimento de Aplicativos

React

Firebase

Clean Architecture

Finanças

Gestão de Gastos

Prompt

Gerar um aplicativo react + Firebase (Clean Architecture) chamado “Finanças a Dois”, para o casal acompanhar contas pagas e a pagar, metas de gastos/poupança e gestão de empréstimos, com projeção anual e alertas inteligentes.

PILARES DE NEGÓCIO
1. Visão clara do fluxo de caixa mensal (valor pago vs. pendente).
2. Automação de despesas fixas e lembretes.
3. Decisão orientada sobre quitar ou amortizar empréstimos.
4. Experiência colaborativa (dois usuários na mesma “casa”).

STACK TÉCNICO
- Flutter 3.22 (Material 3, `Riverpod`, `go_router`, `intl`)
- Firebase
- Auth (e-mail/senha) + deep-link convite de casal
- Firestore (coleções descritas abaixo)
- Cloud Functions (Node 20)
- Cloud Storage (comprovantes)
- FCM (push lembretes)
- CI/CD: GitHub Actions → Firebase App Distribution

MODELOS FIRESTORE
- `/households/{hid}` → { name, createdAt, memberIds[] }
- `/users/{uid}` → perfil, notificationPrefs, householdId
- `/bills/{hid}/{yyyyMM}/{billId}`
{ title, amount, category, dueDate, recurrence, status, paidAt, paymentMethod{bank,channel}, attachmentUrl }
- `/recurringTemplates/{hid}/{templateId}`
{ title, amount, category, dueDay, paymentMethod, active, createdAt }
- `/goals/{hid}/{goalId}`
{ type:SAVINGS|DEBT, title, targetAmount, currentAmount, deadline }
- `/loans/{hid}/{loanId}`
{ title, principal, interestRateAnnual, termMonths, startDate, paymentDay, paidPrincipal, paidInterest, nextDueDate, remainingInstallments, status }
- `/loanPayments/{hid}/{loanId}/{yyyyMM}/{id}`
{ installmentNumber, amountPrincipal, amountInterest, paidAt, paymentMethod, attachmentUrl }
- `/summaries/{hid}/{yyyyMM}` → { totalPaid, totalPending, updatedAt }
- `/projections/{hid}/{year}` → { monthTotals{“01”:val, …}, updatedAt }

CLOUD FUNCTIONS
1. recurringScheduler (Pub/Sub diário 00:10)
- Lê `/recurringTemplates` ativos e gera contas futuras em `/bills`.
2. monthlySummaryCache (Pub/Sub diário 00:30)
- Soma bills por status e grava em `/summaries`.
3. loanStatusUpdater (Pub/Sub diário 01:00)
- Marca empréstimos como OVERDUE se nextDueDate < hoje.
4. suggestEarlyPayoff (HTTPS Callable)
- Recebe loanId, calcula saldo devedor (Price/SAC), compara taxa × CDI líquido e retorna canPayoff, interestSaved.

Resultado Gerado

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="bg-blue-600 text-white p-4">
        <h1 className="text-2xl font-bold">Finanças a Dois</h1>
      </header>
      <main className="p-4">
        <section className="mb-8">
          <h2 className="text-xl font-semibold mb-2">Monthly Cash Flow</h2>
          <div className="bg-white p-4 rounded-lg shadow">
            <p>Paid vs Pending</p>
          </div>
        </section>
        <section className="mb-8">
          <h2 className="text-xl font-semibold mb-2">Fixed Expenses & Reminders</h2>
          <div className="bg-white p-4 rounded-lg shadow">
            <p>Automation Details</p>
          </div>
        </section>
        <section className="mb-8">
          <h2 className="text-xl font-semibold mb-2">Loan Management</h2>
          <div className="bg-white p-4 rounded-lg shadow">
            <p>Payoff or Amortize</p>
          </div>
        </section>
        <section className="mb-8">
          <h2 className="text-xl font-semibold mb-2">Collaborative Experience</h2>
          <div className="bg-white p-4 rounded-lg shadow">
            <p>Two Users in One House</p>
          </div>
        </section>
        <section className="mb-8">
          <h2 className="text-xl font-semibold mb-2">Savings Goals</h2>
          <div className="bg-white p-4 rounded-lg shadow">
            <p>Track Progress</p>
          </div>
        </section>
        <section className="mb-8">
          <h2 className="text-xl font-semibold mb-2">Annual Projections</h2>
          <div className="bg-white p-4 rounded-lg shadow">
            <p>Future Financial Outlook</p>
          </div>
        </section>
        <section className="mb-8">
          <h2 className="text-xl font-semibold mb-2">Smart Alerts</h2>
          <div className="bg-white p-4 rounded-lg shadow">
            <p>Stay Informed</p>
          </div>
        </section>
      </main>
      <footer className="bg-gray-800 text-white p-4 text-center">
        <p>© 2025 Finanças a Dois. All rights reserved.</p>
      </footer>
    </div>
  );
}

export default App;

Open Sandbox

Mais Recomendações

Ver Todos

Finanças a Dois: React + Firebase

Prompt

Resultado Gerado

Mais Recomendações

Gerador de Boletins Inteligente

App para análise e correção de CSV

Crie um jogo Pitfall com robôs

Kibella Moda 克隆网站

Criar Site Loja Roupas

Detector de Manipulação de Jogos