To-do App

Vai all'app

Un'app per aiutare a tenere traccia degli impegni. È stata costruita utilizzando il framework Express di Node.js per il back end e mySQL per il database. Per il front end ho scelto di usare ejs (per visualizzare le pagine) e JavaScript.

Le sue funzionalità sono:

Utilizzo dell'app tramite un account
Possibilità di aggiungere, modificare e cancellare sia le attività da svolgere che le categorie di appartenenza
Mostrare le attività da fare in base ai filtri inseriti per priorità e stato
Validazione dei moduli sia su front end che su back end

Grafica e UI

Dopo una rapida ricerca di altre app con funzionalità simili, ho deciso di usare una veste grafica che privilegi tinte piatte e forme squadrate, in modo tale da distinguerla da altre app e renderla più gradevole all'uso.

Schermata dell'homepage dell'app su desktop — Come appare l'homepage su desktop

Schermata dell'homepage dell'app su mobile — Come appare l'homepage su mobile

Landing page dell'app — Landing page su desktop

È stato dato anche molto spazio al menù di navigazione nella versione desktop per renderla più semplice e mostrare a colpo d'occhio tutte le categorie esistenti.

Dettagli tecnici

Per la parte back end ho scelto di strutturare il codice seguendo l'architettura MVC, separando modelli, viste e controllori in modo tale da rendere il codice facilmente scalabile e ben organizzato.

Per ogni route ho fatto in modo di usare i metodi HTTP (get, post, put e delete) corrispondenti alle varie operazioni CRUD, anche attraverso l'uso di un pacchetto npm necessario per sovrascrivere i metodi get e post dei moduli.

Per la creazione degli account è stato usato il package Passport, insieme al relativo package Local Strategy per gestire il login e il logout. Per gestire le sessioni sono stati usati i cookie e il salvataggio delle sessioni su database.

Dal lato front end invece vorrei far notare l'accessibilità delle finestre di dialogo, dalle quali si può uscire premendo il tasto esc e navigare tramite il tasto tab. In particolare ho seguito le linee guida del W3C che consiglia di implementare la navigazione con tab nella sola finestra, in modo tale da evitare di avere il cursore intrappolato nella pagina sottostante non visibile.

Schermata che mostra l'opzione di modifica del nome della categoria e delle opzioni di filtro — L'opzione modifica il nome della categoria e i filtri

Finestra di dialogo per confermare la cancellazione della categoria — Un esempio di finestra di dialogo dell'app

Cosa ho imparato da questo progetto

Costruendo questa app ho migliorato le mie conoscenze del back end:

Ho approfondito l'uso di Node.js e di vari pacchetti npm per estendere varie funzionalità
Usare un database relazionale
Strutturare l'app con un'architettura MVC