Application web & plateforme de thèmes

Smily Website Platform

Smily avait besoin d'un moyen de gérer et de faire évoluer des centaines de sites clients sans maintenir chacun comme une implémentation séparée.

Okzea a aidé à transformer ce modèle en une plateforme de sites web partagée et versionnée : un système cœur unique, des designs sur mesure réutilisables, une personnalisation structurée par site, des mises à niveau plus sûres et un outillage conçu pour des releases continues.

Le résultat est une plateforme qui sert plus de 300 sites actifs, avec plus de 190 releases de thèmes livrées depuis 2019.

Voir les détails du projet

Vue d'ensemble

Smily, anciennement BookingSync, fournit aux gestionnaires de locations de vacances un site de réservation directe hébergé, connecté à leur logiciel de gestion.

Okzea a travaillé comme partenaire technique intégré au sein de l'équipe Experience de Smily de 2017 à 2026. La mission s'est d'abord concentrée sur l'architecture des thèmes, les designs sur mesure et l'expérience d'édition des sites, avant de s'étendre progressivement à l'ensemble de la plateforme sites web, y compris les fonctionnalités produit, la maintenance, l'outillage interne et les décisions techniques.

Au fil du temps, Okzea a pris un rôle de plus en plus central dans la responsabilité technique et l'évolution de la plateforme sites web.

Détails du projet

Le défi

Chaque site tournait sur sa propre copie modifiable du thème, ce qui rendait difficile le déploiement sûr d'améliorations à l'échelle de la plateforme.
Les mises à jour et correctifs devaient être réappliqués manuellement site par site, prenant souvent des jours et mettant en péril les personnalisations existantes.
Une demande simple, comme l'ajout d'un tag manager, pouvait impliquer trois personnes et nécessiter une nouvelle release du thème.
Polices, couleurs et mises en page étaient codées en dur, donc chaque design sur mesure démarrait comme une implémentation à part.

Une plateforme partagée sans perdre la personnalisation

Smily avait besoin d'améliorer chaque site client à partir d'une base de code partagée sans écraser le design, la configuration ou les intégrations de chaque site.

La solution a été une architecture de thèmes en couches où le thème partagé reste la source de vérité et où les changements propres à chaque site vivent en dehors du code du thème.

Le thème cœur fournit les layouts, composants, snippets, scripts, styles et traductions partagés entre les sites. Les variantes peuvent modifier, omettre ou surcharger des parties de ce cœur, tandis que les options structurées et les plugins forment la dernière couche de personnalisation de chaque site.
Chaque option éditable est décrite en JSON Schema. Le builder génère son interface d'édition à partir de ce schéma et valide chaque modification.
25 points d'accroche (plugins) par thème permettent au support d'injecter tags de tracking, styles ou balisage à des emplacements précis sans modifier les templates.
Chaque release est construite une fois par la CI, versionnée et publiée comme un package. Chaque site reçoit une instance déployée de cette release tandis que ses propres options et plugins restent séparés.
Lors d'une mise à niveau, la plateforme applique la nouvelle release et fusionne la configuration propre au site sur la structure mise à jour. Les sections, mises en page et valeurs existantes sont préservées tandis que les nouveaux champs requis sont ajoutés en toute sécurité.

Des designs sur mesure sans code dupliqué

Depuis le thème v3 en 2022, les designs sur mesure sont construits comme des thèmes enfants superposés à un cœur partagé unique.

Un thème enfant ne contient que les fichiers qu'il modifie, comme une feuille de style, un composant ou un template. Tout le reste est hérité du cœur.
Un design sur mesure ne nécessite donc plus une copie complète du thème. Les correctifs et améliorations partagés restent dans le cœur et atteignent chaque thème enfant à la release suivante.
Environ 27 designs sur mesure ont été produits avec ce modèle à ce jour.

Neuf ans d'évolution de la plateforme

