Développement sur mesure & personnalisé du front-end de la marketplace éco-responsable Shopetic avec Origami Marketplace

1. Contexte du projet

Lancée avec succès sur le marché, la marketplace éco-responsable Blissports a attiré l'attention de nombreux acteurs du secteur. C'est ainsi que Shopetic, une entreprise engagée dans une démarche éco-responsable similaire, a découvert notre agence Dawap grâce à notre expertise dans le développement de marketplaces performantes.

Shopetic recherchait une solution sur mesure qui répondrait à ses besoins spécifiques en matière de marketplace éco-responsable. Ils avaient appréciés les performances de la marketplace Blissports et souhaitaient reproduire cette réussite avec leur propre plateforme. Outre les exigences classiques d'une marketplace, Shopetic attachait une importance particulière à l'optimisation du référencement SEO de son site, à la configuration des URLs et à la structuration de l'arborescence pour une visibilité maximale dans les moteurs de recherche.

Après une première rencontre prometteuse, nous avons entamé une collaboration fructueuse avec Shopetic. Le choix de la plateforme Origami Marketplace s'est imposé comme une évidence, offrant une solution complète pour la gestion de la marketplace en backend, ainsi qu'une API puissante pour récupérer et manipuler les données nécessaires au développement d'un frontend sur mesure.

2. Sprint 0 : rédaction du backlog + développment d'un POC

Le début du projet a été marqué par un sprint initial dédié à la rédaction du backlog et au développement d'un Proof of Concept (POC). Ce sprint, communément appelé "Sprint 0", a permis de poser les bases solides du développement de la marketplace éco-responsable Shopetic.

Nous avons travaillé en étroite collaboration avec l'équipe de Shopetic pour définir les fonctionnalités clés, les objectifs et les priorités du projet. Grâce à des réunions de travail, nous avons identifié les besoins spécifiques de la marketplace et élaboré un backlog détaillé qui servirait de guide tout au long du développement.

Simultanément, notre équipe technique s'est attelée à la réalisation d'un POC pour valider les choix technologiques et les concepts clés du projet. Ce POC nous a permis de démontrer notre capacité à développer une interface utilisateur performante, à intégrer les fonctionnalités essentielles et à garantir une expérience utilisateur fluide.

Le Sprint 0 a été une étape cruciale pour aligner les attentes, clarifier les objectifs et jeter les bases d'une collaboration efficace. Grâce à cette phase de préparation rigoureuse, nous étions prêts à entamer le développement complet de la marketplace éco-responsable Shopetic.

3. Mise en place d'une gestion de projet agile avec un backlog

Pour assurer une gestion efficace du projet de développement de la marketplace éco-responsable Shopetic, nous avons opté pour une approche agile. L'agilité nous permet d'adapter rapidement notre planification et notre exécution en fonction des évolutions et des exigences du projet.

Au cœur de notre méthodologie agile se trouve le backlog, une liste priorisée de toutes les fonctionnalités à développer. Le backlog est constamment mis à jour et ajusté au fil du projet, en tenant compte des besoins changeants de Shopetic et des retours des utilisateurs.

Notre équipe et celle de Shopetic ont collaboré étroitement pour définir les fonctionnalités clés et les découper en petites tâches appelées "user stories". Chaque user story est estimée en termes de complexité et de temps de développement, ce qui permet d'établir un planning réaliste et transparent.

Nous organisons des "sprints" d'une durée fixe (généralement de 1 à 2 semaines) au cours desquels nous nous concentrons sur un ensemble spécifique de user stories. À la fin de chaque sprint, nous effectuons une démonstration des fonctionnalités développées et recueillons les retours de l'équipe de Shopetic.

Grâce à cette approche agile et itérative, nous avons pu maintenir une communication fluide avec Shopetic, ajuster les priorités en fonction de leurs besoins changeants et livrer des fonctionnalités de manière itérative et incrémentale.

4. Optimisation du temps de chargement des pages de la marketplace (éco-responsable)

Nous avons accordé une attention particulière à l'optimisation des performances de la marketplace éco-responsable Shopetic afin de garantir des temps de chargement rapides et une expérience utilisateur fluide. Pour y parvenir, nous avons mis en place diverses stratégies techniques.

Tout d'abord, nous avons effectué une analyse approfondie des performances des pages à l'aide d'outils internes que nous avons développés, notamment notre propre outil "Daspeed". Cet outil combine les informations provenant de l'API Pagespeed et de l'API Gtmetrix pour évaluer les performances des pages de la marketplace. Grâce à cette analyse, nous avons pu identifier les points critiques et les opportunités d'optimisation.

