Post-It est une web-app responsive de gestion de notes fortement inspiré de Google Keep. Elle a été développée dans le but de mettre en pratique des connaissances acquises sur l'écosystème React à travers des MOOCs.

La web app permet de :

• Créer un compte
• Se connecter
• Créer une nouvelle note
• Modifier une note existante
• Supprimer une note

La web app se base sur l'API Post-It pour persister les données de chaque utilisateur.

La web est dans un état fonctionnel minimal. De nombreuses fonctionnalités sont encore à ajouter parmi lesquelles :

• Drag & Drop des notes
• Permettre la connexion à partir d'un compte Google, Facebook, etc..
• Modification optimiste sans attendre le retour de l'API pour fluidifier l'expérience utilisateur. Rollback en cas d'erreur.
• Permettre de choisir une couleur pour chaque note.
• Modification du mot de passe d'un compte.
• Implémentation de l'écran de mot de passe oublié.

Le web app est hébergée sur Netlify.
Le compte suivant de démonstration peut être utilisé pour découvrir l'application sans créer de compte :

• mail : [email protected]
• mot de passe : postit123

L'API Post-It est quant à elle hébergée sur heroku

La web app utilise React pour définir les interfaces graphiques. Le choix a été fait d'utiliser massivement les functional components et d'utiliser les hooks pour gérer les états et les effets de bords.

Ce projet a été initialisé et configuré grâce à CRA (Create React App)

La librairie de composants React Bootstrap a été utilisée. En plus des composants offerts par React Bootstrap, Bootstrap (V4) a été utilisé afin de pouvoir utiliser ses nombreuses classes utilitaires. Vu la simplicité des écrans de l'application, le système de Grid de Bootstrap a été très peu utilisé au profit de l'utilisation généralisée de flexbox.

Axios a été priviligié pour faire les appels à l'API.

Les icônes de l'application sont toutes issues de react-icons.

L'affichage des notes est gérée par le module react-masonry-css, implémentation optimisé pour React du principe de masonry qui optimise le placement d'éléments en fonction de leur hauteur et de l'espace vertical disponible.

Le choix a été fait au début du projet de ne pas utiliser de bibliothèque de gestion d'état. La compléxité du projet ne me semblait pas nécéssité l'utilisation d'une telle bibliothèque et ça permettait de se concentrer sur l'apprentissage de React.

Les états locaux, spécifiques à un composant ont été extraits dans des custom hooks quand ils devenaient trop imposant pour réduire au maximum la définition des composants aux aspects graphiques

Un custom hook de gestion des informations de l'utilisateur s'interfaçant avec l'API Post-It pour se connecter est rendu global à toute l'application grâce à l'utlisation d'un Contexte React.

Un custom hook est dédié à la gestion des notes d'un utilisateur. Celui-ci s'initialise avec les informations de l'API puis permet de créer, modifier et supprimer une note en s'interfaçant avec l'API Post-It. Ce custom hook est rendu accessible à tous les composants de l'écran d'affichage des notes (visible ci-dessous) grâce à l'utilisation d'un Contexte React. L'utilisation d'un Contexte n'était pas nécessaire dans ce cas étant donné la faible compléxité de l'arbre de composants de cette écran. Cela permettait cependant de se familiariser avec cette nouvelle fonctionnalité de React.

Ce choix de ne pas utiliser de bibliothèque bien qu'enrichissant a rapidement rendu la gestion des états fastidieuse. Si c'était à refaire, je choisirais une solution plus structurée et éprouvée comme Redux ou je privilégierais une solution comme react-query pour simplifier l'interfaçage avec l'API Post-It.

Pour utiliser la web app en local, yarn est nécessaire.

Après avoir cloné le dépôt Git. Tapez la commande suivante pour installer les dépendances :

yarn

Pour lancer l'application, tapez la commande :

yarn start

Pour bundle l'application, il suffit de taper la commande :

yarn build