SAE501

Ce projet est une application web de prise de notes collaborative réalisé en groupe de 4 personnes sur une durée de 4 mois. Divisé en sprints, chaque personne a eu des tâches différentes à réaliser. 

Gestion de projet

Board Trello 

Au début de chaque sprint de deux semaines, nous avons affecté une personne a été affecté sur chaque tâche. Chaque sprint est un ensemble de fonctionnalités permettant de répondre à une sorte de petite problématique  :

• Sprint 1 : l'authentification

• Sprint 2 : la création de notes

• Sprint 3 : la collaboration

• Sprint 4 : la gestion des notes

• Sprint 5 : la gestion poussée

• Sprint 6 : la finalisation 

Pour que chaque membre de l'équipe sache ce qu'il doit réaliser pour quel sprint, nous avons mis en place un board Trello avec une colonne par sprint et une carte par tâche. Sur les tâches plus grandes, nous avons mis des sous-tâches. La case P détermine l'importance de la tâche (P0 = plus important, P3 = moins important) et l'autre case détermine l'estimation du temps requis. En contribuant à la réalisation et bon suivi de ce bord, j'ai dans un premier temps commencé à valider l'apprentissage critique AC35.01 :  Piloter un produit, un service ou une équipe.  

Retroplanning

En complément de l’organisation en sprints, nous avons mis en place un rétroplanning afin de structurer l’ensemble du projet à partir de la date de livraison finale. Celui-ci nous a permis d’identifier les grandes étapes du développement de l’application et de positionner chaque sprint dans le temps, tout en tenant compte des dépendances entre les fonctionnalités. Le rétroplanning a également facilité l’anticipation des phases critiques, comme la collaboration en temps réel, ainsi que des périodes où les alternants n’étaient pas présents à l’IUT, et l’intégration de marges pour les tests et les ajustements. Cet outil a ainsi contribué à une meilleure gestion du temps, gestion des risques et à une vision globale du projet, me permettant ainsi de valider l'apprentissage critique AC35.01 :  Piloter un produit, un service ou une équipe, en favorisant la collaboration entre les parties prenantes du projet et en m’appuyant sur une veille technologique et des modèles de l’innovation. 

Au milieu et à chaque fin de sprint, nous avons donné un rendez-vous avec le client pour présenter les nouvelles technologies. Celui-ci nous donnait des retours constructifs sur les améliorations à apporter ainsi que nous signaler les éventuels dysfonctionnements. Ces présentations servaient néanmoins à démontrer pourquoi il devait choisir notre projet et pas celui de quelqu'un d'autre, nous mettant dans la bonne voie pour valider l'apprentissage critique AC35.04 : Défendre un projet de manière convaincante. 

Moodboard

Maquettage du projet

Afin d’identifier la solution d’interface la plus adaptée, nous avons réalisé une maquette du site. De mon côté, je me suis principalement concentré sur le design des composants. Ceux-ci permettent de réutiliser des interfaces cohérentes (boutons, champs de formulaire, etc.) sans avoir à les dupliquer dans la maquette. Ainsi, si une modification est demandée par le client, il suffit d’ajuster le composant pour que le changement soit automatiquement appliqué à l’ensemble des écrans où il est utilisé. Dans notre exemple, nous avons décidé de modifier la couleur principale du site pour la passer d'orange à violet, nous n'avons pas eu besoin de changer la couleur partout dans la maquette.

La maquette permet avant tout de valider les choix d’interface et d’expérience utilisateur avant le développement. Elle offre une vision claire de la structure des pages et de l’organisation des contenus, tout en permettant de tester et d’ajuster les parcours utilisateurs sans écrire de code. Grâce à l’utilisation de composants réutilisables, elle garantit la cohérence graphique et fonctionnelle de l’interface et facilite les échanges avec le client et l’équipe en servant de support concret de discussion. Elle permet également d’anticiper les évolutions en simplifiant les modifications, ce qui réduit les incompréhensions, limite les retours tardifs et sécurise la phase de développement. Cette phase de pré-développement m'a permis de valider l'apprentissage critique AC35.03 : Concevoir un projet d’entreprise innovante en définissant le nom, l’identité, la forme juridique et le ton de la marque. 

Déroulement du développement

Structure du projet

