Biris Tech Logo
Biris Tech
Toutes les réalisations
Site Web

Maison Stella : site vitrine et réservation directe pour une résidence de charme à Lomé

Site vitrine et de réservation directe pour une résidence de charme d'Avepozo, à Lomé. Design Biris Tech, application Node.js sur mesure, paiement FedaPay et PayPal, back-office de gestion des chambres.

Client
Maison Stella
Année
2026
Domaine
Site Web
Voir le projet en ligne
Page d'accueil de Maison Stella
5
logements en ligne
51 000 - 200 000 FCFA
tarifs par nuit affichés
10
voyageurs maximum (espace jardin)
7j/7 · 24h/24
disponibilité de l'équipe

Le contexte

Maison Stella est une résidence de charme située à Avepozo, au bord de la mer, à Lomé (Togo). L'établissement se positionne entre la maison familiale et le boutique hôtel haut de gamme, avec piscine privée, jardin tropical, paillote, chef cuisinier et service de restauration. Sa visibilité reposait principalement sur les plateformes de location, ce qui limitait la maîtrise du récit de marque et imposait une dépendance à un intermédiaire. Il fallait un site propriétaire capable de porter l'atmosphère du lieu par l'image, de présenter clairement les cinq logements et leurs tarifs, et de permettre la réservation directe. Le site devait aussi répondre à deux publics : une clientèle locale et sous-régionale qui paie en FCFA par mobile money, et une clientèle internationale habituée à la carte bancaire.

La mission

  1. 01Concevoir l'identité d'interface et la direction artistique du site
  2. 02Structurer une arborescence courte guidée par la réservation
  3. 03Développer une application web sur mesure rendue côté serveur
  4. 04Mettre en place le catalogue de chambres avec tarifs et équipements
  5. 05Intégrer le paiement en ligne local (FedaPay) et international (PayPal)
  6. 06Livrer un back-office pour la mise à jour des chambres et des photos
  7. 07Optimiser le référencement local avec des données structurées
  8. 08Assurer l'affichage mobile et l'accessibilité de la navigation
  9. 09Déployer le site en HTTPS avec HSTS et HTTP/3

Ce que nous avons fait

Le contenu a précédé le gabarit : inventaire des chambres, des tarifs, des équipements et des visuels disponibles, puis construction d'une arborescence courte : accueil narratif, catalogue de chambres, fiche chambre, galerie, journal. Le design a été réalisé par Biris Tech, autour d'une typographie unique (Plus Jakarta Sans), de larges photographies et d'un rythme de lecture calme qui laisse la maison parler. Le site a ensuite été développé comme une application Node.js/Express rendue côté serveur, avec une feuille de style maison et quelques scripts vanilla ciblés, sans framework lourd ni CMS. Le parcours de réservation a été branché sur deux moyens de paiement complémentaires : FedaPay pour le paiement local en FCFA et PayPal pour la clientèle internationale, avec WhatsApp en canal de secours. Un back-office protégé par authentification permet à l'équipe de gérer les chambres et leurs photos. Enfin, nous avons soigné le référencement : métadonnées complètes, Open Graph, Twitter Card et données structurées schema.org LodgingBusiness, HotelRoom et ImageGallery.

Les livrables

  • Direction artistique et design d'interface complets, réalisés par Biris Tech
  • Site vitrine et réservation de cinq pages : accueil, chambres, fiche chambre, galerie, journal
  • Application Node.js/Express rendue côté serveur, avec feuille de style et scripts sur mesure
  • Parcours de paiement en ligne : FedaPay en FCFA et PayPal pour l'international
  • Back-office authentifié pour gérer les chambres, les tarifs et les photos
  • Optimisation SEO : métadonnées, Open Graph, Twitter Card et données structurées schema.org
  • Mise en ligne sur reverse proxy Caddy avec HTTPS, HSTS et HTTP/3

Les résultats

  • Une vitrine propriétaire qui porte le récit de la maison et réduit la dépendance aux plateformes de location
  • Un parcours de réservation direct, de la fiche chambre au paiement, sans quitter le site
  • Deux moyens de paiement couvrant la clientèle locale en FCFA et la clientèle internationale, plus un contact WhatsApp immédiat
  • Un catalogue autonome : l'équipe met à jour chambres, tarifs et photos depuis le back-office, en autonomie complète
  • Une référencement structuré pour la recherche locale grâce aux données structurées d'hébergement, de chambres et de galerie
  • Un site léger et rapide : une seule feuille de style, quelques scripts vanilla, HTTP/3 et cache d'entités

Les technologies utilisées

Ce qui a servi à mettre le projet en place, et pourquoi ces choix plutôt que d'autres.

Socle applicatif

  • Node.js

    Un seul langage du serveur au navigateur, pour une équipe réduite et des évolutions rapides.

  • Express

    Détecté via l'en-tête X-Powered-By : rendu HTML côté serveur et routes de paiement dans la même application, sans surcouche.

