UI pour site E-commerce en ReactJS

Afin de m’exercer sur la librairie JavaScript React, je me suis amusé à développer une interface utilisateur pour un site de vente en ligne de croquettes fictif : Woufflenheim, la bonne croquette alsacienne !

Les technologies utilisées

Ce projet est une simple application single-page sans back-end, que j’ai réalisé à l’aide des connaissances que j’ai pu acquérir avec le cours React débutant d’Openclassrooms. J’ai employé le serveur de développement Vite, car celui-ci me semblait plus rapide et simple d’utilisation que « Create React App ».

En terme de fonctionnalités, l’application permet de trier, filtrer, et d’ajouter au panier des produits, à l’aide des hooks React UseState et UseEffect. L’interface est constituée de composants codés en syntaxe JSX. Le panier est enregistré dans le Local Storage du navigateur, au format JSON, ce qui permet à l’utilisateur de le retrouver en revenant sur la page.

En l’état actuel du développement, je n’ai pas utilisé de framework CSS, même si je n’exclus pas d’utiliser Tailwind CSS dans le futur.

Pourquoi une application de vente de croquettes ?

La base de code de départ venait du cours OpenClassroom, et avait trait à la vente en ligne de plantes. Cela ne me convenait pas, et je trouvais plus amusant de créer quelque chose de différent. Ayant déjà travaillé dans le SEO pour le site de vente en ligne d’aliments pour animaux zooplus, cela m’a donné l’idée d’une marque de croquette fictive alsacienne, au nom évoquant un village typique. En outre, le sujet me paraissait plus opportun pour ajouter des fonctionnalités de tri et de filtrages intéressantes.