Site web évènementiel
Introduction
Après avoir suivi plusieurs cours en ligne sur Node.js, j'ai décidé de me lancer dans un projet pour mettre en pratique ce que j'avais appris.
Mon choix s'est porté sur la création d'un site événementiel, qui inclut un système de messagerie entre utilisateurs, des notifications pour les informer des messages reçus, des invitations à des événements ou des évaluations de leurs événements.
Outils utilisés
Nodejs
JavaScript
Fastify
Bootstrap
MySQL
DBeaver
Visual Studio Code
Leaflet
FullCalendar
Fonctionnalités principales
Survoler l'image avec la souris permet de voir l'option Télécharger une image, permettant de sélectionner une affiche pour l'événement depuis ses fichiers et de pouvoir prévisualiser ce qui a été téléchargé.
L'utilisateur peut aussi choisir si les inscriptions sont ouvertes pendant l'événement ou si une date limite d'inscription doit être définie.
Inscrire un lieu ou une adresse dans le champ Lieu de l'évènement permet de faire appel à une API de géocoding permettant de remplir la liste des lieux du champ Sélectionner le lieu avec les 5 adresses les plus pertinentes.
En inscrivant un nombre de places limité, si celui-ci est atteint, les inscriptions se fermeront automatiquement.
La modification d'un événement reprend le même formulaire que celui d'ajout, tout en ajoutant 2 boutons permettant d'annuler l'événement ou de le supprimer.
Sur la page principale du site, l'utilisateur peut trier les événements par mots-clés, nom d'événement, lieu et par statut (actif ou passé).
Sur cette page est généré un calendrier interactif via la bibliothèque JavaScript FullCalendar, permettant à l'utilisateur de visualiser plus facilement tous les événements auxquels il participe avec l'heure de début et de fin.
Toutes les participations de l'utilisateur sont regroupées dans un tableau. Ils sont triés par date de début d'évènement et on peut rechercher un événement par son nom.
Dans le tableau, on retrouve une colonne Évaluation indiquant si l'événement est fini ou non, et si l'utilisateur a fait une évaluation dessus. Si l'évènement est terminé, un lien apparait permettant d'accéder à la page évaluation de l'évènement.
Cette page permet aux utilisateurs de voir les évaluations faites sur un événement, et pour ceux qui ont participé, de pouvoir évaluer ou modifier leur évaluation.