Controllo Spese

Descrizione Progetto

Ci sono tantissime applicazioni simili sugli store, utili per controllare le spese mensili. Tuttavia, molte di queste includono pubblicità nella versione gratuita e, a mio parere, risultano troppo complesse per un utilizzo quotidiano semplice e veloce. Avevo bisogno di qualcosa di più intuitivo e immediato. Da qui nasce l’idea di realizzare una mia applicazione su misura. L'app è una web application ottimizzata esclusivamente per dispositivi mobili, perché la uso solo dallo smartphone. La login è gestita tramite Clerk Authentication, mentre per l’interfaccia utente ho utilizzato come base ShadCN, personalizzando alcuni componenti secondo le mie esigenze. L’app è molto semplice: La pagina principale è una dashboard con un grafico a torta che riepiloga le spese suddivise per categoria. Subito sotto, viene mostrata la lista delle spese dell’ultimo mese, filtrabili tramite un comodo sistema di ricerca. Le spese vengono raggruppate per categoria, quindi se ci sono più spese della stessa tipologia, queste vengono aggregate sotto un’unica voce. Il modale di ricerca permette di filtrare le spese per intervallo di date (di default il mese corrente), categoria e tag (associabile in fase di creazione spesa). Cliccando su una spesa si accede al dettaglio, dove è possibile visualizzare maggiori informazioni, modificarla o eliminarla. Infine, tramite la CTA con il simbolo "+", si apre il form per aggiungere una nuova spesa. Stack Tecnico: Frontend: ReactJS (con Vite). Per la gestione delle chiamate HTTP e dello stato globale ho scelto Redux Toolkit Query, che mi ha permesso di velocizzare notevolmente lo sviluppo delle operazioni CRUD. Backend: una piccola API realizzata con Express, MongoDB e Mongoose. Anche qui uso Clerk lato server per gestire l'autenticazione delle rotte protette.