SIM CHIA HUEYSIM CHIA HUEY
PéperTree est la boutique officielle de ma marque de stickers illustrés. J’ai imaginé ce projet pour réunir au même endroit tout l’univers de Péper : ses illustrations, ses créations, les actualités de la marque et les premières collections de stickers.
Au-delà de la création d’une boutique, ce projet représentait également un défi personnel. Après trois ans sans utiliser Angular et Node ExpressJS, je souhaitais remettre les mains dans le développement full-stack à travers un projet concret qui me permettrait de retrouver mes automatismes tout en créant un véritable outil pour ma marque.
Le résultat était d’abord une première version fonctionnelle (MVP), puis une deuxième version plus proche d’un site e-commerce qui permet de découvrir l’univers de PéperTree, de parcourir les collections et de passer commande, tout en préparant les futures évolutions du site.
J’ai réalisé l’ensemble du projet de manière autonome.
Péper adore inventer, dessiner, coller, photographier, rêver… et surtout partager tout ça avec ses amis. Elle dessine leur quotidien, transforme leurs petites aventures en illustrations et crée des stickers inspirés de leurs personnalités.
Je souhaitais que cette énergie se retrouve dans un site officiel capable de rassembler toute la marque :
L’objectif était de proposer un lieu unique où chacun puisse découvrir l’univers de PéperTree, même sans utiliser les réseaux sociaux.
Le projet répondait à plusieurs objectifs.
Construire le site officiel de la marque et créer un espace centralisant tout l’univers de PéperTree.
Lancer les premières ventes, et permettre aux visiteurs de commander les stickers sans attendre le développement complet d’une boutique e-commerce.
Reprendre Angular et ExpressJS, ce projet était l’occasion idéale de retrouver mes réflexes de développement dans un contexte réel.
Concevoir une base solide et créer un site facilement enrichissable avec de nouvelles collections, illustrations et fonctionnalités.
Version 1.0 :
L’un des principaux défis du projet était de proposer une première expérience de vente sans développer immédiatement un back-end.
Créer un panier, un système de paiement, une gestion des commandes et un espace client représentait un investissement important en temps et en budget.
Plutôt que de repousser le lancement de la marque, j’ai choisi une approche MVP (Minimum Viable Product) : développer une première version fonctionnelle permettant de présenter les produits et de commencer à recevoir des commandes.
Cette décision m’a permis de concentrer mes efforts sur l’expérience utilisateur, la direction artistique et la qualité du front-end, tout en gardant la possibilité de faire évoluer le projet progressivement.
Version 2.0 :
Une fois la première version mise en ligne, j’ai pu identifier les limites du système de commande manuel et les besoins qui revenaient le plus souvent dans l’expérience utilisateur.
J’ai donc fait évoluer le projet en développant un véritable système e-commerce, avec l’ajout d’un back-end permettant de gérer les produits, les paniers et les commandes.
L’utilisateur peut désormais ajouter plusieurs produits à son panier, modifier les quantités, choisir son mode de livraison ou de retrait, puis transmettre sa commande directement depuis le site.
Cette évolution m’a également permis de travailler sur l’architecture full-stack du projet : création d’une API REST avec Node.js et Express, gestion des données avec MongoDB et Mongoose, communication entre le front-end Angular et le back-end, ainsi que validation et gestion des données liées aux commandes.
L’objectif était de conserver l’identité visuelle et la simplicité de la première version, tout en proposant une expérience de commande plus fluide et plus évolutive.
L’univers de PéperTree s’adresse aux personnes qui aiment les objets créatifs, les illustrations chaleureuses et les petites joies du quotidien.
Je voulais créer une identité visuelle qui donne immédiatement envie de sourire.
L’univers graphique repose sur plusieurs valeurs :
À travers ses dessins, Péper raconte les passions, les petits ratés de la vie, les moments partagés avec ses amis et encourage chacun à accepter les imperfections du quotidien avec bienveillance.
Le violet est devenu naturellement la couleur principale de la marque.
Au-delà du fait qu’il s’agit de ma couleur préférée, je trouvais intéressant d’utiliser une teinte encore relativement peu exploitée comme couleur dominante dans les univers créatifs français.
Cette couleur évoque pour moi :
Elle est également inspirée par Grimace, la mascotte de McDonald’s, dont j’apprécie la silhouette ronde et attachante.
Pour renforcer cette personnalité, j’ai choisi deux Google Fonts complémentaires.
Nunito est utilisée pour les textes courants. Ses formes légèrement arrondies offrent une excellente lisibilité tout en conservant une sensation de douceur.
Cherry Bomb One est utilisée pour les titres. Son dessin généreux, ses formes épaisses et ses courbes renforcent l’aspect ludique de la marque et rappellent les autocollants et les dessins réalisés à la main.
Le site a été pensé simultanément pour desktop et mobile dès la phase de conception.
J’ai commencé par réaliser plusieurs wireframes dessinés à la main avant de concevoir les maquettes haute fidélité sur Figma.
Lors du développement, j’ai d’abord intégré la version desktop avant d’adapter progressivement chaque écran pour les tablettes et smartphones.
Cette méthode m’a permis de conserver une cohérence visuelle entre les différents supports.
Version 1.0 : Afin de limiter le nombre de pages tout en gardant une navigation fluide, j’ai choisi de présenter les informations détaillées des produits dans une fenêtre modale.
Cette approche permet :
Elle représentait également une solution pertinente pour cette première version du site.
En présentant PéperTree autour de moi, je me suis rendu compte que certaines personnes n’utilisaient pas Instagram.
J’ai donc choisi de republier directement sur le site les illustrations et vidéos publiées sur le réseau social.
Ainsi, chaque visiteur peut découvrir les contenus de la marque sans avoir besoin de créer un compte sur une plateforme externe.
Le projet est développé avec Angular pour le front-end et Node.js / Express.js pour le back-end, avec MongoDB pour la gestion des données.
Cette réalisation m’a permis de reprendre progressivement mes habitudes tout en consolidant mes connaissances en développement front-end et back-end.
Le projet est organisé autour :
Cette architecture facilite l’ajout de nouveaux produits et permet de faire évoluer le contenu et les fonctionnalités sans modifier systématiquement les composants du front-end. Elle pose également les bases nécessaires pour faire évoluer progressivement PéperTree vers une expérience e-commerce plus complète.
Le routing Angular a été la première difficulté rencontrée.
Après plusieurs années sans pratiquer Angular, retrouver la logique des routes, des composants et de l’organisation générale du projet m’a demandé un véritable temps de réadaptation.
C’est également le tout premier élément que j’ai développé, ce qui rendait la reprise encore plus exigeante.
Au fil du projet, les automatismes sont progressivement revenus. Chaque fonctionnalité développée renforçait ma compréhension du framework et me permettait d’aborder les problèmes avec davantage de confiance.
Je suis particulièrement fière d’avoir réussi à remettre en place le système de routing ainsi que la gestion des données en JSON, qui simplifie aujourd’hui l’ajout de nouveaux contenus.
Le projet est développé avec Angular.
Cette réalisation m’a permis de reprendre progressivement mes habitudes avec le framework tout en consolidant mes connaissances.
Le projet est organisé autour :
Cette structure simplifie l’ajout de nouveaux produits et permet de faire évoluer le contenu sans modifier systématiquement les composants.
Sans panier ni paiement en ligne, il était important de proposer une solution simple pour permettre les premières commandes.
Le parcours utilisateur est volontairement minimaliste.
Cette solution me permet de gérer les commandes manuellement tout en validant l’intérêt des visiteurs pour les produits, sans attendre le développement complet d’une boutique e-commerce.
PéperTree m’a permis de développer autant mes compétences créatives que techniques.
J’y ai appris à :
organiser et développer un projet Angular en autonomie ;
retrouver rapidement mes compétences après plusieurs années sans utiliser le framework ;
concevoir et intégrer une architecture back-end avec Node.js et Express.js ;
créer une API REST et assurer la communication entre le front-end et le back-end ;
gérer des données avec MongoDB et Mongoose ;
transformer des contraintes techniques et budgétaires en solutions concrètes ;
faire évoluer progressivement un MVP vers une expérience e-commerce plus complète ;
concevoir une expérience utilisateur cohérente tout en tenant compte des contraintes d’une première version ;
développer un projet personnel complet, de l’idée initiale jusqu’à sa mise en ligne, en faisant évoluer progressivement son architecture et ses fonctionnalités.
PéperTree continue d’évoluer.
Les prochaines fonctionnalités prévues sont :
L’objectif est de faire évoluer progressivement cette première version vers une boutique e-commerce complète, tout en conservant l’identité chaleureuse qui caractérise la marque.
PéperTree est bien plus qu’un simple exercice de développement.
C’est un projet personnel qui réunit ma passion pour l’illustration, la direction artistique et le développement front-end.
En construisant cette première version, j’ai démontré ma capacité à apprendre de manière autonome, à reprendre rapidement en main un framework que je n’avais plus utilisé depuis plusieurs années et à transformer une idée en un produit concret, accessible en ligne.
Aujourd’hui, PéperTree est une base vivante qui continue d’évoluer au rythme des nouvelles collections, des nouvelles illustrations et des compétences que je développe au fil du temps.
