Overview
Developed a bilingual digital menu for Topfloor Cafe, formerly known as 3rd Floor Cafe, in Riyadh. The experience was designed specifically for mobile, providing a smooth and intuitive way to explore coffee, food, and desserts. It supports light and dark modes, category browsing, product details, a café gallery, and persistent item selection. Menu data is loaded through a public API, combined with custom café content and gallery assets.
- Role
- Design & Build
- Category
- Menu
- Year
- 2024
Tags
MenuDigital MenuRestaurant Menu
Achievements
- Implemented complete Arabic and English localization with automatic RTL support.
- Designed a mobile-first interface optimized specifically for phone screen sizes.
- Added light and dark modes with persistent user preferences using localStorage.
- Integrated remote menu data with category and subcategory filtering.
- Implemented both grid and list product views with infinite scrolling.
- Created detailed product pages displaying pricing, calories, nutritional information, ingredients, and allergens.
- Developed a persistent selection system with quantity controls, automatic totals, and an order summary modal.
- Built a café gallery with localized captions.
- Handled loading states, unavailable menu states, missing pages, and empty selections.
- Improved accessibility with descriptive icon labels and a keyboard-dismissible order dialog.
Tech stack
Next.js 16 (App Router)TypeScript 5React 18Tailwind CSS 3Framer MotionLucide React & IconifyInter & Tajawal via next/font/googleReact Context with local Storage persistenceNext ImagePostCSS & Autoprefixer