Nous avons utilisé des techniques de mise en cache pour réduire les temps de réponse et améliorer la vitesse de chargement des pages. Les pages les plus consultées sont mises en cache et préchargées, ce qui permet aux utilisateurs d'accéder instantanément aux contenus sans temps d'attente. Cette approche garantit une expérience utilisateur fluide et réactive, même lors de périodes de trafic élevé.

De plus, nous avons effectué des ajustements et des optimisations au niveau du code et de la structure des pages pour réduire le poids des fichiers et améliorer les performances. Cela inclut l'optimisation des images, la minification des fichiers CSS et JavaScript, ainsi que la mise en place de bonnes pratiques de codage pour garantir l'efficacité et la rapidité de chargement des pages.

Grâce à ces mesures d'optimisation, nous avons pu obtenir des résultats exceptionnels en termes de temps de chargement des pages de la marketplace éco-responsable Shopetic. Nous continuons à surveiller et à optimiser en permanence les performances pour offrir une expérience utilisateur optimale.

5. Infrastructure scalable avec mise en cache pour accepter un traffic elevé (éco-responsable)

Nous avons conçu une infrastructure scalable et optimisée pour permettre à la marketplace éco-responsable Shopetic de gérer un trafic élevé sans compromettre les performances. L'une des stratégies clés que nous avons mises en place est l'utilisation de caches intelligents.

Nous avons identifié les pages les plus consultées de la marketplace et avons mis en place des mécanismes de mise en cache pour ces pages. Cela permet d'accélérer le chargement des contenus et de réduire la charge sur les serveurs, garantissant ainsi une expérience utilisateur rapide et fluide, même en période de trafic intense.

De plus, nous avons étendu l'utilisation du cache aux fiches produits ainsi qu'aux variants disponibles sur la marketplace. Cela signifie que les informations essentielles sont stockées en cache et mises à jour régulièrement en arrière-plan. Ainsi, les utilisateurs ont accès à des données actualisées sans nécessiter d'appels fréquents à des partenaires externes tels que Algolia ou Origami Marketplace.

Cette approche nous permet de fournir une expérience utilisateur optimale tout en réduisant la dépendance aux ressources externes et en minimisant les requêtes répétitives. De plus, cette solution contribue à l'aspect éco-responsable de la marketplace, en réduisant la consommation de ressources serveur et en optimisant l'utilisation des infrastructures existantes.

Grâce à notre infrastructure scalable avec mise en cache, nous sommes en mesure de répondre à un trafic élevé tout en maintenant des performances élevées et une expérience utilisateur fluide. Nous continuons à surveiller et à ajuster en permanence cette infrastructure pour garantir une disponibilité et des performances optimales.

6. Intégration du partenaire Algolia pour une recherche pertinente des produits

Nous avons collaboré avec le partenaire Algolia pour intégrer leur puissant moteur de recherche à la marketplace éco-responsable Shopetic. L'objectif était d'offrir une expérience de recherche pertinente et efficace aux utilisateurs, en leur permettant de trouver facilement les produits qu'ils recherchent.

Algolia est reconnu pour sa technologie de recherche avancée, offrant des fonctionnalités telles que la recherche instantanée, la correction orthographique, la recherche par facettes, et bien plus encore. En intégrant cette solution à la marketplace Shopetic, nous avons pu améliorer considérablement la fonctionnalité de recherche, rendant l'expérience utilisateur plus intuitive et satisfaisante.

Grâce à l'intégration d'Algolia, les utilisateurs peuvent bénéficier d'une recherche en temps réel, avec des résultats et des performances très rapides. De plus, les fonctionnalités de correction orthographique garantissent que même en cas de fautes de frappe, les produits pertinents sont proposés aux utilisateurs.

Nous avons également utilisé les fonctionnalités de recherche par facettes d'Algolia pour permettre aux utilisateurs de filtrer les résultats en fonction de différents critères tels que la catégorie, la marque, le prix, etc. Cela permet une navigation plus ciblée et une meilleure découverte des produits disponibles sur la marketplace.

L'intégration d'Algolia a considérablement amélioré la pertinence et la rapidité des résultats de recherche sur la marketplace Shopetic. Les utilisateurs peuvent désormais trouver rapidement les produits qu'ils recherchent, ce qui améliore leur expérience d'achat et augmente les chances de conversion.

7. Structuration & arboresence sur mesure optimisé pour le SEO

