Skip to main content
Get your Sistema Financiero instance running locally and register your first transaction in under 10 minutes.

​
Prerequisites

Before you begin, make sure you have:

​
Installation

1

Clone the Repository

Clone Sistema Financiero to your local machine:
git clone https://github.com/daniel-carreon/sistema-financiero-app.git
cd sistema-financiero-app
2

Install Dependencies

Install all required packages:
npm install
This will install Next.js, Supabase client, Chart.js, and all other dependencies.
3

Set Up Supabase Database

  1. Go to supabase.com and create a new project
  2. Navigate to the SQL Editor in your Supabase dashboard
  3. Copy and paste this schema:
CREATE TABLE transacciones (
  id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
  fecha TIMESTAMP NOT NULL DEFAULT NOW(),
  tipo TEXT CHECK (tipo IN ('ingreso', 'gasto')) NOT NULL,
  monto NUMERIC(10, 2) NOT NULL CHECK (monto > 0),
  categoria TEXT NOT NULL,
  concepto TEXT DEFAULT 'Transacción manual',
  descripcion TEXT,
  metodo_pago TEXT CHECK (metodo_pago IN ('Efectivo', 'Tarjeta', 'Transferencia')),
  registrado_por TEXT,
  foto_url TEXT,
  usuario_id UUID REFERENCES auth.users(id),
  created_at TIMESTAMP DEFAULT NOW()
);

CREATE INDEX idx_transacciones_fecha ON transacciones(fecha DESC);
CREATE INDEX idx_transacciones_tipo ON transacciones(tipo);
  1. Click Run to create the table
4

Configure Environment Variables

Create a .env.local file in the project root:
cp .env.example .env.local
Update with your Supabase credentials:
NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
NEXT_PUBLIC_SITE_URL=http://localhost:3000

# Optional: For AI features
OPENROUTER_API_KEY=sk-or-v1-...
Find your Supabase URL and anon key in Project Settings → API in your Supabase dashboard.
5

Start the Development Server

Run the development server:
npm run dev
Open http://localhost:3000 in your browser. You should see the Sistema Financiero dashboard!

​
Register Your First Transaction

Now that Sistema Financiero is running, let’s add your first transaction.

​
Option 1: Manual Entry

  1. Click Registro in the navigation
  2. Fill out the form:
    • Tipo: Select “Gasto” (Expense)
    • Monto: Enter 50.00
    • Categoría: Select “Alimentación” (Food)
    • Descripción: Enter “Lunch at restaurant”
    • Método de pago: Select “Tarjeta” (Card)
  3. Click Registrar Transacción
  4. Go back to the Dashboard to see your transaction reflected in the KPIs and chart!

​
Option 2: AI Chat (If OpenRouter is configured)

  1. Click Agente IA in the navigation
  2. Type a message like: 
    Gasté $50 en comida, pagué con tarjeta
  3. The AI will automatically extract the details and register the transaction
  4. Check the dashboard to see it appear instantly!
The AI chat supports natural language in Spanish and English. Try: “I earned 1000fromfreelancework"or"Compreˊgasolinapor1000 from freelance work" or "Compré gasolina por 200”

​
Verify Everything Works

Go to the Dashboard and you should see:
  • ✅ Total Gastos: Shows your expense amount
  • ✅ Balance: Shows negative balance (expenses - income)
  • ✅ Transaction Table: Lists your transaction with all details
  • ✅ Trend Chart: Displays your spending over time

​
Next Steps

Explore Features

Learn about all the features available

Configure Supabase

Set up authentication and storage

Deploy to Production

Deploy to Vercel or your preferred platform

API Reference

Integrate with the REST API

​
Need Help?

Make sure you’ve registered at least one transaction. The dashboard starts empty until you add data.
Verify that you’ve set OPENROUTER_API_KEY in your .env.local file. Without it, AI features won’t work.
Double-check your NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY in .env.local. Make sure there are no extra spaces.
For more help, see the Troubleshooting Guide.

Build docs developers (and LLMs) love

Get started for freeTalk to us