Gestionnaire d'évènements
Application client serveur développée en React.js, Node.js, Express, Typescript, MongoDb, Bootstrap.
Réalisé en 2022
L'application cliente est réalisée en React.js. Les librairies suivantes ont été utilisées : Formik pour la gestion des formulaires, React-bootstrap, React-table et React-tooltip pour l'interface utilisateur, React-router-dom pour la navigation.
L'application serveur est réalisée en Typescript, exécutée par Node.js, et utilise le framework Express, ainsi que les librairies suivantes : Bcrypt et Jsonwebtoken pour l'authentification, Mongoose et Mongoose-unique-validator pour la gestion de la base de données.
Les données de l'applications sont sauvegardées en base de donnes orientée documents MongoDb.
L'application permet de créer et partager des évènements qui seront visibles par les autres utilisateurs.
L'application repose sur le système d'authentification proposé par react-router-dom, basé sur l'échange de tokens d'identification générés par le serveur.
Les pages de l'application ne sont accessibles qu'aux utilisateurs authentifiés. Les évènements ne sont modifiables ou supprimables que par leur auteur. Par contre les évènements peuvent être signalés par tous les autres utilisateurs.
Le formulaire de création des évènement utilise la librairie Formik pour le traitement de la validation des champs du formulaire.
Bootstrap et React-Bootstrap ont été utilisé pour l'UI de l'application et pour certains composants : la tables des évènements, la barre de navigation, la mise en forme des formulaires, etc...
Le tableau des évènements propose des filtres dynamiques selon les catégories, la ville et le prix de l'évènement (filtrage du dataset à afficher) et un mécanisme "responsive" permet de masquer certaines colonnes en fonctions de la résolution horizontale de l'écran.
La librairie react-tooltip a été utilisée pour ajouter des tooltips d'aide à l'utilisation de l'application sur de nombreux composants.
Le tableau d'affichage des évènements créés par les utilisateurs.
Les filtres des données sont dynamiques. Le tableau est responsive, certaines colonnes disparaissent en fonction de la résolution de l'écran.
Authentification à l'application
Toutes les pages de l'application web sont protégées par un composant d'identification qui vérifie la présence d'un token d'authentification délivré par le serveur. Si ce n'est pas le cas, l'utilisateur est redirigé vers cette page de Login.
Formulaire de création d'un nouvel évènement.
La vérification des données est réalisée côté client au moyen de la librairie Formik.
