Je réalise un clone de Trello avec Meteor, React et Mongo
Ce que je fais pour pratiquer le développement, c'est de créer ou recréer des applications existantes. N'exagérons rien, je ne propose pas autant de features que ces dernières, mais le but est de réaliser les fonctionnalités qui me plaisent chez ces applications un temps assez court (quelques heures ou quelques jours).
Pourquoi Trello ? 🤔
Trello est une application fascinante qui a donné une vraie direction à l'organisation de projets via des outils web très simples. Je dirais même que toute sa technicité se trouve dans sa simplicité. C'est un outil que j'aime beaucoup, en tant qu'utilisateur ou aussi pour sa partie code.
Il y a plusieurs défis à relever sur Trello, la partie temps réel, ainsi que des éléments de design comme le drag-and-drop etc... que je trouve génial.
Un excellent moyen de s'exercer !
Les outils que je choisis pour faire ce projet ⚒️
Une fois n'est pas coutume je vais me servir de Meteor.js pour pouvoir gérer à ma place le temps réel via le système de Tracker.
Toujours en full Typescript, bien entendu !
Pour la partie graphique j'utilise React ainsi les librairies suivantes :
- twind : j'en ai parlé dans un précédent article
- react-hook-form : pour accélérer la création des formulaires
- moment : pour manipuler et formater les dates
- sweetalert2 : pour les modals de confirmation
- react-icons : pour les icônes
Pour le stockage j'utilise MongoDB.
Quelles sont mes observations après avoir développé ce prototype 🧐
Le but n'est pas de refaire Trello en entier, j'ai mis de côté la partie de gestion de compte utilisateurs.
Ce n'est pas le prototype le plus compliqué du monde si on se contente d'implémenter les fonctionnalités suivantes :
- Création de boards
- Création de listes attachées à un board
- Création de tâche attachées à une liste
- Mise à jour du board (cascading update...)
- Suppression d'un board
- Suppression d'une tâche
- Suppression d'une liste
Les difficultés rencontrées 😅
Les mécaniques les plus techniques à gérer sont la partie Drag and Drop, j'ai compté 3 types de cas :
- On déplace une tâche d'une liste à l'autre
- On déplace une tâche dans la même liste
- On déplace la liste entière
Ce que j'ai appris 🤓
La gestion du drag and drop en React est assez subtile, notamment le fait de gérer où est-ce que l'on va effectuer le drop, gérer les événements et savoir quand et pourquoi il faut arrêter les propagations. Je le redis, tout cela est subtil et vous demandera quelques essais avant que cela soit fructueux !
On regarde le résultat ? 😁
Au bout de 4 heures environ, j'ai pu avoir des essais fonctionnels de bout en bout, et le tout avec le temps réel !
Je reviendrai sur cet exercice avec un format différent pour vous montrer en détails comment j'ai pu arriver à ce résultat.
A très vite 😃
Alexandre P.
Développeur passionné depuis plus de 20 ans, j'ai une appétence particulière pour les défis techniques et changer de technologie ne me fait pas froid aux yeux.
