← Back to the portfolio

Restaurant & Café POS SaaS

A bilingual (Arabic/English) point-of-sale and ordering system for restaurants and cafés: POS, kitchen board, tables, offers, customers, reports, and a phone-first online ordering page, where each staff member only sees what their role allows.

The New Order (POS) screen: product grid, a cart with an automatic discount, and order type buttons.

Featured Website SaaS · Prototype

5Staff roles with their own screens
2Languages, with full right-to-left Arabic
9Build stages, each reviewed before the next

A project by Youssef Ehab Alsayed

The question

How can one system serve a whole café or restaurant, from the owner and cashier to the kitchen and online customers, while each person only sees the screens their job needs?

What I built

A clickable prototype built in 9 stages, in plain HTML, CSS and JavaScript with no framework, that I demo to restaurant and café owners. Every button and page is controlled by one permission check, so a group like Cashier, Waiter or Kitchen only sees what it is allowed to use, and a "View as" switch shows the difference live. It includes a POS screen with automatic offers, a kitchen board, tables, customers, reports with CSV export, printable receipts and kitchen tickets, add-ons like WhatsApp confirmations, white-label brand colors, and a phone-first online ordering page. Everything works in Arabic (right-to-left) and English, light and dark, on phone, tablet and desktop. It is the visual reference for the real version on .NET 10 and React.

Tools

HTML CSS JavaScript RTL / i18n Vercel

Live site

Live site

Live demo: pick a demo user (Sara is the owner) and try placing an order, then switch to the kitchen.

Open site

Screenshots

The same POS screen in Arabic: the whole layout flips right-to-left.
The same POS screen in Arabic: the whole layout flips right-to-left.
Owner's home: today's sales, open orders, top items and special offers.
Owner's home: today's sales, open orders, top items and special offers.
Kitchen board: New, Preparing and Ready columns, updated every few seconds.
Kitchen board: New, Preparing and Ready columns, updated every few seconds.
Groups & permissions: the owner decides what each role can view, create, edit or delete.
Groups & permissions: the owner decides what each role can view, create, edit or delete.
Reports: daily sales, sales by item and by order type, with CSV export.
Reports: daily sales, sales by item and by order type, with CSV export.
Phone-first customer page: menu, live offers and online ordering.
Phone-first customer page: menu, live offers and online ordering.