Shawarma Lma3louma

The project

Shawarma Lma3louma is a responsive restaurant website designed to bring the restaurant's menu, locations, reviews and key information into one clear digital experience.

The website is available in French, English and Arabic, including complete RTL support for Arabic.

A custom administration experience also gives the restaurant team control over its content without requiring code changes.

The challenge

The project needed to solve several problems at the same time:

• organize a large restaurant menu;
• support three languages;
• provide proper Arabic RTL layouts;
• keep restaurant information dynamic;
• allow visitors to submit reviews;
• protect review submissions against abuse;
• provide secure administration tools;
• maintain good mobile performance.

It also had to integrate with the restaurant's existing ordering workflow rather than introducing a fictional checkout process.

Trilingual experience

The complete public experience supports:

• French;
• English;
• Arabic.

The visitor's language preference is remembered across the experience.

Arabic uses a complete right-to-left layout instead of simply translating the interface copy.

Menu search also works across all three languages.

Dynamic menu

The menu was built to remain easy to explore as its content grows.

Visitors can use:

• category filters;
• multilingual search;
• price sorting;
• meal toggles;
• priced product variations.

When Supabase is configured, it becomes the live source of categories, menu items and restaurant locations.

Glovo integration

The website does not simulate an online checkout.

Customers who want to order are handed off directly to Lma3louma's Glovo destination.

Glovo remains responsible for delivery coverage, branch routing, real-time availability, live pricing, checkout and delivery.

This keeps the website transparent while integrating with the restaurant's existing ordering infrastructure.

Locations and visit planner

The restaurant's Casablanca locations are included with their respective Google Maps links.

Visitors can also plan a future visit.

The site generates a personal .ics calendar file that can be imported into their preferred calendar application.

Guest reviews

Visitors can leave a review without creating an account.

A submission can contain:

• a 1–5 star rating;
• a title;
• an optional description;
• an optional photo.

Every submission starts with a pending status.

Reviews remain invisible until an administrator approves them.

Review protection

The review system includes several security layers.

Cloudflare Turnstile helps protect the submission endpoint against automated abuse.

Daily network-based quotas are also enforced server-side.

Uploaded review images are stored in a private storage bucket and protected by Row Level Security.

This prevents an unapproved review image from being publicly retrieved even when its exact storage path is known.

Administration dashboard

The /admin area provides the restaurant team with dedicated management tools.

Administrators can manage:

• categories;
• menu products;
• locations;
• reviews;
• social links;
• Glovo and Klit links.

The administration interface itself is also available in all three supported languages.

Authentication and permissions

Supabase handles authentication.

There is no public administrator registration flow.

Admin access must be explicitly granted through the trusted database environment.

Row Level Security adds another authorization layer at the database level.

Removing an administrator record immediately revokes write access.

Performance

Performance was treated as part of the product rather than an afterthought.

The project uses:

• responsive WebP images;
• self-hosted WOFF2 fonts;
• immutable caching for versioned assets;
• lazy-loaded integrations;
• animations that pause while offscreen.

The review interface and CAPTCHA integration are also loaded on demand instead of being included in the main application bundle.

Accessibility

Interactive components follow accessible interaction patterns.

Native dialogs support keyboard dismissal and restore focus correctly after closing.

Reduced-motion preferences are supported, and animations can also be manually controlled.

Testing

The application contains extensive automated testing using Playwright together with embedded PostgreSQL test suites.

Coverage includes:

• menu filtering;
• price changes;
• product variations;
• Glovo links;
• language persistence;
• Arabic RTL;
• mobile navigation;
• calendar downloads;
• review submission;
• CAPTCHA;
• admin CRUD;
• uploads;
• moderation;
• revoked administrator access;
• runtime errors;
• horizontal overflow across several viewport sizes.

Technology

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

Outcome

The result is more than a restaurant marketing website.

Lma3louma combines brand presentation, menu discovery, locations, customer interaction and content management in one system.

Visitors receive a fast, accessible and mobile-friendly trilingual experience while the restaurant team can independently maintain the content through its administration dashboard.