EMS

Il Problema

Tecnel MC, e con lei altre aziende della stessa società, usava un gestionale B2B in React con un problema serio: il sistema funzionava, ma ogni pagina faceva 50+ chiamate API separate. Aprire la lista ordini richiedeva 30 secondi. Aggiungere una nuova sezione significava copiare e incollare centinaia di righe di codice già esistenti. Il backend non aveva validazione degli input e le rotte non erano ottimizzate.

Il codice era cresciuto senza una struttura: ogni sviluppatore aveva aggiunto componenti separati per fare le stesse cose, ogni pagina gestiva lo stato in modo diverso, e non esisteva un sistema di caching. Il risultato era un'applicazione lenta, difficile da mantenere e impossibile da estendere senza rompere qualcosa.

La Soluzione

Ho iniziato dall'analisi del codice per mappare ogni duplicazione. Il pattern era chiaro: DataTable e FormBuilder venivano riscritti da zero in ogni pagina. Ho creato due componenti universali configurabili che coprono il 90% dei casi d'uso della piattaforma: passare un array di colonne e una sorgente dati è sufficiente per generare una tabella completa con paginazione, ordinamento e filtri.

Per le chiamate API ho introdotto un layer di caching con React Query: ogni dato viene richiesto una volta e tenuto in cache per la durata della sessione. Da 50+ richieste per pagina a meno di 5. Il bundle iniziale era enorme perché tutto veniva caricato subito, così ho separato ogni sezione in chunk lazy-loaded e aggiunto code splitting per le librerie pesanti.

Sul backend ho ricostruito le rotte con validazione Zod su ogni input e autenticazione JWT con refresh automatico. Ho aggiunto un sistema di generazione documenti PDF per preventivi e fatture, e integrato un lettore barcode per i movimenti di magazzino con alert automatici quando lo stock scende sotto soglia.

Il Risultato

Il caricamento delle pagine è passato da 30 secondi a meno di 3. Il bundle iniziale si è ridotto dell'80%. La codebase è scesa del 60% in righe di codice grazie all'eliminazione delle duplicazioni. Il team ora aggiunge nuove sezioni in ore invece che in giorni, riutilizzando i componenti universali anziché riscriverli.