Expensify

Panoramica

Expensify è un'app di gestione finanziaria personale ricca di funzionalità che ho sviluppato durante l'hackathon HACK.BS della durata di 24 ore. L'app aiuta gli utenti a gestire le proprie finanze con un'interfaccia intuitiva, funzionalità di tracciamento complete e visualizzazioni informative—tutto avvolto in un design elegante e moderno.

La Sfida

All'inizio dell'hackathon, gli organizzatori hanno assegnato il tema "expense tracker" (tracciatore di spese) come argomento del progetto. Con sole 24 ore a disposizione, ho dovuto rapidamente progettare e costruire un'applicazione mobile completa che rispondesse a questo tema. L'obiettivo era sviluppare un'app completamente funzionale che offrisse un valore reale agli utenti dimostrando al contempo le mie competenze tecniche.

Processo di Sviluppo

Sebbene le regole dell'hackathon permettessero di lavorare in solitaria, consentivano l'uso di strumenti di AI. Ho sfruttato Claude Pro con Projects per aiutarmi con l'organizzazione, la documentazione e l'implementazione rapida delle funzionalità. Questo si è rivelato inestimabile per prototipare rapidamente i componenti e risolvere problemi complessi in modo efficiente.

Nonostante questo aiuto, il vincolo delle 24 ore ha presentato sfide significative. Ho incontrato numerosi problemi tra cui errori di TypeScript, funzioni inesistenti "allucinante" dall'AI, e seri problemi architetturali che hanno richiesto soluzioni creative. L'intensità di costruire un'app complessa con più funzionalità interconnesse in un tempo così breve sarebbe stata quasi impossibile per uno sviluppatore alle prime armi.

Funzionalità ✨

Funzionalità Core 💼

• Tracciamento di Spese e Entrate: Registra e categorizza le transazioni finanziarie
• Gestione del Budget: Imposta budget mensili con indicatori visivi di avanzamento
• Transazioni Ricorrenti: Programma transazioni automatiche con vari pattern di ricorrenza
• Gestione delle Categorie: Crea, modifica e organizza categorie di spesa personalizzate
• Navigazione Temporale: Rivedi facilmente le finanze in diversi periodi

Visualizzazione Dati 📊

• Grafici a Torta: Visualizza la distribuzione delle spese tra le categorie
• Grafici Lineari: Traccia le tendenze di spesa nel tempo
• Report Finanziari: Genera report finanziari dettagliati con analisi delle spese

Punti di Forza Tecnici 🛠️

• Sicurezza Biometrica: Protezione Face ID/Impronta digitale per i dati finanziari
• Supporto Multi-Valuta: Traccia le finanze in varie valute incluso Bitcoin
• Importazione/Esportazione Dati: Backup e ripristino dei dati finanziari
• Sistema di Notifiche: Promemoria per le transazioni ricorrenti imminenti
• Architettura Offline-First: Funzionalità completa senza connessione internet
• Database SQLite: Archiviazione locale dei dati efficiente con query complesse

Stack Tecnologico 💻

• React Native: Sviluppo mobile multi-piattaforma
• Expo: Workflow di sviluppo e API native
• TypeScript: Codice type-safe per maggiore affidabilità
• SQLite: Database locale per archiviazione persistente
• React Context API: Gestione dello stato tra i componenti
• Recharts: Visualizzazione dati
• Autenticazione Biometrica: Accesso sicuro all'app

Design e Dettagli di Implementazione

UI in Dark Mode

Ho progettato l'app con un'elegante interfaccia in dark mode per ridurre l'affaticamento degli occhi e creare una sensazione premium. Lo schema di colori presenta accenti vivaci su sfondi scuri per una leggibilità ottimale e una gerarchia visiva.

Architettura Modulare

Il codice segue un'architettura pulita e modulare con:

• Provider di contesto per la gestione dello stato
• Hook personalizzati per funzionalità condivise
• Funzioni di utilità per operazioni comuni
• Componenti riutilizzabili per la coerenza dell'UI

Design del Database

L'app utilizza uno schema SQLite attentamente progettato con tre tabelle principali:

• transactions: Registra tutte le transazioni finanziarie
• categories: Memorizza categorie di spesa personalizzabili
• recurring_transactions: Gestisce spese/entrate ricorrenti programmate

Ottimizzazione delle Prestazioni

L'app implementa diverse ottimizzazioni delle prestazioni:

• Componenti memorizzati per prevenire re-render non necessari
• Rendering efficiente delle liste con FlatList
• Operazioni di database asincrone
• Caricamento lazy dei componenti grafici

Risultati di Apprendimento 🧠

Questo progetto hackathon mi ha aiutato ad approfondire la mia comprensione di:

• Sviluppo software rapido in ambienti con vincoli di tempo
• Costruzione di sistemi complessi di gestione dello stato in React Native
• Lavoro con database locali per applicazioni offline-first
• Implementazione di flussi di autenticazione sicuri
• Creazione di visualizzazioni dati intuitive

Conclusione 🏆

Expensify dimostra la mia capacità di concepire, progettare e costruire un'applicazione mobile complessa sotto stretti vincoli di tempo. Mette in mostra le mie competenze nello sviluppo React Native, nel design di database, nella gestione dello stato e nella creazione di esperienze utente intuitive.

Il formato hackathon mi ha spinto a dare priorità alle funzionalità, prendere decisioni tecniche rapide e concentrarmi sulla consegna delle funzionalità principali—competenze preziose che si traducono direttamente in ambienti di sviluppo reali.