---

TAC è un'applicazione web sviluppata per la gestione e il tracciamento delle finanze personali. Il sistema permette di monitorare conti, transazioni e abbonamenti attraverso un'interfaccia intuitiva, fornendo all'utente una panoramica chiara delle proprie spese tramite dashboard interattive.

Funzionalità Principali

• Dashboard: Visualizzazione di statistiche e grafici (tramite Chart.js) per un'analisi rapida dei flussi di cassa.
• Gestione transazioni: Aggiunta, modifica e rimozione di entrate, uscite e trasferimenti.
• Storico: Tabella completa delle transazioni con funzioni di ricerca, filtro e ordinamento personalizzato.
• Conti e abbonamenti: Creazione e monitoraggio di conti bancari e servizi in abbonamento (con integrazione di API esterne per il recupero automatico dei loghi).
• Sistema di autenticazione: Registrazione, login e gestione sicura delle sessioni utente.
• Interfaccia custom: Componenti UI personalizzati come select avanzati, search-and-select, popup, notifiche toast e gestione dinamica delle icone vettoriali.

Tecnologie Utilizzate

• Frontend: HTML5, Tailwind CSS, TypeScript, JavaScript, Chart.js
• Backend: Node.js, Express, TypeScript, EJS (per rendering dinamico lato server)
• Database: PostgreSQL (ospitato su Supabase) gestito tramite Prisma ORM
• Deployment: Render

Struttura della Repository

Client (/src/public/)

Contiene tutti i file relativi all'interfaccia utente, alla formattazione e alla logica di frontend.

• assets/css/: Contiene i file di stile. input.css è il file sorgente per Tailwind, mentre output.css è il file compilato incluso nelle pagine.
• assets/ts/ & assets/js/: Script TypeScript e i corrispettivi compilati in JavaScript per le dinamiche della pagina.
  • Componenti UI: popup.ts, custom-select.ts, search-select.ts, toast.ts, icons.ts.
  • Core e Sessione: header.ts (gestione layout responsive e sidebar), checkUser.ts / loggedUser.ts (verifica stato del login).
  • Logica di pagina: home.ts, history.ts, accounts.ts, subscription.ts, addTransaction.ts, auth.ts (gestiscono le chiamate API e l'aggiornamento del DOM per le rispettive sezioni).
  • Utilità: functions.ts (gestione errori dei form e loading state).
• *.html: Pagine statiche principali dell'applicazione (home.html, login.html, history.html, ecc.).
• views/transaction.ejs: Template dinamico renderizzato dal server per la pagina di modifica di una transazione pre-compilata.

Server (/src/server/ & root)

Gestisce le API REST, l'autenticazione e la comunicazione diretta con il database.

• index.ts: Entry point principale di Express. Configura il server e definisce le route principali.
• db-utils.ts: Modulo contenente tutte le funzioni per interagire con il database tramite Prisma (CRUD per transazioni, conti, abbonamenti).
• auth.ts: Logica di validazione e gestione per registrazione e login.
• schema.prisma: File di configurazione del database. Definisce la struttura delle tabelle e le relazioni tra entità.
• client.ts: File di appoggio che esporta una singola istanza condivisa di PrismaClient (Singleton pattern).

File di Configurazione

• package.json: Definisce le dipendenze del progetto e gli script NPM (come dev per avviare il server, compilare CSS/TS e guardare le modifiche in tempo reale).
• tsconfig.json: Regole di compilazione per TypeScript.
• tailwind.config.js: Configurazione delle classi e del design system di Tailwind CSS.

Installazione e Avvio

1. Clona la repository sul tuo ambiente locale.
2. Installa le dipendenze del progetto:

   npm install

3. Crea un progetto Supabase
4. Configura le variabili d'ambiente creando un file .env nella root del progetto e inserendo l'URL di connessione al tuo database:

   DATABASE_URL="la_tua_stringa_di_connessione"
   DIRECT_URL="la_tua_stringa_di_connessione"
   

5. Genera il client di Prisma per permettere all'applicazione di comunicare con il database:

   npx prisma generate

6. Successivamente, applica lo schema al tuo database (creerà le tabelle necessarie):

   npx prisma db push

7. Avvia l'ambiente di sviluppo locae. Questo comando, configurato nel package.json, avvierà Node.js, compilerà TypeScript e metterà in ascolto le modifiche di Tailwind CSS:

   npm run dev

8. Una volta avviato, il terminale mostrerà l'URL locale (generalmente http://localhost:3000 o simile). Apri quel link nel tuo browser per visualizzare l'app!

Autori

• Andrea Lanzarone
• Tommaso De Santis
• Claudia Cornacchia

Progetto realizzato per l'esame di Linguaggi e Tecnologie per il Web (Corso di Laurea Triennale in Ingegneria Informatica)