Yotion est un projet visant à créer un clone de Notion, une application collaborative qui permet de gérer des notes, bases de données et tâches dans une interface unifiée. Pour Yotion, j'ai utilisé Next.js et TypeScript, ce qui m'a permis de construire une application rapide, robuste et performante, en reproduisant les principales fonctionnalités de Notion.
Le développement de Yotion m'a confronté à divers défis techniques, notamment en matière de performance et d'interactions collaboratives.
L’utilisation de Next.js et TypeScript a permis de garantir une application fluide et évolutive, tout en renforçant mes compétences en développement full-stack.
NextJs
TailwindCSS
ConvexBDD
API
Next.js avec Clerk pour l'authentification
Concernant l'authentification, j'ai intégré Clerk, une solution moderne et sécurisée qui facilite l'inscription et la connexion des utilisateurs via Google, GitHub ou email. Cette approche offre une expérience utilisateur simplifiée, tout en garantissant la sécurité des données personnelles.
Barre latéral
Une fois connectés, les utilisateurs accèdent à une barre latérale qui facilite la navigation à travers les pages de l'application. Cette barre propose des options telles que la recherche de notes par titre, la personnalisation du thème, et la création de nouvelles notes. Chaque note peut être modifiée ou supprimée directement depuis la barre latérale. Les utilisateurs peuvent également accéder à une poubelle pour voir les notes supprimées, avec la possibilité de les restaurer ou de les supprimer définitivement.
Fonctionnalité avancée : gestion des sous-notes
Une des fonctionnalités clés de Yotion est la possibilité de créer des sous-notes de manière récursive, offrant une grande flexibilité dans l'organisation des informations. Les utilisateurs peuvent sélectionner une note principale et y ajouter des sous-pages pour mieux structurer leurs idées. Cette fonctionnalité permet de diviser une tâche ou un projet en plusieurs niveaux de détail, facilitant ainsi la gestion de données complexes ou d'idées en cours d'élaboration. Chaque sous-note peut être modifiée ou supprimée de manière indépendante, tout en restant intégrée dans la hiérarchie de la note principale.
Rédaction de notes : une expérience Notion-like
Pour offrir une expérience de rédaction fluide et interactive semblable à celle de Notion, j'ai intégré Editor.js dans Yotion. Grâce à cet outil, les utilisateurs peuvent créer et organiser leurs contenus avec une grande flexibilité en utilisant des commandes contextuelles. Par exemple, en tapant '/' dans l'éditeur, ils peuvent insérer des éléments tels qu'une table, une image, ou des titres de différents niveaux (comme /heading1).
Afin de gérer efficacement les fichiers et les images, j'ai couplé Editor.js avec Convex, une solution back-end qui facilite l'upload et le stockage de fichiers. Cette combinaison me permet de proposer une gestion intuitive des médias tout en assurant une synchronisation rapide et fluide des données, directement au sein de l'éditeur.
Recherche rapide de notes via raccourci clavier
Pour améliorer la productivité et la navigation au sein de Yotion, j'ai mis en place un raccourci clavier intuitif, similaire à celui que l'on trouve dans des outils comme Notion. En appuyant sur Ctrl + K, les utilisateurs peuvent faire apparaître une fenêtre modale qui leur permet de rechercher des notes par titre. Cette fonctionnalité rend la navigation plus fluide et rapide, surtout lorsque l'on travaille sur de nombreuses notes à la fois. Une fois la note recherchée, il suffit de la sélectionner dans les résultats pour y accéder directement.
Fonctionnalité de publication des notes avec mode Preview
Dans Yotion, j'ai implémenté une fonctionnalité permettant de publier des notes afin que les utilisateurs puissent partager leur contenu avec d'autres, même à l'extérieur de l'application. Chaque note dispose d'un mode Preview, où la modification du contenu est désactivée, permettant ainsi une consultation en lecture seule.
Pour cela, un lien unique est généré pour chaque note publiée, contenant l'ID de la note ainsi qu'un paramètre indiquant le mode Preview. Lorsque ce lien est accédé, l'application vérifie si l'utilisateur est connecté et, si oui, si c'est bien l'auteur de la note. Si l'utilisateur est l'auteur, il pourra modifier la note, sinon il aura accès uniquement à la version en lecture seule. De plus, même si un utilisateur n'est pas connecté, il peut toujours visualiser la note en mode Preview, ce qui permet de partager du contenu librement sans nécessiter de compte.