Lors du développement de la marketplace éco-responsable Shopetic, nous avons accordé une attention particulière à la structuration et à l'arborescence du site, en l'optimisant pour le référencement naturel (SEO). Nous avons mis en place des outils dans le Back Office Front (BOF) permettant aux administrateurs de saisir, analyser et optimiser les éléments clés du SEO.

La structuration du site a été pensée de manière à faciliter la navigation des utilisateurs et à permettre aux moteurs de recherche de comprendre la hiérarchie des pages. Nous avons créé une arborescence sur mesure qui prend en compte les catégories de produits, les sous-catégories et les pages spécifiques. Cette structure optimisée contribue à améliorer la visibilité de la marketplace dans les résultats de recherche et facilite la découverte des produits par les utilisateurs.

En ce qui concerne le SEO, nous avons configuré et optimisé les URL, les balises meta title et meta description pour chaque page de la marketplace. Nous avons utilisé des mots clés pertinents, des descriptions attractives et des structures d'URL conviviales pour favoriser le positionnement de la marketplace dans les moteurs de recherche.

L'arborescence sur mesure et les optimisations SEO effectuées contribuent à améliorer la visibilité et la position de la marketplace éco-responsable Shopetic dans les résultats de recherche. Cela permet d'attirer un trafic organique qualifié, d'augmenter la visibilité des produits et d'encourager les conversions.

Si vous souhaitez découvrir plus en détail l'arborescence et les optimisations SEO mises en place sur la marketplace Shopetic, nous vous invitons à visiter le site et à explorer ses différentes catégories et pages.

8. Optimisation des URL, meta title et description pour les fiches produits

Dans le cadre du développement de la marketplace éco-responsable Shopetic, nous avons accordé une attention particulière à l'optimisation des URL, des meta title et des meta description pour les fiches produits.

Les URL des fiches produits ont été soigneusement structurées pour être conviviales et pertinentes. Nous avons utilisé des mots clés pertinents dans les URL, en veillant à ce qu'elles reflètent le contenu spécifique de chaque produit. Cette optimisation permet aux moteurs de recherche de mieux comprendre le contenu des fiches produits et d'améliorer ainsi leur positionnement dans les résultats de recherche.

Les meta title et meta description des fiches produits ont également été optimisées pour attirer l'attention des utilisateurs depuis les moteurs de recherche. Nous avons utilisé des mots clés ciblés, des descriptions attrayantes et concises pour chaque produit. Cela permet de donner aux utilisateurs une idée claire du produit et d'encourager les clics depuis les résultats de recherche.

L'optimisation des URL, des meta title et des meta description pour les fiches produits contribue à améliorer leur visibilité dans les résultats de recherche. Cela permet d'attirer un trafic qualifié, d'augmenter la pertinence des fiches produits pour les utilisateurs et de favoriser les conversions.

Si vous souhaitez découvrir plus en détail les URL conviviales, les meta title et les meta description optimisées des fiches produits de la marketplace Shopetic, nous vous invitons à visiter le site et à explorer les différentes fiches produits.

9. Développement d'un Back Office Front (BOF) sur mesure

Dans le cadre du développement de la marketplace éco-responsable Shopetic, nous avons conçu et développé un Back Office Front (BOF) sur mesure pour répondre aux besoins spécifiques de gestion des contenus et des fonctionnalités complémentaires à Origami Marketplace.

Le BOF offre une interface conviviale et intuitive permettant une gestion complète des contenus éditoriaux du site. Les administrateurs peuvent facilement créer, modifier et maintenir les contenus de la marketplace pour offrir une expérience utilisateur riche et engageante.

En plus de la gestion des contenus, le BOF intègre également des fonctionnalités avancées pour optimiser les performances de la marketplace. Nous avons développé des outils de statistiques sur mesure, permettant aux administrateurs de suivre les performances des produits, des ventes et d'autres indicateurs clés pour prendre des décisions éclairées.

Le BOF inclut également un système de gestion des étiquettes éco-responsables : les ectictos. Grâce à une configuration personnalisée, le BOF peut automatiquement attribuer des étiquettes à certains produits en fonction de critères spécifiques. Cela permet d'identifier et de mettre en avant les produits répondant à des exigences écologiques, offrant ainsi une expérience de navigation plus pertinente pour les utilisateurs.

En ce qui concerne le référencement SEO, le BOF propose des outils dédiés pour analyser, optimiser et saisir les meta title, les descriptions, les slugs et d'autres éléments importants pour améliorer le positionnement des pages dans les résultats de recherche.

