Front public V2 d'OZZAK
- +Fondation : layout, header, footer, menu mobile et barre d’onglets
- +Accueil, pages films, film, cinéma et actualités (/actu)
- +Moteur de recherche en langage naturel : LLM en sortie structurée, requête PostgreSQL paramétrée
- +Garde-fous : autocomplétion sans LLM, rate limit, circuit breaker, reCAPTCHA, recherche de secours
- +Parcours d’achat V2 : paiement, attente de validation, remerciement
- +Choix de la ville pour les visiteurs non connectés, avec une règle de localisation unique
- +Redirections SEO des anciennes URL des pages films et cinéma
- +SEO des actualités : JSON-LD NewsArticle, canonical, hreflang, Open Graph, rendu serveur
- ~Back-end adapté quand le front le demandait
- ~Pages converties depuis la référence Next.js vers Symfony et Twig
Après l'espace membre, OZZAK reconstruit tout son front public en V2. J'ai développé l'ensemble de ce front, de la page d'accueil jusqu'à la page de remerciement d'achat, en intervenant sur le back-end quand c'était nécessaire.
Méthode
La référence d'interface est une version Next.js, que je convertis en pages Symfony et en composants Twig (Symfony UX). Les composants suivent le design atomique : atomes, molécules, organismes et blocs. Chaque page a son ticket, avec un sous-ticket par nouveau composant. Les pages utilisent la toolchain V2, AssetMapper et importmap, à la place de Webpack Encore.
Ce que j’ai réalisé
- La fondation : layout, header, footer, menu mobile et barre d’onglets du contexte application.
- La page d’accueil : recherche, sliders d’affiches, de séances du jour et d’articles, bloc de création de compte.
- Les pages films, film et cinéma : bande-annonce, partage, sélecteur de date, séances par cinéma, filtres de langue et « Autour de moi », redirections des anciennes URL pour le SEO.
- Le choix de la ville pour un visiteur non connecté : fenêtre sur ordinateur, tiroir sur mobile, ville conservée en session pendant la navigation.
- La partie actualités (/actu) et son référencement : données structurées NewsArticle et BreadcrumbList, title et description pilotés par le CMS, canonical avec redirection 301, hreflang fr-FR / fr-BE, balises Open Graph d’article, image principale en srcset et preload, corps d’article rendu côté serveur et maillage vers les fiches films.
- Le parcours d’achat : paiement, attente de validation et remerciement.
Recherche en langage naturel
La barre de recherche de l'accueil comprend des phrases comme « une comédie ce soir près de moi ». Le LLM n'est appelé qu'en dernier recours. L'autocomplétion et la reconnaissance exacte d'un film ou d'un cinéma mènent directement à la bonne page, sans LLM.
Pour une demande libre, Claude Haiku remplit un schéma fermé de critères : genre, cinéma, ville, date, horaire. Le modèle reçoit la date, le fuseau horaire, la liste des genres et la localisation du visiteur. Il ne produit jamais de SQL : l'application construit une requête PostgreSQL paramétrée, qui applique les règles de visibilité existantes.
L'appel est protégé par un quota par IP, un timeout court, un circuit breaker et reCAPTCHA v3. Si le LLM est indisponible, une recherche par mots-clés sur le catalogue prend le relais. Les tests utilisent un extracteur factice et n'appellent jamais l'API.
Back-end
Le paiement était déjà découplé de la vue (workflow de validation de commande, handlers Mangopay, endpoints de paiement). J'ai réécrit la couche de présentation en m'appuyant sur ces services, et adapté le back-end quand les nouvelles pages le demandaient. Par exemple, la localisation du visiteur suit désormais une seule règle (ville choisie en session, puis code postal du profil, puis contenu national), portée par un service unique utilisé par l'accueil comme par le header.