Caffeine — Coffee & Tea House

Le projet

Caffeine est un site web moderne conçu pour transformer l'identité physique du coffee shop en une expérience digitale immersive, rapide et simple à utiliser.

L'objectif était de créer bien plus qu'un simple site vitrine : une véritable plateforme permettant aux visiteurs de découvrir le menu, les promotions, les avis, les horaires et les différentes informations du coffee shop tout en offrant à l'équipe Caffeine une gestion autonome du contenu.

Le challenge

Le principal défi était de trouver un équilibre entre une direction artistique forte et une expérience utilisateur simple.

Le site devait être visuellement mémorable sans sacrifier la performance, la lisibilité ou l'accessibilité.

Il fallait également éviter de créer un site statique nécessitant l'intervention d'un développeur à chaque modification du menu, d'une promotion ou d'un horaire.

L'approche

J'ai conçu l'expérience avec une approche mobile-first.

L'interface utilise une identité inspirée de l'univers du café avec une combinaison de tons espresso, pistache et crème, accompagnée d'une typographie serif expressive et d'une mise en page éditoriale.

L'expérience repose sur plusieurs couches d'interaction :

• animations de texte et de contenu au scroll ;
• apparition progressive des sections ;
• parallaxe sur certaines images ;
• produits flottants ;
• éléments 3D animés ;
• transitions contrôlées pour conserver une navigation fluide.

Menu dynamique

Le menu est entièrement connecté au dashboard.

Les visiteurs peuvent parcourir les produits par catégorie et utiliser la recherche pour retrouver un produit à partir de son nom, de sa description ou de ses ingrédients.

Les produits mis en avant apparaissent en priorité lorsqu'ils possèdent une image.

Sur mobile, les catégories utilisent une navigation sticky afin de conserver un accès rapide au menu pendant le scroll.

Promotions

Le système de promotions permet à l'administrateur de créer plusieurs types d'offres :

• réduction en pourcentage ;
• réduction d'un montant fixe ;
• prix spécial ;
• prix bundle pour plusieurs produits.

Les promotions actives sont automatiquement affichées sur le site et peuvent modifier directement le prix présenté dans le menu.

Le système empêche également qu'un même produit soit associé à plusieurs promotions actives qui se chevauchent.

Reviews

Le site possède son propre système d'avis clients.

Un visiteur peut publier un avis depuis le site. L'avis reste en attente jusqu'à sa validation dans le dashboard.

L'administrateur peut ensuite approuver ou refuser les avis individuellement ou en groupe.

Une intégration Google Places permet également d'afficher séparément la note Google, le nombre d'avis et, lorsque Google les fournit, certains avis publics.

Dashboard

Une partie importante du projet est le CMS personnalisé développé pour Caffeine.

Depuis /admin, l'équipe peut gérer :

• produits ;
• catégories ;
• promotions ;
• lieux ;
• horaires ;
• réseaux sociaux ;
• informations de contact ;
• avis ;
• membres de l'équipe et rôles.

Toutes les modifications publiées depuis le dashboard sont reflétées sur le site sans modifier directement le code.

Authentification et sécurité

L'accès au dashboard est réservé aux utilisateurs ayant le rôle admin.

L'application utilise Supabase Authentication ainsi que Row Level Security pour protéger les opérations sensibles.

Les autorisations sont vérifiées au niveau de l'application mais également au niveau de la base de données.

Les médias sont stockés dans Supabase Storage avec des restrictions spécifiques pour les administrateurs.

Motion & 3D

GSAP est utilisé pour orchestrer les animations du site :

• scroll reveals ;
• masked text animations ;
• parallaxe ;
• animations de mots ;
• produits flottants.

Three.js est utilisé pour afficher des grains de café en 3D autour de la photographie produit.

La scène WebGL est optimisée afin de limiter son impact sur les performances et s'arrête automatiquement lorsqu'elle n'est plus visible.

Performance et accessibilité

Les animations ne doivent jamais bloquer l'accès au contenu.

L'expérience respecte la préférence système prefers-reduced-motion, et les animations peuvent également être mises en pause depuis l'interface.

Une alternative statique est utilisée lorsque WebGL n'est pas disponible.

Le site reste également lisible lorsque JavaScript est désactivé.

Des tests automatisés vérifient plusieurs dimensions d'écran, la navigation mobile, le clavier, le chargement des images, le comportement des animations et différents critères WCAG.

Stack technique

• Next.js 16
• TypeScript
• Supabase
• PostgreSQL
• GSAP
• Three.js
• Playwright
• Supabase Authentication
• Supabase Storage
• Row Level Security

Résultat

Le résultat est une expérience digitale qui combine storytelling visuel et outil métier.

Le site public offre une expérience immersive aux visiteurs tandis que le dashboard permet à Caffeine de gérer son contenu quotidien sans dépendre d'un développeur.

Cette architecture permet également au projet d'évoluer facilement avec de nouveaux produits, promotions, lieux, avis ou fonctionnalités.