Cet article a été écrit par un être humain qui s’est servi principalement de l’IA pour la relecture et la correction de fautes, dans une ère où l’IA est utilisée partout et pour n’importe quoi, il est parfois important de remettre l’accent sur l’être humain.
On commence tous quelque part et nous au // STUDIO [1N] on a commencé chez La Guizi, un restaurant et coffee shop de passionnés au Pré-Saint-Gervais près de Paris.
La cheffe voulait un site vitrine qui donne envie aux clients de se rendre au restaurant et qui montre les nombreux atouts du restaurant comme sa terrasse cachée. Le besoin se portait également sur un système de réservation sur mesure qui est volontairement simplifié.
Images du site vitrine
Bienvenue dans ce premier case study du // STUDIO [1N], pour nous chaque projet s’accompagne d’un article décortiquant certains de nos choix techniques et permettant de mettre un peu plus en valeur le projet. Celui-ci est séparé en trois chapitres courts qui devraient constituer une lecture agréable pour n’importe quel lecteur technique ou non.
Vous avez une idée de projet ou vous voulez un projet comme celui-ci ? Contactez nous.
Bonne lecture.
Les réservations
Notre système de réservation est composé de 3 briques, la première: La page de réservation
C’est une page simple sur laquelle les utilisateurs remplissent leurs infos avec une validation côté client avec reglejs. Il y a également une couche de validation supplémentaire effectuée par Strapi. C’est assez classique avec la possibilité d’indiquer que l’on souhaite manger sur la terrasse cachée du restaurant.
La page de réservation & L’aperçu d’une réservation sur Strapi
Lorsque la réservation est effectuée, elle est alors créée dans une collection Strapi. Celle-ci doit être confirmée par la cheffe qui enverra alors un message au numéro de téléphone indiqué. C’est un système simple et efficace qui pourra par la suite être étendu selon les demandes, on pourrait très bien y greffer un système de gestion de tables par exemple.
La dernière brique de ce système va concerner les emails automatiques ainsi que l’archivage des réservations. À chaque nouvelle réservation la cheffe reçoit un email avec les informations de celle-ci, l’e-mail était une nécessité afin de garantir une réponse rapide aux clients qui réserveraient. Il y a également un envoi régulier d’e-mail concernant les statistiques de réservation pour la période en cours (matin, soir). Les réservations passées sont archivées au bout de 24 heures et au bout d’un an elles sont supprimées afin de correspondre aux normes RGPD.
Les différents emails concernant les réservations
Au-delà des réservations on a rencontré un autre défi technique assez inattendu arrivé assez tard pendant le développement…
Strapi et les images qui changent de sens
Sur le site de La Guizi il y a énormément d’images, sur la page d’accueil, sur la galerie, sur quasiment toutes les pages. Lors du passage en production quand la cheffe a dû ajouter des images, nous avons rencontré un petit problème:
IMG_2043.jpgComme vous avez pu le voir ci-dessus certaines images s’avèrent être “rebelles” et changent de sens lorsqu’elles sont uploadées. C’est un problème connu de Strapi depuis longtemps, alors on a itéré, cherché et creusé sans jamais trouver de vraie solution. Nous avons alors désactivé l’optimisation d’images de Strapi ce qui a réglé le problème mais en a créé un nouveau.
Certaines images utilisées sur le site étant des images d’appareils photo, elles demandent beaucoup de ressources afin d’être affichées et cela peut provoquer des ralentissements sur certains appareils. Alors notre solution s’est tournée côté client grâce au Saint Graal qu’est @nuxt/image qui permet d’optimiser le chargement d’images.
// Configuration générale pour un projet nuxt
export default defineNuxtConfig({
// Vos modules
modules: [
// ...
'@nuxt/image',
],
// Configuration du module
image: {
domains: [
new URL(process.env.STRAPI_URL || 'http://localhost:1337').hostname, // URL du front end
'my-images-bucket.com', // URL de votre bucket d'images
],
quality: 80, // Qualité des images
},
})Les images sont désormais chargées avec une qualité réduite, et en plus de cela, pendant leur chargement, on affiche un placeholder, ce qui est plus sympa que juste voir l’image apparaître subitement.
Après cette petite victoire, attaquons un sujet plus léger, parlons stats, parlons chiffres, parlons Umami !
Umami le goût des analytiques
Umami est un système d’analytics comparable à Google Analytics, cependant il fonctionne sans cookies et ne traque pas les informations personnelles des visiteurs entre les sites. Chez // STUDIO [1N] nous hébergeons notre propre instance de celui-ci sur nos serveurs basés en France et le service est inclus dans l’abonnement de maintenance. Il est utilisé pour tous nos projets et respecte les normes RGPD, il dispose de toutes les fonctionnalités qu’on pourrait attendre d’une solution d’analytics.
Une solution d’analytics fournit des données non négligeables qui permettent de savoir ce qui marche ou non dans votre projet, si vos utilisateurs ont tendance à quitter votre site ainsi que ce qui les attire le plus. Vous pouvez également traquer vos revenus si jamais vous disposez d’une boutique ou que vous vendez un ou des produits.
La page d’accueil d’un site sur Umami (laguizi.fr)
La page d’accueil fournit des informations essentielles telles que:
- Le nombre de visiteurs et le nombre de vues
- Les différentes pages visitées
- Les sources (d’où viennent les visiteurs)
- L’appareil et le navigateur utilisé
Les évènements
Umami permet également de traquer des événements pendant la visite d’un utilisateur. Sur ce projet nous voulions donner envie aux visiteurs en affichant des photos des plats dans la grille de plats située sur la page d’accueil. La grille de plats est composée de cartes qui se retournent en passant la souris assez vite dessus et qui peuvent être cliquées afin d’avoir le nom du plat.
Chaque fois qu’un plat est retourné, un autre plat aléatoire prend sa place, ce qui incite les utilisateurs à beaucoup jouer avec et à essayer de voir tous les plats, c’est purement esthétique car la carte est disponible en permanence sur le côté de l’écran mais c’est un moyen ludique pour que l’utilisateur interagisse avec le site.
Démo de la grille de plats sur PC, le comportement mobile est sensiblement le même
Et évidemment ces évènements intervenant sur la grille sont traqués, le nombre de plats retournés ainsi que les plats cliqués, cela donne une indication de quel plat donne le plus envie. Ces informations sont évidemment exportables afin d’être utilisées ailleurs que sur Umami.
Depuis que le site est en ligne, les cartes ont été retournées plus de 1000 fois ! 🥳
Les replays
Umami enregistre les sessions des utilisateurs tout en gardant leurs informations privées, rien de ce qu’ils écrivent ne figure dans l’enregistrement. C’est pratique pour identifier des comportements ou même identifier des actions clés que les utilisateurs peuvent effectuer. Le tracking ainsi que l’enregistrement sont totalement invisibles pour l’utilisateur et ne dégradent aucunement la qualité de l’expérience.
Démo d’une session enregistrée
En résumé, Umami est un outil versatile idéal pour vos projets, il dispose encore d’autres fonctionnalités qu’on mentionnera peut-être dans un autre post ou que vous pourrez découvrir en faisant un projet avec nous.
Et maintenant ?
Ce projet, on le considère comme réussi, depuis qu’il est en ligne, laguizi.fr a généré:
Chiffres datant du 25 juillet 2026
- Plus de 2000 vues et environ 850 visiteurs uniques
- 78% de référencement organique (via Google)
- 63 réservations
Chaque jour, un nombre constant de visiteurs viennent voir le site et inévitablement certains finissent par devenir des clients du restaurant. À l’ère où internet et le digital sont partout, chez // STUDIO [1N] nous voulons continuer à proposer des expériences uniques et créatives qui attirent de nouveaux clients pour votre activité. Nous apprenons de nos erreurs à chaque projet afin que chacun d’entre eux soit meilleur que le dernier.
Nous sommes activement à la recherche de projets afin de continuer notre lancée.
Vous avez un projet ou une idée ? Contactez nous :)
---- MERCI D’AVOIR LU ----