Shawarma Lma3louma

Le projet

Shawarma Lma3louma est une expérience web responsive développée pour digitaliser la présence du restaurant et faciliter l'accès à son menu, ses adresses, ses avis clients et ses différentes informations.

Le site est disponible en français, anglais et arabe avec une prise en charge complète de l'affichage RTL pour l'arabe.

L'objectif était également de donner à l'équipe du restaurant une véritable interface d'administration afin de gérer son contenu sans modifier directement le code.

Le challenge

Le projet devait répondre à plusieurs besoins en même temps :

• présenter un menu relativement riche de manière claire ;
• proposer trois langues ;
• gérer correctement l'arabe et le RTL ;
• connecter les informations aux données Supabase ;
• permettre aux visiteurs de publier des avis ;
• protéger le système d'avis contre les abus ;
• proposer une interface d'administration simple ;
• conserver de bonnes performances sur mobile.

Le site devait également s'intégrer au fonctionnement existant du restaurant sans recréer artificiellement une plateforme de commande.

Une expérience trilingue

L'ensemble de l'interface publique est disponible en :

• français ;
• anglais ;
• arabe.

La langue sélectionnée est mémorisée.

La version arabe utilise un véritable layout RTL plutôt qu'une simple traduction du texte.

Le menu peut également être recherché dans les trois langues.

Menu dynamique

Le menu permet aux visiteurs de parcourir facilement les produits du restaurant.

Plusieurs fonctionnalités facilitent la navigation :

• recherche ;
• filtres par catégorie ;
• tri par prix ;
• sélection du repas ;
• variations avec différents prix.

Les données du menu peuvent être administrées depuis Supabase plutôt que d'être directement intégrées dans l'interface.

Commande via Glovo

Le site n'essaie pas de reproduire un faux checkout.

Lorsqu'un utilisateur souhaite commander, il est redirigé vers le restaurant sur Glovo.

Glovo reste responsable de la disponibilité, des zones de livraison, des prix en temps réel et du paiement.

Cette approche permet de conserver un parcours clair tout en utilisant l'infrastructure de commande déjà existante du restaurant.

Localisations

Les deux établissements de Casablanca sont intégrés au site avec leurs liens Google Maps.

Le visiteur peut également planifier une visite.

Le site génère alors un fichier calendrier .ics personnel que l'utilisateur peut ajouter à son calendrier.

Avis clients

Les visiteurs peuvent publier leur propre avis directement depuis le site sans créer de compte.

Un avis peut contenir :

• une note de 1 à 5 ;
• un titre ;
• une description ;
• une photo.

Chaque avis est créé avec le statut pending.

Il reste invisible publiquement jusqu'à ce qu'un administrateur l'approuve.

Protection des avis

Le système d'avis a été conçu avec plusieurs couches de sécurité.

Cloudflare Turnstile est utilisé pour protéger le formulaire contre les soumissions automatisées.

Le serveur applique également des limites quotidiennes par adresse réseau.

Les photos associées aux avis sont stockées dans un bucket privé.

Même lorsqu'une personne connaît le chemin exact d'une photo non approuvée, elle ne peut pas y accéder sans respecter les politiques de sécurité de la base de données.

Dashboard d'administration

Une interface /admin permet à l'équipe de gérer le contenu du site.

Elle couvre notamment :

• catégories ;
• menu ;
• localisations ;
• avis ;
• liens sociaux ;
• liens Glovo et Klit.

L'interface d'administration fonctionne également dans les trois langues.

Authentification et permissions

L'authentification repose sur Supabase.

Il n'existe pas d'inscription publique pour devenir administrateur.

Les administrateurs doivent être explicitement ajoutés dans la table admin_users depuis un environnement de confiance.

Les politiques Row Level Security protègent les opérations sensibles.

La suppression d'un utilisateur de la liste des administrateurs lui retire immédiatement ses droits d'écriture.

Performance

Une attention particulière a été portée au poids du site et au chargement des ressources.

Le projet utilise notamment :

• images WebP responsive ;
• fonts WOFF2 auto-hébergées ;
• cache immutable pour les assets versionnés ;
• chargement différé de certains contenus ;
• animations suspendues lorsqu'elles ne sont plus visibles.

Le formulaire d'avis et le CAPTCHA sont également chargés uniquement lorsque cela devient nécessaire.

Accessibilité

Les composants interactifs utilisent des comportements accessibles.

Les fenêtres modales peuvent être fermées au clavier et restaurent correctement le focus.

Le site prend également en compte les préférences de réduction des animations.

Tests

Le projet possède une couverture de tests importante avec Playwright et PostgreSQL embarqué.

Les tests vérifient notamment :

• filtres du menu ;
• changements de prix ;
• variations produit ;
• intégration Glovo ;
• persistance des langues ;
• RTL ;
• navigation mobile ;
• génération du calendrier ;
• soumission des avis ;
• CAPTCHA ;
• CRUD administrateur ;
• uploads ;
• modération ;
• permissions ;
• comportement sur plusieurs tailles d'écran.

Stack technique

• React 19
• TypeScript
• Vite
• Supabase
• PostgreSQL
• Vercel
• Playwright
• Cloudflare Turnstile
• Row Level Security
• Supabase Storage

Résultat

Le résultat est bien plus qu'un site vitrine pour restaurant.

Lma3louma dispose d'une plateforme qui combine présentation de marque, menu dynamique, localisation, interaction client et administration du contenu.

L'équipe peut faire évoluer le menu et les informations du restaurant depuis son dashboard, tandis que les visiteurs profitent d'une expérience rapide, accessible et adaptée au mobile dans trois langues.