Finanças a Dois: React + Firebase

4.0

15/06/2025

ptDesenvolvimento de AplicativosReactFirebaseClean ArchitectureFinançasGestã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

Desenvolvendo COMIDINHAS-123

Desenvolvimento de Aplicativospt

4.0

Quero que você gere o aplicativo COMIDINHAS-123 a ser desenvolvido em React Native com Expo e com Supabase. Ele devera ter autenticação por e-mail e se prestará a fazer orçamentos de bolos. No login, deverá haver a tela de login e de signup para quem não tem conta. Uma vez logado, o login deverá ser persistente. Depois de logado, deverá ir para a tela Home. Nessa tela, deverá ter dois tipos de navegação: 1) Drawer - onde deverá ter opção de Logout bem como o atalho para as telas de cadastro: clientes e produtos. Descrição das tabelas no Supabase. Atenção: todas já estão criadas: Tabela de clientes: clientes: id bigint (identity not null), created_at timestamp (with time zone not null default now()), nome text not null, endereco character varying null, fone character varying not null, email character varying null, notas character varying null, constraint clientes_pkey primary key (id) Tabela de Produtos produtos: id bigint(identity not null), created_at timestamp (with time zone not null default now()), nome text not null, descricao character varying null, preco_unitario double precision not null, constraint produtos_pkey primary key (id) Estrutura do menu Drawer na página Home: Clientes Produtos Logout Implementar o método CRUD nas telas Clientes e Produtos No Logout, fazer o logout no app e voltar para a tela de Login. Na tela Home, deverá ser implementada a navegação por Expo Tabs.

React NativeSupabaseExpo29/03/2025