Lo stack MERN è un insieme di tecnologie utilizzate per creare applicazioni web basato su JavaScript. L’acronimo sta per MongoDB, Express, React e Node.js.

MongoDB servirà da database, Express gestirà le chiamate API e il routing dell’applicativo, React verrà utilizzato per lo sviluppo dell’interfaccia utente ed infine Node.js sarà l’ambiente in cui verrà eseguito il codice JavaScript.

Lo scopo di questo progetto è sviluppare un’applicativo web di messaggistica istantanea, con le seguenti features:

• Registrazione, login e logout utenti
• Invio testo ed immagini ai vari utenti
• Online status degli utenti
• Immagine profilo e tema personalizzabili

La procedura di registrazione e di login è abbastanza standard: alla creazione o all’accesso di un utente, viene generato un JSON Web Token (JWT) che consentirà all’utente di accedere al resto dell’applicativo.

I dati degli utenti vengono salvati nel nostro database, con i dati sensibili (le password) memorizzati tramite un processo di hash. Un fatto nuovo ed interessante che ho scoperto mentre sviluppavo questa parte è il salting. Il salting è l’aggiunta di caratteri casuali alle password prima di effettuare l’hashing. Questo viene fatto per aumentare la sicurezza dei dati degli utenti, rendendo molto più difficile il cracking delle password.

Il front-end, come già detto in precedenza, è stato realizzato in React utilizzando librerie come Tailwind CSS e Daisy UI. La parte più interessante del front-end è la possibilità di cambiare tema dell’intero sito. Questo è possibile grazie ai temi offerti da Tailwind e a React, che permette di “salvare” dinamicamente lo stato (cioè il tema) ed applicarlo all’intero sito.

Infine, la messaggistica istantanea viene gestita tramite un’ulteriore libreria chiamata Socket.IO, composta da un server Node.js e da un componente installato nel client che “gira” sul browser. Quest’architettura permette una connessione sicura, veloce e bidirezionale tra i vari utenti dell’applicazione.