Le développement sur mesure du Back Office Front (BOF) pour la marketplace Shopetic a permis d'offrir une gestion complète et adaptée aux besoins spécifiques de la plateforme. Il offre des fonctionnalités avancées, des outils de statistiques sur mesure, une gestion des étiquettes éco-responsables et une optimisation SEO complète.

10. Mise en place d'une CI/CD avec espace de sandbox et de production

Afin d'assurer une gestion efficace des versions et une livraison continue de la marketplace éco-responsable Shopetic, nous avons mis en place une infrastructure CI/CD (Continuous Integration/Continuous Deployment) avec des environnements distincts pour le sandbox et la production.

Grâce à cette approche, nous sommes en mesure de garantir la qualité du code en effectuant des tests unitaires, des tests d'intégration et des tests d'application dans nos pipelines sur GitLab. Chaque modification de code est soumise à un processus d'intégration continue, ce qui nous permet de détecter rapidement les erreurs et les problèmes potentiels.

L'un des aspects clés de notre approche CI/CD est la construction d'images "saines" pour nos environnements de sandbox et de production. Si les tests ne passent pas avec succès, les images ne sont pas construites et il n'est pas possible de déployer une nouvelle version sur le serveur de production. Cette pratique garantit la stabilité et la fiabilité de la plateforme, en minimisant les risques d'erreurs et de dysfonctionnements.

L'environnement de sandbox est utilisé pour tester les nouvelles fonctionnalités, les améliorations et les correctifs de bugs. Il offre un espace sécurisé pour valider les changements sans impact sur l'environnement de production. Une fois que les tests sont réussis et que les modifications sont validées, nous procédons au déploiement sur l'environnement de production, assurant ainsi une transition fluide et sans perturbation.

La mise en place d'une CI/CD avec des espaces de sandbox et de production distincts permet une gestion efficace des versions, un déploiement sécurisé et une livraison continue de la marketplace Shopetic. Elle garantit également la qualité du code grâce aux tests automatiques effectués tout au long du processus de développement.

11. Développement DDD et TDD pour un code fiable et testé en continu

Lors du développement de la marketplace éco-responsable Shopetic, nous avons adopté une approche basée sur le Domain-Driven Design (DDD) et le Test-Driven Development (TDD). Ces méthodologies nous ont permis de garantir un code fiable, robuste et testé en continu.

Le Domain-Driven Design (DDD) est une approche qui met l'accent sur la compréhension approfondie du domaine métier et sur la modélisation du code en utilisant des concepts métier clairs et cohérents. En appliquant les principes du DDD, nous avons pu développer une architecture solide, orientée métier, qui reflète fidèlement les besoins spécifiques de la marketplace éco-responsable.

Le Test-Driven Development (TDD) est une approche de développement centrée sur les tests. Avant d'écrire le code de production, nous écrivons d'abord des tests automatisés pour définir le comportement attendu. Ensuite, nous développons le code nécessaire pour que les tests passent avec succès. Cela nous permet de détecter les erreurs et les bugs dès le début du processus de développement, ce qui facilite leur résolution et garantit la qualité du code.

En utilisant le DDD et le TDD, nous avons pu créer un code fiable, maintenable et évolutif pour la marketplace Shopetic. Les tests automatisés nous ont permis de vérifier en permanence le bon fonctionnement des fonctionnalités, garantissant ainsi une expérience utilisateur fluide et sans problèmes.

Le développement DDD et TDD a également favorisé une collaboration efficace au sein de l'équipe de développement, en fournissant une compréhension claire des exigences et en permettant une validation continue tout au long du processus de développement.

12. Classification sur mesure par étiquettes éco-responsables

Une des caractéristiques clés de la marketplace éco-responsable Shopetic est sa classification sur mesure par étiquettes éco-responsables. Nous avons développé des outils spécifiques dans le Back Office Front (BOF) afin de permettre à Shopetic de créer des configurations personnalisées pour attribuer automatiquement des étiquettes éco-responsables aux produits.

Grâce à ces configurations, basées sur des critères tels que le matériau, le fournisseur, et d'autres caractéristiques pertinentes, les produits sont automatiquement étiquetés avec des étiquettes éco-responsables. Cela permet aux utilisateurs de la marketplace de facilement identifier les produits qui répondent à des critères éco-responsables importants.

Pour assurer un processus automatisé et efficace, nous avons mis en place des routines qui s'exécutent régulièrement selon une planification prédéfinie. Ces routines vérifient les nouvelles configurations, mettent à jour les étiquettes éco-responsables des produits existants et attribuent les étiquettes aux nouveaux produits.

