FinanceFlow AI è un'applicazione web moderna e reattiva per la gestione delle finanze personali. Sfrutta la potenza dell'Intelligenza Artificiale (Google Gemini) per automatizzare l'inserimento dati e fornire consigli finanziari intelligenti.
Progettata con un'architettura leggera (senza build step complessi) e un'interfaccia "Mobile-First" curata nei minimi dettagli.
- Tracciamento Transazioni: Registra entrate e uscite con categorie e sottocategorie dinamiche.
- Analytics & Trend: Grafici interattivi (a torta, ad area) con filtri temporali (1M, 3M, 6M, 1Y, Tutto) e per tipologia.
- Bollette & Scadenze: Scadenzario integrato con indicatori visivi per pagamenti imminenti o scaduti.
- Scanner Scontrini OCR: Scatta una foto e l'AI estrarrà automaticamente importo, data, fornitore e categorizzerà la spesa.
- Auto-Categorizzazione: L'app intuisce la categoria corretta basandosi sulla descrizione inserita.
- Financial Advisor: Analisi periodica delle tue spese per offrirti consigli personalizzati su come risparmiare.
- Divisione Spese (Split): Calcolatrice per dividere conti tra amici in modo equo o basato su percentuali personalizzate.
- Sicurezza PIN: Protezione dell'app tramite codice PIN a 4 cifre sincronizzato sul cloud.
- Tema Scuro: Supporto nativo Dark Mode e Light Mode persistente.
Il progetto è costruito utilizzando le più moderne tecnologie web, senza richiedere complessi processi di build (bundler-free development):
- Frontend: React 19, TypeScript
- Styling: Tailwind CSS (via CDN)
- Animazioni: GSAP (GreenSock Animation Platform)
- Grafici: Recharts
- Database: Supabase (PostgreSQL)
- AI: Google GenAI SDK (Gemini 2.5 Flash)
- Icone: Lucide React
Poiché l'app utilizza ES Modules via browser, l'installazione è immediata.
- Un account Supabase (Gratuito).
- Una API Key di Google AI Studio (Gratuita).
- Un editor di codice (es. VS Code) con l'estensione Live Server.
Vai nella sezione SQL Editor del tuo progetto Supabase ed esegui questi script per creare le tabelle:
-- 1. Tabella Transazioni
create table transactions (
id uuid default gen_random_uuid() primary key,
created_at timestamp with time zone default timezone('utc'::text, now()) not null,
amount numeric not null,
type text not null, -- 'INCOME' o 'EXPENSE'
category text not null,
subcategory text,
date text not null,
description text not null,
receipt_image text,
is_recurring boolean default false
);
-- 2. Tabella Bollette
create table bills (
id uuid default gen_random_uuid() primary key,
name text not null,
amount numeric not null,
due_date text not null,
is_paid boolean default false,
category text not null
);
-- 3. Tabella Impostazioni (per il PIN)
create table settings (
key text primary key,
value text not null
);Apri il file services/supabase.ts e sostituisci le costanti con i dati del tuo progetto (Project Settings > API):
const SUPABASE_URL = 'LA_TUA_URL_SUPABASE'; // es: https://xyz.supabase.co
const SUPABASE_KEY = 'LA_TUA_ANON_KEY'; // Chiave pubblicaApri il file index.html e inserisci la tua chiave API nello script di configurazione:
<script>
window.process = {
env: {
API_KEY: 'LA_TUA_API_KEY_GOOGLE'
}
};
</script>- Apri la cartella del progetto con VS Code.
- Clicca con il tasto destro su
index.html. - Seleziona "Open with Live Server".
L'app si avvierà nel tuo browser predefinito.
- Dashboard: Visione immediata del saldo e accesso rapido alle funzioni AI.
- Nuova Transazione (+): Inserimento manuale o tramite scansione scontrino.
- Analisi: Visualizza i grafici di andamento e filtra per periodo.
- Menu: Accedi alle impostazioni per configurare il PIN di sicurezza o cambiare tema.
Questo progetto è rilasciato sotto licenza MIT. Sentiti libero di modificarlo e adattarlo alle tue esigenze personali.