Todo list Next.Js

Pourquoi j’ai créé une To do list ?

J’ai souhaité créer une to do list après ma formation React pour apprendre à utiliser Next dans l’optique d’apprendre un framework full-stack JavaScript (même si par la suite je me suis rendu compte que Next est plutôt un framework front-end).

 

Pourquoi je ne suis pas le seul contributeur du projet ?

A un certain degré d’avancement dans le projet et après avoir bien testé NextJs par moi-même, j’ai voulu avoir du feedback concernant mon code. En effet, s’entrainer à coder c’est bien mais si personne n’est là pour vérifier la qualité de mes projets, je sais que je passe à côté de beaucoup d’erreurs et d’opportunités d’améliorations. C’est pour cela que j’ai décidé d’investir dans ma formation en engageant un professeur de code. Il m’a beaucoup aidé et m’a fait passer à un niveau supérieur sur NextJs.

 

Le choix des technologies

Librairie de composants/style :

J’ai choisi d’utiliser Tailwind CSS couplé avec Tailwind/UI dont j’avais fait l’acquisition l’année dernière. C’est une librairie de composants React, Vue et HTML bas niveau. Honnêtement je pense qu’aujourd’hui il y a beaucoup mieux (et gratuit) que Tailwind/UI, si je devais recommencer je ne l’utiliserais pas, notamment car les composants ne sont pas disponibles en TypeScript.

 

ORM :

J’ai utilisé Prisma pour communiquer avec une base de données PostgreSQL.

 

TypeScript :

TypeScript m’a permis de rendre mon code plus fiable et plus robuste. Même s’il cause un temps de développement initial plus long, il permet de prévenir beaucoup d’erreurs.

 

Vitest :

Pour rendre mon code plus maintenable à long terme, j’ai souhaité ajouter des tests à mon code. J’ai opté pour Vitest qui est une surcouche de Jest taillée pour Next.Js. Ayant très peu de code purement .ts et surtout du code .jsx, j’ai décidé de tester l’affichage et l’interactivité de mes composants.

 

Jose/Bcrypt :

J’ai choisi de créer moi-même un système d’authentification par e-mail et mot de passe plutôt que d’utiliser des providers avec Next/Auth. C’est dans une volonté d’apprentissage que j’ai fait ce choix là.

 

Formik/Yup :

Formik est une librairie pour gérer les formulaires. Son implémentation m’a permis d’uniformiser la gestion des formulaires du site. Formik fonctionnant avec Yup, j’ai dû remplacer zod (que j’utilisais initialement) par celui-ci. Yup permet de valider les formulaires.

 

Zustand :

Zustand est une librairie de gestion d’état sous React qui m’a permis d’optimiser les performances du site en réduisant le nombre d’appels à la base de données.

 

Les erreurs que j’ai commises et la leçon que j’en ai tiré

La plus grosse erreur que j’ai faite est je pense d’avoir utilisé le page router à la base. Je l’ai fait par facilité car c’est le seul que j’avais déjà testé. Le problème c’est que tous les projets récents sont codé dans le app router donc il me valait mieux apprendre un système que les gens utilisent. De plus, le page router oblige à séparer les composants spécifiques aux pages dans un dossier différent de celui qui contient les pages puisque sinon ça crée des routes pour chaque composant. Avec le app router on n’a pas ce problème.

Mon autre grosse erreur c’est de ne pas avoir utilisé de librairie pour gérer mes formulaires. J’ai perdu beaucoup de temps car j’avais créé un système de validation des inputs from scratch alors que avec Formik + Yup la validation des formulaires est simple, mieux réalisée et uniforme à tous les composants.

 

Qu’est ce que ce projet m’a apporté

Quand j’ai commencé ce projet, je n’avais quasiment jamais testé NextJs. Après avoir créé ce projet je me sens à l’aise avec le framework, même s’il me reste toujours des choses à apprendre. J’ai aussi profité de ce projet pour consolider mes connaissances en TypeScript et en React (hooks, cycle de vie des composants, etc…).

En somme c’était un projet intéressant pour prendre en main NextJs, mais peut-être pas pour le maîtriser de fond en comble. Pour le prochain projet, j’ai opté pour un e-commerce qui à mon avis nécessitera d’utiliser de nouvelles facettes du framework.