La classification sur mesure par étiquettes éco-responsables constitue un élément clé de la marketplace Shopetic, qui s'engage à ne proposer que des produits éco-responsables. Grâce à cette fonctionnalité, les utilisateurs peuvent facilement trouver et acheter des produits respectueux de l'environnement, en accord avec leurs valeurs et leurs préoccupations écologiques.

13. Utilisation de technologies robustes et adaptées au projet

Pour garantir des performances optimales et une expérience utilisateur fluide sur la marketplace éco-responsable Shopetic, nous avons choisi d'utiliser des technologies robustes et adaptées aux besoins du projet.

Tout d'abord, nous avons opté pour le framework Symfony, reconnu pour sa stabilité, sa modularité et sa flexibilité. Symfony nous permet de développer rapidement des fonctionnalités sur mesure, tout en garantissant un code fiable et évolutif.

Nous avons également mis en place un environnement Docker pour faciliter le déploiement et la gestion de l'infrastructure. Cette approche basée sur des conteneurs nous permet de créer des environnements de développement, de test et de production cohérents, réduisant ainsi les risques d'incompatibilité entre les différentes étapes du cycle de vie de la marketplace.

Pour assurer une communication efficace et fiable entre les différents services, nous avons intégré RabbitMQ, une solution de messagerie asynchrone. Cette technologie nous permet de gérer efficacement les tâches en arrière-plan, les mises à jour des caches et autres opérations nécessitant une communication fluide entre les composants de la marketplace.

Nous utilisons également Redis, une base de données en mémoire, pour le stockage et la gestion des données temporaires, ainsi que MySQL pour la persistance des données principales de la marketplace.

En ce qui concerne le cycle de développement, nous avons mis en place une infrastructure de CI/CD (Continuous Integration/Continuous Deployment) avec GitLab. Cela nous permet d'automatiser les tests unitaires, d'intégration et d'application, assurant ainsi un code fiable et testé en continu avant chaque déploiement en production.

14. Intégration charte graphique sur mesure et customisation d'un thème responsive

Dans le cadre du développement de la marketplace éco-responsable Shopetic, nous avons accordé une grande importance à l'intégration de la charte graphique sur mesure et à la customisation d'un thème responsive.

En collaboration avec l'équipe de Shopetic, nous avons étudié en détail les éléments clés de la charte graphique de la marque, tels que les couleurs, les typographies, les icônes et les éléments visuels. Nous avons ensuite procédé à une intégration minutieuse de ces éléments, en veillant à ce qu'ils reflètent parfaitement l'identité de la marque et contribuent à créer une expérience utilisateur harmonieuse.

Nous avons également personnalisé un thème responsive pour assurer une compatibilité optimale sur tous les appareils, qu'il s'agisse de smartphones, de tablettes ou d'ordinateurs de bureau. Cette approche garantit que les utilisateurs de Shopetic bénéficient d'une expérience fluide et agréable, quel que soit le dispositif utilisé pour accéder à la marketplace.

L'intégration de la charte graphique sur mesure et la customisation d'un thème responsive permettent à Shopetic de se démarquer visuellement, de renforcer son image de marque et d'offrir une expérience utilisateur cohérente et intuitive.

15. Synthèse de la bonne réussite du projet

Le projet de développement de la marketplace éco-responsable Shopetic en partenariat avec Origami a été couronné de succès, grâce à notre collaboration étroite, à notre expertise technique et à notre engagement envers l'excellence.

Nous sommes fiers d'avoir relevé les défis techniques et fonctionnels du projet, en apportant des solutions sur mesure qui ont permis à Shopetic de se positionner en tant que leader dans son domaine. Notre approche agile et collaborative a favorisé une communication transparente et efficace tout au long du projet, garantissant ainsi la satisfaction de notre client.

Grâce à l'optimisation du temps de chargement des pages, à l'infrastructure scalable mise en place, à l'intégration d'Algolia pour une recherche pertinente, à la structuration et à l'optimisation pour le SEO, à la personnalisation du BOF, à la mise en place d'une CI/CD, au développement basé sur le DDD et le TDD, à la classification éco-responsable et à l'utilisation de technologies robustes, nous avons créé une marketplace performante, intuitive et éco-responsable.

La collaboration étroite avec l'équipe de Shopetic, combinée à notre expertise et à notre dévouement, a permis de réaliser les objectifs fixés, tant sur le plan technique que sur celui de l'expérience utilisateur.

Nous sommes ravis d'avoir contribué au succès de Shopetic et nous restons disponibles pour accompagner notre client dans ses futurs projets. Nous nous engageons à fournir des solutions sur mesure, innovantes et adaptées aux besoins spécifiques de chaque entreprise.