Objectif

Créer un site qui donne à l'utilisateur la possibilité d'acheter des pressons et de créer son propre set de A à Z.

Inspirations

Sur pinterest j'ai trouvé pas mal de posters sur le thème des pressons. Je me suis inspirée de leurs aspects colorés et des associations de polices.

Design

J'ai créé mon logo en alliant les polices "Monsieur la Doulaise Regular" et "Funnel Display" avec des variations de bleus et de violets foncés.

Comme éléments graphiques, j'ai utilisé des étincelles qui apparaissent sous plusieurs formes dans mon projet.

Développement

La partie principale de mon projet est l'éditeur d'ongles. Pour le créer j'ai utilisé la librairie Fabric Js. C'est une librairie qui permet de créer des canvas interactifs. Les objets qui y sont ajoutés sont déplacables et modifiables à la guise de l'utilisateur. Il y a très peu de documentation sur la dernière version. J'ai donc utilisé la version 5.5.2

J'ai dessiné 16 itérations de toutes les décorations et nailart avec Adobe Illustrator et je les ai exportés sous le format Webp. J'ai stocké toutes ces images dans un fichier JSON dans des catégories distinctes.

Après plusieurs jours de tests, j'ai compris comment allier mon JSON aux fonctionnalités de Fabric Js. J'ai créé des fonctions liées à chaques catégories d'objets et les ai activé grâce aux boutons de ma grille d'options.

Pour ce morceaux de code je créé une icone accompagnée d'un titre pour chaque type de nailart. En cliquant sur chacunes de ces icone le nail art correspondant apparait. Nailartstate enregistre le type de nailart qui a été selectionné et est utilisé quand je change de couleur et quand je fait le total du prix. Toutes les autres fontionnalités suivent plus ou moins la même logique.

Avec cette librairie j'ai également pu donner à l'utilisateur la possibilité de gérer la disposition des éléments dans le canvas. Et j'ai pu permettre de commander le set que l'utilisateur a créé.

Le reste des produits du site est aussi stocké dans mon fichier JSON. Grâce à un nombre élevé de boucles foreach j'ai pu les faire apparaitre. Je n'ai malheureusement pas pu me concentrer sur une manière moins répétitive de le faire dû au manque de temps.

Mon plan original était de n'utiliser que des photos de sets que j'avais fait mais à cause de leur qualités j'ai décidé d'utiliser des photos trouvées sur pinterest.

Le reste du site fonctionne comme un site de e-commerce standard, avec un panier et un checkout. Ce panier utilise le localStorage pour que les produits qui y sont restent après le rechargement de la page. Cela permet aussi que, lors de l'étape de paiement, l'utilisateur puisse voir un résumé dynamique de ses achats.

Le site ne permet pas encore d'effectuer des paiements et de vraiment commander ces ongles, mais je compte bien pousser sont utilisation encore plus loin. Peut-être en ajoutant la possibilité d'avoir plusieurs fichiers de sauvegardes qui permettraient à l'utilisateur de créer plusieurs sets en même temps. Mais pour le temps qu'il me reste, un à la fois suffira.

Visiter le site