Refactoring FrontEnd in React del Sito Web di eShoppingAdvisor

Per migliorare l'esperienza utente e le prestazioni complessive con un nuovo FrontEnd in React, eShoppingAdvisor, azienda specializzata in recensioni e strumenti per eCommerce, era alla ricerca di uno sviluppatore web esperto in React per realizzarlo. Con un design innovativo ed mockup grafico già preparato da designer professionisti, mancava solamente scrivere il codice!

Obiettivi del cliente

eShoppingAdvisor aveva bisogno di un refactoring software completo del loro sito web, con le seguenti specifiche:

• Nuovo design: Trasformare un mockup grafico in un'interfaccia utente interattiva e responsive con un approccio Mobile First.
• Compatibilità: Garantire l'integrazione fluida con le API Rest esistenti, sviluppate in PHP e Python.
• Prestazioni: Migliorare la velocità e la reattività del sito web, grazie a sistemi di cache dei dati ottenuti dalle API.

Soluzione proposta

Analisi delle esigenze e pianificazione

Interfacciandomi con il team interno per comprendere al meglio tutti i requisiti funzionali ed avendo già a disposizione il design grafico con Figma ho realizzato un analisi funzionale con le tempistiche molto dettagliata che mi ha poi permesso di essere preciso nel rispettare le scadenze.
Come sviluppatore web FrontEnd, il mio ruolo era quello di:

• Sviluppare il FrontEnd: Implementare il nuovo design utilizzando React e consegnare il progetto nei tempi previsti con un codice pulito e performante.
• Gestire lo stato applicativo e le API: Utilizzare Redux e RTK Query per la gestione dello stato globale e delle richieste API, implementando logiche di retry e sistema di cache per ottimizzare le prestazioni.
• Assicurare compatibilità: Integrare il FrontEnd con le API esistenti e mantenere la retrocompatibilità.

Fasi del progetto

Sviluppo del FrontEnd

• Implementazione del design: Realizzazione del nuovo design utilizzando React per una UI moderna e responsive.
• Gestione dello stato applicativo: Utilizzo di Redux per la gestione dello stato globale e di RTK Query per gestire le richieste alle API.
• Codifica con TypeScript: Scrittura del codice in TypeScript per una maggiore robustezza e facilità di manutenzione.

Testing e integrazione

• Testing rigoroso: Esecuzione di test approfonditi per garantire la compatibilità con le API esistenti ed il funzionamento del nuovo FrontEnd.
• Integrazione: Collaborazione continua con il team interno per risolvere eventuali problemi e procedere ad un'integrazione senza intoppi con i software da loro prodotti.

Revisione e consegna

• Revisione finale: Controllo finale con il cliente per assicurarsi che tutte le esigenze fossero soddisfatte e che il sito fosse pronto per metterlo in staging ed in futuro rilasciarlo in produzione, cosi che fosse disponibile agli utenti.
• Consegna: Fornitura del codice sorgente completo, pronto per la messa in produzione.

Tecnologie utilizzate

• React: Libreria JavaScript per la costruzione dell'interfaccia utente.
• Redux: Per la gestione dello stato globale dell'applicazione.
• TypeScript: Linguaggio che aggiunge tipi statici a JavaScript, migliorando la qualità del codice.
• RTK Query: Strumento molto moderno per gestire le richieste API in Redux.
• Bootstrap: Framework CSS per uno stile responsive e moderno, con molte personalizzazioni applicate.

Risultati e benefici

Il progetto ha portato a un significativo miglioramento delle prestazioni e dell'esperienza utente grazie ad un design user-friendly e all'efficacia di React con Redux. Il sito aggiornato è ora rapido, funzionale e ben progettato, soddisfacendo le aspettative del cliente. eShoppingAdvisor ha apprezzato particolarmente la puntualità nella consegna e la qualità del lavoro svolto. Non solo, d'ora in avanti la manutenzione del codice sarà molto più rapida diminuendo i costi di sviluppo nel lungo periodo.

Conclusione:

L'aggiornamento del sito web di eShoppingAdvisor ha sottolineato l'importanza di una gestione organizzata e una comunicazione chiara con il cliente. Questo progetto non solo ha migliorato l'efficienza e la velocità del sito, ma ha anche rafforzato la mia reputazione e esperienza come freelance nel settore dello sviluppo web, aprendo la strada a ulteriori opportunità nel campo dello sviluppo FrontEnd con React.

Il sito è visitabile qui.