Interface

  • CSS sur mesure (/css/home.css)

    Une feuille unique versionnée, sans framework : le design Biris Tech est rendu tel quel et la page reste très légère.

  • JavaScript vanilla (/js/site.js)

    Menu, animations et contraintes de dates en quelques dizaines de lignes, aucune dépendance à charger.

  • IntersectionObserver

    Apparitions au défilement avec repli automatique : sans l'API, le contenu reste visible plutôt que masqué.

  • Plus Jakarta Sans (Google Fonts)

    Une seule famille en cinq graisses, préconnectée, suffit à porter toute la hiérarchie éditoriale.

Paiement

  • FedaPay

    Route /payment/fedapay/init : mobile money et carte en FCFA, le standard attendu par la clientèle togolaise et sous-régionale.

  • PayPal

    Routes create-order et capture : réservation à distance pour la clientèle internationale et la diaspora.

  • WhatsApp Business

    Lien wa.me pré-rempli : canal de contact immédiat pour les demandes qui ne passent pas par le paiement en ligne.

Diffusion et performance

  • Caddy

    En-tête Via : reverse proxy avec HTTPS automatique devant l'application Node.

  • HTTP/3

    Annoncé par Alt-Svc h3 : négociation plus rapide sur les réseaux mobiles ouest-africains.

  • HSTS preload

    max-age d'un an avec includeSubDomains : tout le trafic, paiement compris, reste en HTTPS.

  • ETag et Vary: Accept-Encoding

    Revalidation légère et compression négociée pour un site très riche en photographies.

Référencement

  • JSON-LD schema.org

    LodgingBusiness, HotelRoom avec prix en XOF et ImageGallery : les moteurs comprennent l'offre d'hébergement et les tarifs.

  • Open Graph et Twitter Card

    Les partages sur les réseaux, principal canal de la maison, affichent une carte visuelle complète.

L'architecture mise en place

Une application web Node.js rendue côté serveur, sans CMS ni framework front. Le HTML est généré par des gabarits Express, la mise en page repose sur une feuille de style unique, et les fonctions transactionnelles (contact, paiement) passent par des routes internes dédiées. Un back-office authentifié alimente le catalogue de chambres et la médiathèque.

01

Serveur applicatif

Rendu des pages et exposition des routes fonctionnelles

  • Node.js avec Express (en-tête X-Powered-By: Express)
  • Routes de pages : /, /chambres, /chambre/:id, /galerie, /blog
  • Route de formulaire : POST /contact
  • Routes de paiement : /payment/fedapay/init, /payment/paypal/create-order, /payment/paypal/capture
  • Espace privé : /admin protégé par redirection vers /admin/login
02

Interface publique

Présentation, navigation et conversion

  • Feuille de style unique versionnée (/css/home.css?v=11)
  • Script vanilla /js/site.js et scripts inline ciblés
  • Police Plus Jakarta Sans via Google Fonts avec preconnect
  • Animations d'apparition via IntersectionObserver, avec repli si l'API est absente
  • Menu mobile accessible (aria-expanded, aria-controls, fermeture au clavier)
  • Sélecteur de dates contraint : jamais de date passée, départ toujours postérieur à l'arrivée
03

Contenus et médias

Catalogue de chambres, galerie et journal

  • Photos servies depuis /image/, images de chambres téléversées depuis le back-office
  • Galerie décrite en JSON-LD ImageGallery avec dimensions et descriptions
  • Section Journal préparée pour la publication d'articles
  • Préchargement de l'image d'en-tête (link rel=preload)
04

Distribution et sécurité

Mise en ligne, performance réseau et transport

  • Reverse proxy Caddy (en-tête Via: 1.1 Caddy)
  • HTTP/3 annoncé via Alt-Svc h3
  • HSTS avec preload, max-age un an, includeSubDomains
  • ETag et Vary: Accept-Encoding pour la mise en cache
05

Référencement

Visibilité sur les moteurs et partage social

  • Balise canonical, meta robots index/follow
  • Open Graph complet et Twitter Card summary_large_image
  • JSON-LD LodgingBusiness sur l'accueil
  • JSON-LD HotelRoom avec prix en XOF et disponibilité sur les fiches chambres

Le projet en images

Cliquez sur un visuel pour l'agrandir.

Accueil : image pleine largeur et module de recherche par dates
L'accueil dans son intégralité : la maison, les chambres, les services et le contact
Chambres et suites : les hébergements proposés
Fiche d'une chambre : galerie photo, équipements et réservation

Sur mobile

La majorité des visites se fait au téléphone : voici le rendu tel que le voit un visiteur.

Accueil en version mobile
Chambres et suites en version mobile
Fiche d'une chambre en version mobile

Démonstrations

Parcours complet du siteAccueil, chambres et fiche détaillée d'une chambre.