2017
Arrivée dans l'équipe Experience et reprise du thème de première génération, avec les premiers designs sur mesure pour des clients et des améliorations de la page d'accueil, du calendrier et de la recherche.
2018
Assainissement des fondations du thème, en remplaçant la bibliothèque de mixins Sass héritée par les composants Bootstrap, pendant que les designs sur mesure continuaient.
2019
Thème v2 : refonte du thème principal sur Bootstrap 4, décliné en une famille de quatre thèmes livrés en packages versionnés.
2022
Thème v3 : une réécriture sans jQuery avec des web components, une recherche JSON, des cartes interactives, le partage de favoris, des pages de campagne et des conditions d'annulation.
2023
Extension de la plateforme avec la gestion des sections, les attributs personnalisés, une médiathèque, les plugins, les meilleures offres et prix barrés, GA4 avec consent mode, une carte des locations et les avis toutes sources confondues.
2026
Thème v4 : un design system basé sur Tailwind avec des composants pilotés par schéma, des presets et des repères d'édition qui relient la page rendue à l'option qui l'a produite.

Un website builder en direct, piloté par schéma

La dernière phase de la plateforme est un nouvel éditeur pour les sites en thème v4, qui rassemble le travail lié au thème dans une seule interface, à côté d'un aperçu en direct.

Pages, sections, navigation, contenu du blog, traductions, médias et plugins se gèrent tous depuis la même expérience d'édition.
Un éditeur React utilise des champs pilotés par schéma et un tiroir de sections, les changements étant reflétés dans l'aperçu via un pont de messages plutôt que par rechargement de page.
Les pages se composent à partir de composants et de presets, ce qui permet aux utilisateurs classiques d'ajouter des sections rapidement tout en gardant un contrôle structuré disponible au besoin.
Navigation, traductions et édition du blog sont intégrées directement dans l'éditeur, pour que le contenu se modifie là où il apparaît.
L'assistant IA comprend la structure du thème. Il peut expliquer les options, faire des modifications ciblées, concevoir une section, générer une landing page complète, rédiger du contenu ou le traduire.
Un validateur de design contrôle chaque proposition de l'IA par rapport au manifeste de classes et à la palette réels du thème, pour que les pages générées n'utilisent que des styles qui existent dans le thème.

Le website builder du thème v4 avec son aperçu en direct

Un outillage pour une équipe produit réduite

Prendre en charge des centaines de sites exigeait un outillage qui réduise le travail répétitif et facilite le développement et les releases.

Un outil de bureau Electron construit les thèmes, les synchronise vers n'importe quel site via l'API de la plateforme, gère les environnements et compare les fichiers.
Un pipeline de build multi-thèmes, des tests unitaires et de bout en bout automatisés, et un serveur de simulation permettent de rendre les thèmes en local sans lancer toute la plateforme.
Les releases automatisées génèrent changelogs et notifications Slack, tandis que des déploiements CI cloisonnés par thème empêchent une release d'en écraser une autre.
Le système de gestion des sections de l'éditeur v3 a été construit entièrement autour de JSON Schema, sans modification backend.
La console d'exploitation interne a été reconstruite en SPA React sur une API JSON, avec la progression des installations de thèmes, l'état des tâches, un journal d'audit et le trafic par site.

SEO et performance à l'échelle de la plateforme

Le travail SEO, performance et analytics a été mené au niveau de la plateforme, pour que les améliorations s'appliquent à l'ensemble du produit sites web plutôt que d'être traitées comme des changements isolés.

Une refonte du sitemap et du hreflang a supprimé plus de 900 URL mortes ou dupliquées sur un seul site, avec des URL canoniques uniques sur les pages 404 et des règles robots pour la recherche à facettes.
Des données structurées ont été ajoutées pour les locations, les avis et les pages personnalisées, ainsi que des aperçus de partage social et des titres localisés.
Un profileur de rendu Liquid et la mémoïsation des drops ont identifié et éliminé un point chaud coûtant des dizaines de millisecondes par appel sur des pages qui pouvaient prendre plusieurs secondes en charge.
La plateforme a aussi introduit des écrans squelettes, le versioning des assets, la livraison AVIF via le CDN d'images et le chargement différé des médias.
Analytics et tracking incluent GA4 avec consent mode, le suivi des achats Meta Pixel et la détection des bots pour le widget cookies.

