Projet

Des fournisseurs fictifs

Un projet scolaire réalisé en REACT et avec Tailwind représentant de ce que pourrait avoir l’air une application Web de gestion d’inventaire.

Tester le ici

Genèse du projet

Un cour de programmation Web sur REACT

Ce projet a été réalisé dans le cadre d’un exercice scolaire visant à concevoir une application web de gestion d’inventaire. L’objectif était de simuler le fonctionnement d’une entreprise spécialisée en matériel de salle de bain et de cuisine, en intégrant la gestion des produits, des fournisseurs et des livraisons.

Le projet m’a permis de mettre en pratique mes compétences en React, Tailwind CSS et en structuration des données via le Context API.

Objectifs

Créer une interface permettant l’ajout, l’affichage et la modification de produits
Intégrer une navigation fluide entre les différentes pages du site (Accueil, Produits, Fournisseurs)
Afficher des statistiques en temps réel sur la page d’accueil (quantité totale, par catégorie, date du jour)
Valider les champs du formulaire selon des critères précis (regex, longueur, valeurs minimales)

Technologies utilisées

React pour la structure des composants et la navigation.
Tailwind CSS pour le design épuré et responsive
Context API pour centraliser les états des produits et des fournisseurs
JavaScript pour la logique de validation et la gestion des interactions utilisateur

Défis rencontrés

L’un des défis majeurs a été de structurer les composants pour qu’ils soient à la fois modulaires et interconnectés.

Solutions apportée

Mise en place d’un contexte global pour éviter le passage de props en cascade
Création d’un formulaire dynamique avec validation en temps réel et messages d’erreur ciblés
Gestion de la navigation avec un menu latéral clair et des liens actifs identifiable

Ce que j’ai appris / Perspectives futures

Ce projet m’a permis de consolider mes bases en React, notamment dans la gestion des états globaux, dans l’utilisation d’un Contexte API et dans la mise en place d’un système de navigation. Il m’a aussi donné l’occasion d’explorer Tailwind CSS pour améliorer l’ergonomie visuelle.
Je vois des pistes d’évolution vers une version connectée à une base de données réelle, avec authentification et gestion des utilisateurs.

Historique

AEC Développement front-end

Je suis des cours en ligne à temps partiel les soirs de semaine dans l’AEC en développement Web front-end et ce projet est un travail demandé en classe.
J’avais une mise en contexte et des restrictions à suivre afin de réaliser le site.

Le code

React

Le but était de mettre en pratique les différents concepts de programmation avec le framework REACT que nous avions vus depuis le début de la session.
Il se devait d’avoir des composants pour les différents aspects du projet le tout relié à un contexte.

L’installation c’est faite avec le plugin Vite en local.
La navigation a été mise en place avec react-router-dom.

JavaScript

Juste un mot pour dire que les validations des formulaires ont été placées dans un fichier JavaScript séparé de REACT et importé dans le projet.
Je voyais dans cette méthode une façon d’écrire du code réutilisable et propre.
Aussi, les listes des fournisseurs et des produits étaient fournies au début du projet.

Tailwind

Ce n’était pas requis dans le projet, mais comme nous venions de l’apprendre dans un autre cours, je me suis donné ce défi supplémentaire. En fait, cela a rendu la mise en place d’un design beaucoup plus efficace. J’ai pu placer mes efforts sur le travail en RÉACT.
C’était la première fois que j’utilisais Tailwind intégré dans un projet. Avant, dans le cadre du cours, nous l’utilisions avec le CDN. En suivant la documentation d’installation avec Vite, je l’ai facilement mise en place.

Fonctionnalités

Affiche la date du jour.
Calcule et affiche l’inventaire total et il est mis à jour selon les modifications.
Affiche la quantité selon la catégorie du produit.
Possibilité d’ajouter des produits et de les modifier