Étude de cas

Mystères à la carte

One-page immersive Next.js orientée conversion vers une demande de réservation

Product Design (UX/UI)Architecture Front-endDéveloppement React/Next.jsAccessibilitéTesting & qualitéReact 19Next.js (App Router)TypeScriptTailwind CSS v4Framer MotionReact Hook FormZodVitestPlaywright

Voir la démo Voir le code Me contacter

Contexte

Projet portfolio de démonstration : concevoir une landing one-page premium (escape game culinaire) qui combine narration visuelle et accès immédiat aux informations utiles (durée, capacité, menus, réservation). L’enjeu principal était de conserver une interface immersive sans dégrader lisibilité, accessibilité et robustesse technique.

Points clés

Parcours principal clarifié : header à ancres + CTA "Réserver" disponible en desktop et mobile.
Formulaire robuste côté client : validation de tous les champs clés, consentement obligatoire et feedback immédiat utilisateur.
Qualité outillée de bout en bout : lint, typecheck strict, tests unitaires, tests composants (Header, BookingForm, ToastProvider, NotFoundView) et flows e2e Playwright.
Base maintenable pour itérations produit : contenu centralisé, composants découplés, pages légales et 404 personnalisée prêtes pour production.

Objectifs

Réduire la friction vers la section "Réserver" via une navigation par ancres, un CTA persistant et une hiérarchie de sections scannable.
Rendre les informations décisionnelles visibles rapidement (60–90 min, 2–6 joueurs, menus, tarif) pour faciliter l’intention de réservation.
Sécuriser la saisie du formulaire (validation stricte, feedback inline, états loading/success/error) sans backend.
Maintenir une qualité de code élevée (TypeScript strict, lint, format, tests unitaires/composants/e2e, script check global).

Défis

Trouver l’équilibre entre direction artistique dark premium et lisibilité réelle des contenus textuels.
Multiplier les micro-interactions sans pénaliser le rendu initial ni l’expérience sur appareils modestes.
Assurer une navigation mobile accessible avec menu feuille (focus trap, fermeture clavier, restauration du focus).
Conserver un parcours de réservation crédible en mode démo (pas d’API), tout en gérant anti-spam et retours utilisateur.

Solutions

Architecture feature-based (src/features, src/shared, src/content) pour séparer domaine, UI réutilisable et contenu éditorial.
One-page structurée en sections courtes + ancres actives (IntersectionObserver + fallback scroll) pour guider la lecture et l’action.
Formulaire piloté par React Hook Form + schéma Zod, messages d’erreur contextualisés, honeypot "bot", toasts globaux et modal de confirmation.
Animations contextualisées : Framer Motion sur interactions à forte valeur perçue, composants ScrollReveal/Pane pour des mouvements progressifs, et respect de prefers-reduced-motion.
Performance perçue préservée via chargement dynamique de la section Dataviz et scripts de contrôle (fx:size, check:all).

Points forts

Résultats

Parcours principal clarifié : header à ancres + CTA "Réserver" disponible en desktop et mobile.
Formulaire robuste côté client : validation de tous les champs clés, consentement obligatoire et feedback immédiat utilisateur.
Qualité outillée de bout en bout : lint, typecheck strict, tests unitaires, tests composants (Header, BookingForm, ToastProvider, NotFoundView) et flows e2e Playwright.
Base maintenable pour itérations produit : contenu centralisé, composants découplés, pages légales et 404 personnalisée prêtes pour production.

Galerie

4 captures

Envie d’un échange ? Je peux te présenter ce projet comme en entretien (choix techniques, perf, a11y).

Voir la démo Voir le code Me contacter

← Retour aux projets2025

Étude de cas

Mystères à la carte

One-page immersive Next.js orientée conversion vers une demande de réservation

Voir la démo Voir le code Me contacter

Contexte

Points clés

Parcours principal clarifié : header à ancres + CTA "Réserver" disponible en desktop et mobile.
Formulaire robuste côté client : validation de tous les champs clés, consentement obligatoire et feedback immédiat utilisateur.
Qualité outillée de bout en bout : lint, typecheck strict, tests unitaires, tests composants (Header, BookingForm, ToastProvider, NotFoundView) et flows e2e Playwright.
Base maintenable pour itérations produit : contenu centralisé, composants découplés, pages légales et 404 personnalisée prêtes pour production.

Objectifs

Réduire la friction vers la section "Réserver" via une navigation par ancres, un CTA persistant et une hiérarchie de sections scannable.
Rendre les informations décisionnelles visibles rapidement (60–90 min, 2–6 joueurs, menus, tarif) pour faciliter l’intention de réservation.
Sécuriser la saisie du formulaire (validation stricte, feedback inline, états loading/success/error) sans backend.
Maintenir une qualité de code élevée (TypeScript strict, lint, format, tests unitaires/composants/e2e, script check global).

Défis

Trouver l’équilibre entre direction artistique dark premium et lisibilité réelle des contenus textuels.
Multiplier les micro-interactions sans pénaliser le rendu initial ni l’expérience sur appareils modestes.
Assurer une navigation mobile accessible avec menu feuille (focus trap, fermeture clavier, restauration du focus).
Conserver un parcours de réservation crédible en mode démo (pas d’API), tout en gérant anti-spam et retours utilisateur.

Solutions

Architecture feature-based (src/features, src/shared, src/content) pour séparer domaine, UI réutilisable et contenu éditorial.
One-page structurée en sections courtes + ancres actives (IntersectionObserver + fallback scroll) pour guider la lecture et l’action.
Formulaire piloté par React Hook Form + schéma Zod, messages d’erreur contextualisés, honeypot "bot", toasts globaux et modal de confirmation.
Animations contextualisées : Framer Motion sur interactions à forte valeur perçue, composants ScrollReveal/Pane pour des mouvements progressifs, et respect de prefers-reduced-motion.
Performance perçue préservée via chargement dynamique de la section Dataviz et scripts de contrôle (fx:size, check:all).

Points forts

Résultats

Parcours principal clarifié : header à ancres + CTA "Réserver" disponible en desktop et mobile.
Formulaire robuste côté client : validation de tous les champs clés, consentement obligatoire et feedback immédiat utilisateur.
Qualité outillée de bout en bout : lint, typecheck strict, tests unitaires, tests composants (Header, BookingForm, ToastProvider, NotFoundView) et flows e2e Playwright.
Base maintenable pour itérations produit : contenu centralisé, composants découplés, pages légales et 404 personnalisée prêtes pour production.

Galerie

4 captures

Envie d’un échange ? Je peux te présenter ce projet comme en entretien (choix techniques, perf, a11y).

Voir la démo Voir le code Me contacter