💰 Monio

Personal finance tracking, reimagined. Conti · Transazioni · Abbonamenti · Rate · Debiti · Automazioni — tutto in un'unica app cross‑platform.

---

📖 Indice

• Panoramica
• Funzionalità
• Stack tecnologico
• Struttura del progetto
• Requisiti
• Setup rapido
• Variabili d'ambiente
• Script disponibili
• Piattaforme
• Design System
• Firebase
• Roadmap
• Licenza

---

🧭 Panoramica

Monio è un'app di gestione finanziaria personale, sviluppata con React + TypeScript + Capacitor, pensata per funzionare in modo identico su Android, iOS e Web. Il progetto nasce come evoluzione cross‑platform dell'app Android nativa Conti (Kotlin), mantenendo la stessa logica di dominio ma con un'interfaccia moderna, tema scuro e accenti oro.

✨ Funzionalità

Area	Descrizione
🏦 Conti	Creazione, modifica e dettaglio conti bancari con saldo e cronologia movimenti
💸 Transazioni	Registrazione entrate/uscite, import da Excel/PDF, normalizzazione automatica delle voci
🔁 Abbonamenti	Tracciamento abbonamenti ricorrenti con scadenze e notifiche di rinnovo
📉 Debiti	Gestione debiti con storico movimenti e piani di rientro
🧾 Rate	Piani di pagamento a rate con dettaglio singola installment
⚙️ Automazioni (Workflow)	Editor visuale a grafo per creare regole automatiche (fisse, percentuali, tassi) con trigger manuali, mensili, a soglia di saldo o su incasso
🔐 Sicurezza	Login/Registrazione, Google Sign‑In, blocco app con PIN e biometria
🤖 AI Assist	Integrazione Gemini per assistenza su import e categorizzazione
📥 Import dati	Importazione estratti conto da Excel (.xlsx) e PDF con anteprima e normalizzazione
🔔 Notifiche	Notifiche locali (promemoria rinnovi, scadenze) via Capacitor Local Notifications
🌍 i18n	Supporto multilingua
🌗 Tema scuro premium	UI dark con accenti oro (#BFA14A), componenti shadcn/ui + Radix

🛠 Stack tecnologico

• Framework: React 18 + TypeScript + Vite
• Styling: TailwindCSS + shadcn/ui + Radix UI
• Routing: React Router v7
• State management: Zustand
• Backend: Firebase (Authentication + Firestore)
• Mobile runtime: Capacitor 8 (Android + iOS)
• Grafici: Recharts
• Form: React Hook Form
• Notifiche UI: Sonner (toast)
• Import dati: xlsx, pdfjs-dist
• AI: @google/generative-ai (Gemini)
• Auth avanzata: Google Auth nativo (@southdevs/capacitor-google-auth), biometria (capacitor-native-biometric)

📁 Struttura del progetto

monio/
├── android/                # Progetto nativo Android (generato da Capacitor)
├── src/
│   ├── App.tsx              # Router principale, Toaster, permessi iniziali
│   ├── components/          # Componenti riutilizzabili (UI, dialog, screen)
│   │   ├── ui/               # Componenti shadcn/ui
│   │   ├── auth/              # Componenti autenticazione
│   │   └── figma/              # Componenti derivati da design Figma
│   ├── pages/                # Pagine/route dell'app (Home, Conti, Rate, Debiti, ...)
│   ├── services/              # Firebase, Gemini AI, import, normalizzazione
│   │   └── repositories/        # Repository dati (accounts, transactions, workflows, ...)
│   ├── stores/                # Stato globale (Zustand)
│   ├── hooks/                 # Custom hooks (notifiche, workflow, ecc.)
│   ├── utils/                  # Utility (notifiche, notifiche locali, helper)
│   ├── types/                  # Tipi TypeScript condivisi
│   ├── i18n/                   # Traduzioni
│   └── styles/                 # Stili globali
├── public/                  # Asset statici
├── docs/                    # Documentazione aggiuntiva
├── capacitor.config.json    # Configurazione Capacitor
├── tailwind.config.js       # Configurazione Tailwind
└── vite.config.ts           # Configurazione Vite

✅ Requisiti

• Node.js ≥ 18
• npm
• Android Studio (per build Android)
• Xcode (solo macOS, per build iOS)
• Un progetto Firebase con Authentication + Firestore abilitati

🚀 Setup rapido

# Clona il repository
git clone https://github.com/DagoExe/Monio.git
cd Monio/monio

# Installa le dipendenze
npm install

# Copia il file di esempio delle variabili d'ambiente
cp .env.local.example .env.local
# → compila .env.local con le tue credenziali Firebase / Gemini / Google OAuth

# Avvia il server di sviluppo
npm start

🔑 Variabili d'ambiente

Crea un file .env.local (mai committato, vedi .gitignore) a partire da .env.local.example:

Variabile	Descrizione
VITE_FIREBASE_API_KEY	API key del progetto Firebase
VITE_FIREBASE_AUTH_DOMAIN	Dominio di autenticazione Firebase
VITE_FIREBASE_PROJECT_ID	ID progetto Firebase
VITE_FIREBASE_STORAGE_BUCKET	Bucket Firebase Storage
VITE_FIREBASE_MESSAGING_SENDER_ID	Sender ID per Firebase Messaging
VITE_FIREBASE_APP_ID	App ID Firebase
VITE_USE_FIREBASE_EMULATORS	true/false — usa emulatori Firebase locali
VITE_GEMINI_API_KEY	Chiave API Gemini (Google AI Studio)
VITE_GOOGLE_CLIENT_ID	Client ID OAuth Google (Google Cloud Console)

📜 Script disponibili

Comando	Descrizione
npm start	Avvia il dev server (Vite)
npm run build	Build di produzione dei web assets
npm run preview	Anteprima locale della build di produzione
npx cap sync	Sincronizza i web assets con i progetti nativi
npx cap open android	Apre il progetto Android in Android Studio
npx cap open ios	Apre il progetto iOS in Xcode

📱 Piattaforme

🌐 Web npm start

🤖 Android npm run build && npx cap sync && npx cap open android

🍎 iOS npm run build && npx cap sync && npx cap open ios

App ID: com.dago.monio

🎨 Design System

• Sfondo: zinc-950 / zinc-900 (dark mode)
• Colore primario: Oro #BFA14A
• Componenti: shadcn/ui + Radix UI
• Icone: lucide-react
• Notifiche toast: Sonner (varianti: verde = successo, rosso = errore, ambra = warning, blu = info, bordo oro = premium)

🔥 Firebase

Struttura dati Firestore, scoping per utente autenticato:

/users/{userId}/
  ├── profile/main
  ├── accounts/{accountId}
  ├── transactions/{transactionId}
  ├── subscriptions/{subscriptionId}
  └── workflows/{workflowId}

Tutte le query richiedono un utente autenticato tramite Firebase Authentication.

🗺 Roadmap

• Sincronizzazione offline-first
• Widget riepilogo saldo
• Export report PDF
• Supporto multi-valuta avanzato

📄 Licenza

Progetto privato — tutti i diritti riservati. Non distribuire senza autorizzazione.

---

_{Costruito con ❤️ da DagoExe}