Cas pratique que l'on retrouve un peu (trop) partout, la "TODO list" n'en est pas moins un parfait sujet pour étayer ses compétences front-end et back-end, à condition d'aller un peu plus loin qu'une simple liste statiques interrogeant une base de données mono-table-mono-colonne, on est d'accord.

Back

Cette fois, je n'ai pas opté pour la facilité : pas de Sails.js, pas de gros framework tout fait qui fait tout. Je me lance sur une stack Node.js basée sur express, une petite architecture maison 3-tiers (data / logic / api), et pour bien lier tous les ingrédients, j'utilise la méconnue librairie d'injection de dépendances Piquouze (article à venir).

Couche "Data"

Côté base de données, j'ai opté pour un duo MySQL / MongoDB, couplés respectivement avec Sequelize et Mongoose. Le choix d'avoir les deux technologies n'était clairement pas indispensable, et s'apparente plus à une expérimentation technique qu'à un choix stratégique. :)

Couche "Logic"

Toutes les règles métiers sont implémentées dans cette couche applicative, et celle-ci ne communique qu'avec la couche data. Techniquement, rien de très spécial ici : j'utilise quelques librairies qui sont pour moi des classiques : ramda, request-promise, bluebird, etc.

API

Comme bien souvent dans mes projets personnels, j'utilise une surcouche maison d'express.js, facilitant son utilisation avec mon système d'injection de dépendances. Cette surcouche simplifie grandement la gestion de l'authentification des appels entrants. Elle est encore à l'état expérimental, mais j'aimerais, à terme, la rendre open source.

Je n'ai pour le moment implémenté que l'authentification oauth basique (login/password/access token) et la connexion depuis un service tiers, ici Google.

Front

Parfois, une démo est plus parlante qu'un grand discours :

Côté front-end, je me suis basé sur la dernière version en date de React.js, pour profiter de toutes les nouveautés de la libraire, notamment les hooks.

J'ai utilisé react-beautiful-dnd pour le drag and drop des éléments, et si la mise en place a pris un peu de temps, le résultat est vraiment bluffant, aussi bien sur PC que sur mobile.

Démo

Assez parlé, voici le lien pour découvrir et vous faire une idée par vous-même : https://bfront.lab.corentindesfarges.fr/

Évolutions

Si pour le moment je n'ai pas une grande bande passante pour travailler sur ce projet, j'ai toutefois identifié les prochaines évolutions à venir :

• Gestion de listes (bah oui c'est une TODO list), un peu à la manière d'un tableau Kanban
• Ajout des deadlines et rappels automatiques
• Refonte de l'écran "Rapport quotidien"

Allez, c'est tout pour aujourd'hui !

À très bientôt

Corentin