Pour ma part, je me suis concentré sur le fonctionnement de l’application plutôt que sur son aspect visuel. J’ai développé les fonctionnalités liées à l’édition et au partage des notes, les permissions d’accès aux notes, l’export des notes ainsi que le système de notifications. Ne pas tous travailler sur la même fonctionnalité nous a permis d'à la fois éviter les problèmes pendant le merge et à également faire avancer le projet plus rapidement, en faisant en sorte que chaque personne de l'équipe puisse comprendre le code des autres personnes. En aidant mon équipe à être plus productif en leur aidant à se répartir les taches, j'ai favorisé la collaboration entre les parties prenantes du projet et j'ai validé l'apprentissage critique AC35.01 | Piloter un produit, un service ou une équipe.

Edition des notes

J’ai développé une page d’édition de notes en mode WYSIWYG (« ce que vous voyez est ce que vous obtenez »), basée sur Markdown, intégrant une barre d’outils ainsi que des raccourcis clavier pour faciliter la mise en forme. Le Markdown est un langage de balisage léger qui permet de mettre en forme du texte de manière simple et rapide, sans utiliser de code complexe. Il repose sur des symboles faciles à lire (comme #, *, _, -) pour structurer le contenu : titres, listes, liens, texte en gras ou en italique, etc. 

Cette page intègre un enregistrement automatique avec indication de l’état de sauvegarde, ainsi qu’un système de gestion des versions permettant à l’utilisateur de faire un retour en arrière sur certaines modifications. Le backend expose des endpoints sécurisés, comme la validation des données, sanitisation et contrôle des accès, et prend en charge le stockage des pièces jointes. L’interface est conçue pour être responsive et accessible, et l’ensemble de la solution est couvert par des tests unitaires, d’intégration et end-to-end (E2E). 

Dans ce contexte, la fonction checkFormatting() joue un rôle central. Elle analyse la sélection de l’utilisateur dans l’éditeur afin de détecter les styles appliqués (gras, italique, souligné, barré), ainsi que certaines propriétés comme la couleur du texte ou la couleur de surlignage. Pour cela, elle récupère l’élément sélectionné dans le DOM et exploite à la fois les styles calculés et les commandes natives du navigateur (queryCommandState). Elle met ensuite à jour les états internes de la toolbar afin de refléter en temps réel le format du texte sélectionné. 

Fonction checkFormatting

Un useEffect écoute les interactions de l’utilisateur dans l’éditeur à l’aide de deux fonctions principales : handleSelectionChange, qui gère les changements de sélection, et handleInput, qui met à jour les états liés au retour en arrière et au retour en avant (undo/redo).

Lors d’un changement de sélection, handleSelectionChange est déclenchée. Elle appelle d’abord checkFormatting() afin de synchroniser les styles du texte sélectionné avec l’interface. Elle vérifie ensuite si la sélection se situe bien dans la zone de l’éditeur, afin d’activer ou désactiver certaines fonctionnalités. Ce mécanisme permet également de détecter la sélection d’un élément de type image, afin d’autoriser son édition et de récupérer ses informations.

L’événement input est utilisé pour mettre à jour les états de undo/redo. Ces derniers sont calculés soit à partir de fonctions personnalisées exposées globalement, soit, en solution de secours, via les commandes natives du navigateur. Enfin, les écouteurs d’événements sont nettoyés lors du démontage du composant afin d’éviter les fuites de mémoire.

Dans le fichier MarkdownConverter.ts, la fonction markdownToHtml() est responsable de la conversion du contenu Markdown en HTML affiché dans l’éditeur. Elle transforme d’abord le Markdown en HTML via le parser marked, puis applique des traitements supplémentaires pour gérer certains cas particuliers comme les listes personnalisées, les vidéos et certains éléments HTML spécifiques.

Elle utilise aussi des placeholders pour préserver temporairement certaines structures pendant la conversion, puis les réinjecte dans le HTML final. Une étape de fallback (fonction de repli) est également utilisée pour gérer les cas où le parsing principal ne suffit pas. Ensuite, la fonction applique des styles inline (titres, marges, citations, listes, liens) afin d’assurer un rendu cohérent dans l’éditeur. Enfin, le résultat est nettoyé et sécurisé avec DOMPurify pour éviter tout contenu dangereux. En m’appuyant sur des concepts théoriques issus de l’informatique et des sciences de l’information, j'ai travaillé les apprentissages critiques AC34.01 : Développer à l’aide d’un framework de développement côté client et AC34.04 : Concevoir et développer des composants logiciels.

Partage des notes et gestion des permissions

Interface de partage de note avec les permissions

La route API /api/invite-share gère l’envoi d’une invitation de partage pour un document. Lorsqu’une requête est reçue, elle commence par vérifier que l’utilisateur est authentifié, puis contrôle qu’il est bien propriétaire du document concerné. Elle valide ensuite les données envoyées (ID du document, adresse mail et titre du document) et empêche notamment l’auto-invitation. Le système vérifie également que l’utilisateur destinataire existe en base de données avant de poursuivre. Si toutes les conditions sont remplies, un token JWT est généré afin de sécuriser l’invitation, puis un lien de confirmation est créé et envoyé par mail via un service dédié basé sur Cloudflare. En parallèle, une notification dans l’application est créée pour informer le destinataire. Enfin, la route renvoie une réponse indiquant si l’invitation a été envoyée avec succès ou non.  En respectant le droit et la vie privée, j'ai répondu à l'apprentissage critique AC35.02 : Maîtriser la qualité en projet Web.

Les utilisateurs ayant accès à un document partagé sont enregistrés dans la table Share, qui permet de gérer la relation entre les utilisateurs et les documents partagés. Cette relation est ensuite liée à la table Document afin d’associer les permissions de partage à chaque note. Le front-end détecte alors les droits de l’utilisateur pour afficher le document sur la page d’accueil et lui accorder les permissions correspondantes, comme l’accès en lecture ou en écriture. La structuration et la gestion de la base de données sont réalisées avec Prisma. 

Export des notes

L'export est géré dans le composant d'overlay ExportOverlay.tsx. Son fonctionnement se fait entièrement dans le front-end et ne nécessit aucune utilisation de l'API. Il propose d'exporter la note en PDF, fichier Word ou fichier texte. Le fichier est divisé en trois fonctions différentes qui gèrent chaque cas :

• La fonction exportAsPDF() convertit le contenu HTML de la note en image grâce à html2canvas, puis génère un document PDF avec jsPDF. Avant la génération, le DOM est normalisé afin de conserver correctement la mise en forme (listes, titres, texte barré, couleurs et surlignages). Le canvas obtenu est ensuite découpé pour gérer les sauts de page du PDF. 

Pipeline en 3 étapes de la fonction exportAsPDF: préparation du DOM → capture en image → découpage + génération PDF. 

• La fonction exportAsDocx() permet de générer un document Word .docx. Contrairement au PDF, elle ne réalise pas une capture visuelle mais reconstruit la structure du document à partir du HTML. Les éléments (paragraphes, titres, listes, images et styles de texte) sont transformés en objets compatibles avec la bibliothèque docx, puis assemblés en document. 

• La fonction exportAsTxt() exporte uniquement le texte brut de la note. Le HTML est d’abord converti en texte simple, puis nettoyé pour supprimer les éléments de syntaxe Markdown et les espaces inutiles. Le résultat est ensuite téléchargé sous forme de fichier .txt. 

La fonction handleExport() centralise toute la logique d’export. Elle récupère le contenu de la note, le convertit en HTML puis le nettoie avant de déléguer le traitement à la fonction correspondant au format choisi (PDF, Dicx ou Txt). Elle gère également les états de chargement et les erreurs. 

La gestion de l'export des notes selon le type de fichier souhaité m'a permis de continuer à travailler l'apprentissage critique AC34.04 : Concevoir et développer des composants logiciels, plugins ou extensions, tout en produisant du code fonctionnel, sobre et réutilisable et en veillant à la sécurité des systèmes et des données. La simplicité des fonctions contribue à la favorisation de la sobriété numérique. 

Gestion des notifications

Le service NotificationService.ts centralise toute la logique liée aux notifications de l’application en servant d’intermédiaire entre la base de données et les autres parties du système comme les routes ou les services métiers. Il permet de créer, récupérer, mettre à jour et supprimer des notifications tout en ajoutant des traitements supplémentaires comme la gestion des erreurs, la normalisation des données et la récupération des informations utilisateur associées. 

Récupération des notifications

La fonction getNotificationsForUser() récupère les notifications d’un utilisateur avec un système de pagination et de filtrage des notifications non lues. Elle effectue également un traitement des données afin de normaliser les messages et d’extraire les informations utiles, comme l’avatar de l’expéditeur. Si celui-ci n’est pas présent, il est récupéré via le UserService. La fonction getUnreadCount() retourne le nombre de notifications non lues.

Le fichier NotificationRepository.ts constitue la couche d’accès aux données pour tout ce qui concerne les notifications. Il regroupe les requêtes SQL permettant de créer la structure de la table, d’insérer, récupérer, mettre à jour et supprimer des notifications en base de données.

Il est utilisé par les services de l’application dans le fichier NotificationService.ts, qui s’appuie dessus pour exécuter la logique métier sans avoir à gérer directement les requêtes SQL. Cette séparation permet de distinguer clairement la gestion des données et la logique applicative, tout en rendant le code plus modulaire et réutilisable.

Côté API, plusieurs routes sous le préfixe /notification sont définies afin de gérer les actions liées aux notifications de l’utilisateur. Elles permettent notamment de récupérer les notifications, de compter celles non lues, de les marquer comme lues ou encore de les supprimer.

Par exemple, la route /notification/mark-read reçoit une requête contenant l’identifiant de la notification. Elle vérifie d’abord l’authentification de l’utilisateur ainsi que sa propriété sur la notification. Si les vérifications sont valides, elle appelle le NotificationService pour mettre à jour la notification en base de données en ajoutant une date de lecture, puis renvoie une réponse indiquant le succès ou l’échec de l’opération.

La route /notification/delete fonctionne sur le même principe : elle vérifie l’authentification et la propriété de la notification avant de la supprimer définitivement de la base de données via le service associé.

Enfin, la route /notification/unread-count permet de récupérer le nombre de notifications non lues pour un utilisateur. Elle s’appuie sur le service pour effectuer un comptage en base de données et renvoie ce nombre afin de l’afficher dans l’interface utilisateur, par exemple sous forme de badge.  

Ces routes sont utilisables sur plusieurs composants et pages différents. Cette phase m'a permis de répondre à la vaidation de l'apprentissage critique AC34.02 : Développer à l’aide d’un framework de développement côté serveur. 

Le composant NotificationOverlay.tsx est une interface latérale qui affiche les notifications de l’utilisateur. Il récupère les notifications depuis l’API lorsque le panneau est ouvert, puis les affiche sous forme de liste avec différents types de messages (notifications système, invitations de partage ou demandes spécifiques). Il est adapté pour être conforme aux standards du Web et aux normes d’accessibilité, répondant à la validation de l'apprentissage critique AC34.03 : Développer des dispositifs interactifs sophistiqués. 

Il permet également d’interagir avec les notifications directement depuis l’interface, notamment en les marquant comme lues ou en les supprimant. Ces actions sont synchronisées avec l’API afin de mettre à jour la base de données, tout en mettant à jour l’état local pour un affichage immédiat et en veillant à la sécurité des systèmes et des données. 

Bilan

Ce projet m'a permis de travailler sur un gros projet avec une durée de plusieurs mois, me permettant d'utiliser des technologies comme Next.js fraichement vues pendant les cours universitaires ainsi que de continuer à utliser des technologies déjà vues comme TailwindCSS. Travailler en équipe sur plusieurs mois tout en prenant en compte le fait d'avoir 2 alternants sur 4 m'a également permis d'adapter ma charge de travail et apprendre à prioritiser mes taches, en me focalisant tout d'abord sur les fonctionnalités les plus importantes à faire, comme l'édition et le partage des notes dans un premier temps, et les fonctionnalités secondaires comme l'export de notes dans un second temps. 

J'ai apprécié travailler sur ce projet riche en compétences à acquérir, que ce soit des compétences universitaires. Cette expérience a contribué à renforcer plusieurs de mes soft skills comme la gestion du temps, la confiance en moi et le travail en équipe. Au début du projet, j’étais plutôt réservé et j’avais tendance à rester en retrait. Cependant, au fil du temps, j’ai appris à prendre la parole plus souvent et à exprimer plus facilement mon point de vue lors des prises de décision au sein de l’équipe.  

J'ai validé les apprentissages critiques AC34.01 : Développer à l’aide d’un framework de développement côté client, AC34.02 : Développer à l’aide d’un framework de développement côté serveur, AC34.03 : Développer des dispositifs interactifs sophistiqués et AC34.04 : Concevoir et développer des composants logiciels de la compétence Développer, et les les apprentissages critiques AC35.01 : Piloter un produit, un service ou une équipe, AC35.02 : Maîtriser la qualité en projet Web ou multimédia, AC35.03 : Concevoir un projet d’entreprise innovante en définissant le nom, l’identité, la forme juridique et le ton de la marque et AC35.04 : Défendre un projet de manière convaincante de la compétence Entreprendre.