App de liste de courses—Projet perso React — Case Study

Récemment, j’ai appris React en suivant le cours Udemy d’Andrei Neagoie : “The Complete Web Developer in 2020: Zero to Mastery”. Vers la fin du cours, on réalise un projet qui utilise une API de reconnaissance faciale. Mais comme souvent avec les projets Udemy, on suit ce que fait le prof, on comprend plus ou moins et on répète ce qu’il fait. J’avais envie de vraiment assimiler ce que j’ai appris et j’ai décidé de faire un side project.

Il est disponible ici.

Le concept

Le projet est une application web faite avec React. Il permet de tenir une liste de courses en y ajoutant des objets que l’on peut modifier ou supprimer par la suite. On peut trouver une section “Produits” qui contient une liste de produits par défaut que l’on peut cocher pour les ajouter d’un coup à la liste.

Les objets et produits entrés peuvent être divisés en trois catégorie : “En rayon”, “Produits frais” et “Congelés”. Ils sont ensuite séparés en trois sections dans la liste.

À gauche la liste de courses avec quelques éléments cochés | À droite la liste de produits par défaut

Pourquoi une liste de course ?

Au début de la période de Covid, j’ai commencé à faire plus souvent les courses pour éviter à mes parents de sortir. Je prend toujours une liste de courses avec moi sinon j’oublie la moitié de ce que je suis venu prendre. Et j’aime l’organiser avec les trois catégories que j’ai cité plus tôt pour respecter la chaîne du froid et faire mes courses de manière optimale.

Je ne supprimais jamais ma liste quand j’en avais fini, je la gardais et je continuais à y ajouter de nouvelles choses. La raison est un peu difficile à expliquer mais ça ira mieux avec un exemple.

Quand je devais faire les courses, la vieille au soir, je m’asseyais avec ma mère et éventuellement ma soeur et je prenais la longue liste de courses. J’allais sur chacun des éléments et je disais : “Est-ce qu’on a besoin de X ?”, ou encore, “Il reste combien de Y ?”. Ça nous permettait de faire le tour de ce dont on avait besoin et parfois de nous rappeler de certaines choses que nous avions oublié.

Je me suis dit qu’une application avec une liste de produits que je peux cocher pour me faire rapidement une liste m’aiderait beaucoup. Mais après tout pourquoi ne pas la faire moi-même ? Ça me permettrait de résoudre un problème que je rencontre et en même temps je pourrais m’entraîner sur une technologie que j’ai récemment appris. C’est comme ça qu’a commencé ce projet.

Les fonctionnalités actuelles

Voici les fonctionnalités que présente l’application pour l’instant :

  1. Une liste de course où l’on peut :
  • Ajouter des objets avec leur nom, quantité et catégorie
  • Modifier des objets
  • Supprimer des objets
  • Cocher les objets achetés
  • Vider la liste
  • Rechercher un objet dans la liste
  • Copier la liste sous forme de texte dans le presse-papier

La liste est automatiquement divisée en trois sous listes pour chacune des catégories.

2. Une liste de produits pré-enregistrés qui a plus ou moins les mêmes fonctionnalités que la liste de courses sauf pour les points suivants :

  • Les produits n’ont pas de quantité
  • On peut cocher les produits pour les ajouter à la liste
  • La liste peut être vidée ou réinitialisée pour récupérer les produits par défaut

Le futur de l’application

La prochaine étape que je compte entamer est l’ajout d’un back-end. J’ai aussi appris à utiliser Node.js et Express pendant le cours Udemy et j’aimerais mettre ces compétences à profit pour implémenter des comptes utilisateur et une base de données. Pour l’instant, les données persistent seulement dans le local storage et sont donc liées à un appareil. En utilisant une base de données, les utilisateurs pourraient retrouver leur données sur différents appareils et partager leur liste avec leur famille.

Dans son état actuel, l’application se prête un peu mieux à une utilisation sur mobile, la version desktop étant plus ou moins la même mais en un peu plus large. J’aimerais éventuellement faire une version qui tire mieux profit d’un plus grand écran.

Une seule liste de course est disponible à l’heure actuelle. Je voudrais permettre aux utilisateurs d’en avoir plusieurs à l’avenir. Ils pourraient en avoir une pour le supermarché et une pour le magasin de bricolage par exemple.

Conclusion

C’est tout pour la présentation de mon projet. J’écrirai éventuellement un autre article quand j’aurai assez progressé, probablement quand j’aurai fini d’implémenter le back-end. Merci d’avoir lu jusqu’au bout, et à une prochaine fois !