Impact

Partenariat produit de longue durée: 9 ans
Sites clients actifs: 300+
Releases de thèmes depuis 2019: 190+
Générations de thèmes: 4
Designs sur mesure construits sur le cœur partagé: 27
Langues prises en charge: 13

30 composants partagés
43 snippets
17 templates de pages
Plus de 1 000 clés de traduction par thème
25 points d'accroche par thème

Au-delà de la plateforme elle-même, le travail a inclus un support quotidien de l'équipe customer success et des migrations de sites clients entre générations de thèmes.

Galerie

Témoignages

“Vous pouvez lui confier un problème et cesser de le porter.”
Okzea a porté notre plateforme de sites web chez Smily pendant neuf ans, intégré à notre équipe Experience.
Construire un bon site web n'est pas difficile. En construire un au-dessus d'un logiciel de gestion locative et d'un channel manager, où disponibilités, tarifs et réservations doivent rester synchronisés et exacts, devient vite complexe. Construire une seule base de code qui améliore 300 sites d'un coup, sans en casser aucun, c'est là toute la difficulté. C'est ce qu'Okzea a construit.
Plus de 190 versions de thème livrées depuis 2017. 27 designs sur mesure qui tournent sur un seul cœur partagé, sans code dupliqué. 13 langues. Chacune de ces versions a été construite une fois puis déployée sur des centaines de sites de clients payants, et notre équipe support n'a pas passé la semaine suivante à réparer derrière.
Il a grandi avec ce rôle. Il a commencé par les thèmes et le design, puis a pris en charge l'architecture, l'outillage, le pipeline de release, le travail SEO et performance, et les migrations de clients. Notre équipe est restée petite pendant la majeure partie de ces neuf années. Son jugement explique en grande partie pourquoi c'était possible.
Le jour où il m'a montré le prototype v4, j'étais bluffé. Vous discutez avec une IA et elle pilote tout le builder : les réglages, l'ajout et la suppression de widgets, la rédaction des textes, leur traduction. J'avais vu Lovable et les autres générateurs de sites par IA, et mon problème avec chacun d'eux, c'était le désordre. Ils ignorent vos règles et vous laissent le nettoyage. Okzea a construit l'entre-deux. Un thème strict avec de vraies règles, et une IA qui comprend ces règles tout en produisant quelque chose d'original à l'intérieur. À l'échelle. Mener ça de l'idée jusqu'à la production, c'est remarquable.
Ce que je dirais à quiconque envisage de travailler avec lui : vous pouvez lui confier un problème et cesser de le porter. Il dit ce qu'il va faire, le fait, et signale ce qui dérape avant que vous ayez à demander.
En tant que CEO et fondateur, avoir quelqu'un comme lui dans son équipe est un cadeau. Si vous voulez quelque chose de construit qui fonctionne encore dans cinq ans, travaillez avec Okzea.
“Ce qui prenait des semaines lui prenait des heures.”
Sébastien est un véritable couteau suisse quand il s'agit de concevoir et de construire des sites web.
Au fil de ses nombreuses années chez Smily, il a conçu des centaines de beaux sites pour nos gestionnaires de locations.
Ce n'est pas seulement un ingénieur compétent : il travaille aussi très bien directement avec les clients et façonne des solutions à leurs problèmes concrets. Sébastien est aussi l'un des meilleurs exemples que j'aie vus en matière d'usage de l'IA : ce qui prenait des semaines lui prenait des heures. Et cela sur une stack technique où il n'avait pas beaucoup d'expérience, avec un résultat final digne de quelqu'un ayant des années de pratique de cette technologie. Ce niveau de qualité n'est atteint que par d'excellents ingénieurs, et Sébastien en fait clairement partie.

Plus de projets

D'autres projets récents.

Voir tous les projets

Mutualys

Application · Site web

Chord Keys

Application

Limitless Dubai

Site web