Web Menu React Application

A comprehensive restaurant ordering system built with React, TypeScript, and Ant Design. This application enables customers to browse menus, place orders, manage carts, split bills, and track orders across multiple restaurant services including dine-in, delivery, pickup, room service, office delivery, and gift orders.

🚀 Tech Stack

• Framework: React 18.3.1 with TypeScript
• UI Library: Ant Design 6.1.1
• State Management: Redux Toolkit 2.2.6
• Routing: React Router DOM 6.24.1 (Hash Router)
• Internationalization: i18next & react-i18next (English/Arabic with RTL support)
• Date/Time: dayjs
• Build Tool: Vite 5.3.1
• Maps: Google Maps API (@googlemaps/react-wrapper)

📁 Project Structure

src/
├── pages/              # Application pages
├── components/         # Reusable components
├── layouts/            # Layout components
├── routes/             # Routing configuration
├── redux/              # Redux store, slices, and API
├── contexts/           # React contexts
├── hooks/              # Custom React hooks
├── utils/              # Utility functions and constants
├── assets/             # Static assets (images, locales)
├── i18n/               # Internationalization setup
└── ThemeConstants.ts   # Theme configuration

📄 Main Pages

1. Restaurant Page (/pages/restaurant/page.tsx)

• Route: /:subdomain
• Purpose: Landing page for each restaurant
• Features:
  • Displays restaurant information and services
  • Shows available order types (dine-in, delivery, pickup, etc.)
  • Restaurant branding and promotions

2. Menu Page (/pages/menu/page.tsx)

• Route: /:subdomain/menu
• Purpose: Browse restaurant menu with categories and products
• Features:
  • Category-based navigation
  • Product cards with images and prices
  • Search functionality
  • Add to cart integration
  • Order type selection (dine-in, delivery, pickup, etc.)
  • Responsive design (mobile/desktop)

3. Product Detail Page (/pages/product/page.tsx)

• Route: /:subdomain/product/:productId
• Purpose: Detailed view of individual products
• Features:
  • Product information and images
  • Variant selection (sizes, options)
  • Extra items and add-ons
  • Quantity selection
  • Add to cart functionality
  • Customization options

4. Cart Page (/pages/cart/page.tsx)

• Route: /:subdomain/cart
• Purpose: Shopping cart management
• Features:
  • View cart items with quantities
  • Modify quantities or remove items
  • Special requests input
  • Table number selection (dine-in)
  • Car plate input (pickup)
  • Date/time selection for scheduled orders
  • Coupon application
  • Loyalty points usage
  • Order summary with totals

5. Checkout Page (/pages/checkout/page.tsx)

• Route: /:subdomain/checkout
• Purpose: Order review and customer information
• Features:
  • Customer information form
  • Address selection/input
  • Room/Office details (for room service/office delivery)
  • Gift details (for gift orders)
  • Payment method selection
  • Order summary
  • Place order functionality

6. Pay Page (/pages/pay/page.tsx)

• Route: /:subdomain/pay
• Purpose: Payment and bill splitting
• Features:
  • Payment processing
  • Split bill options:
    • Custom amount
    • Equal split
    • Pay for specific items
  • QR code generation for split payments
  • Payment summary

7. Split Bill Page (/pages/split-bill/page.tsx)

• Route: /:subdomain/split-bill
• Purpose: Manage split bill payments
• Features:
  • Total people count
  • Individual payment tracking
  • Payment summary per person
  • QR code sharing

8. Order Page (/pages/order/page.tsx)

• Route: /:subdomain/order/:orderId
• Purpose: Active order tracking
• Features:
  • Order status stepper
  • Real-time order updates
  • Countdown timer for preparation time (when in progress)
  • Circular progress indicator
  • Order details and items
  • Cancel order option

9. Orders List Page (/pages/orders/page.tsx)

• Route: /:subdomain/orders/:orderId?
• Purpose: View order history
• Features:
  • List of past orders
  • Order status badges (completed, closed, preparing)
  • Order details view
  • Re-order functionality
  • Rate order functionality
  • Protected route (requires authentication)

10. Order Details Page (/pages/orders/OrderDetails.tsx)

• Purpose: Detailed view of a specific order
• Features:
  • Order information (ID, date, restaurant)
  • Status badge with color coding:
    • Closed: Red background (#EA1F221F)
    • Completed: Green background (#28A7451F)
    • Preparing: Yellow background (#FFB7001F)
  • Order items list
  • Payment details
  • Rate order button
  • Re-order button

11. Search Page (/pages/search/page.tsx)

• Route: /:subdomain/search
• Purpose: Search products across the menu
• Features:
  • Product search functionality
  • Search results display
  • Filter options

12. Address Page (/pages/address/page.tsx)

• Route: /:subdomain/address
• Purpose: Manage delivery addresses
• Features:
  • Address input/selection
  • Google Maps integration
  • Address validation

13. Login Page (/pages/login/page.tsx)

• Route: /:subdomain/login
• Purpose: User authentication
• Features:
  • Phone number input
  • OTP verification flow

14. OTP Page (/pages/otp/page.tsx)

• Route: /:subdomain/otp
• Purpose: OTP verification
• Features:
  • OTP input component
  • Resend OTP functionality
  • Verification handling

15. Redeem Page (/pages/redeem/page.tsx)

• Route: /:subdomain/gift/redeem/:voucherId
• Purpose: Redeem gift vouchers
• Features:
  • Gift voucher redemption
  • Voucher validation

16. Error Pages (/pages/errors/)

• Routes: Various error routes
• Purpose: Handle application errors
• Pages:
  • Error400.tsx - Bad Request
  • Error403.tsx - Forbidden
  • Error404.tsx - Not Found
  • Error500.tsx - Server Error
  • Error503.tsx - Service Unavailable

🧩 Main Components

Layout Components

AppLayout (/layouts/app/AppLayout.tsx)

• Main application layout wrapper
• Provides consistent structure across pages

HeaderMenuDrawer (/layouts/app/HeaderMenuDrawer.tsx)

• Responsive header navigation
• Mobile drawer menu
• Language and theme switchers

FooterNav (/layouts/app/FooterNav.tsx)

• Bottom navigation bar
• Quick access to main sections

UI Components

ProBottomSheet (/components/ProBottomSheet/ProBottomSheet.tsx)

• Custom bottom sheet component
• Draggable and dismissible
• Prevents body scroll when open
• Snap points support
• Used throughout the app for modals and forms

ProText (/components/ProText.tsx)

• Custom text component with theme support
• Typography consistency

ProTitle (/components/ProTitle.tsx)

• Custom title component
• Consistent heading styles

ProInputCard (/components/ProInputCard/ProInputCard.tsx)

• Card wrapper for input sections
• Consistent styling for form sections

ArabicPrice (/components/ArabicPrice/ArabicPrice.tsx)

• Price display component
• Supports RTL formatting
• Currency formatting

PaymentDetails (/components/PaymentDetails/PaymentDetails.tsx)

• Displays order payment breakdown
• Shows subtotal, taxes, fees, discounts
• Final total calculation

PaymentMethods (/components/PaymentMethods/PaymentMethods.tsx)

• Payment method selection
• Multiple payment options

OrderSummary (/components/OrderSummary/OrderSummary.tsx)

• Order items summary
• Quantity and price display

Bottom Sheet Components

OrderTypesBottomSheet (/components/CustomBottomSheet/OrderTypesBottomSheet.tsx)

• Select order type (dine-in, delivery, pickup, etc.)
• Dynamic height based on available services
• Service availability handling

TipBottomSheet (/components/CustomBottomSheet/TipBottomSheet.tsx)

• Add tip to order
• Percentage or custom amount

CouponBottomSheet (/components/CustomBottomSheet/CouponBottomSheet.tsx)

• Apply coupon codes
• Discount application

DatePickerBottomSheet (/components/CustomBottomSheet/DatePickerBottomSheet.tsx)

• Date selection for scheduled orders
• Time picker integration

RateBottomSheet (/components/CustomBottomSheet/RateBottomSheet.tsx)

• Rate completed orders
• Star rating system
• Feedback submission

CancelOrderBottomSheet (/components/CustomBottomSheet/CancelOrderBottomSheet.tsx)

• Cancel active orders
• Confirmation dialog

MapBottomSheet (/components/CustomBottomSheet/MapBottomSheet.tsx)

• Google Maps integration
• Location selection
• Address input

OpeningTimesBottomSheet (/components/CustomBottomSheet/OpeningTimesBottomSheet.tsx)

• Display restaurant opening hours
• Operating schedule

Split Bill Components

CustomAmountChoiceBottomSheet (/pages/pay/components/splitBill/CustomAmountChoiceBottomSheet.tsx)

• Custom amount input for split bills
• Real-time preview of totals
• Debounced input (300ms)
• Service fee display

EqualltyChoiceBottomSheet (/pages/pay/components/splitBill/EqualltyChoiceBottomSheet.tsx)

• Equal split calculation
• Interactive spinner wheel (donut chart)
• Total amount display in center

PayForYourItemsChoiceBottomSheet (/pages/pay/components/splitBill/PayForYourItemsChoiceBottomSheet.tsx)

• Select specific items to pay for
• Circular checkbox selection
• Item-based payment calculation

QRBottomSheet (/pages/pay/components/splitBill/QRBottomSheet.tsx)

• QR code generation for split payments
• Share payment link

Menu Components

CategoriesList (/pages/menu/components/CategoriesList/CategoriesList.tsx)

• Category navigation
• Sticky header on scroll
• Active category highlighting

MenuList (/pages/menu/components/MenuList/MenuList.tsx)

• Product list display
• Category filtering
• Infinite scroll support

ProductCard (/pages/menu/components/MenuList/ProductCard.tsx)

• Individual product card
• Image, name, price display
• "Customizable" label
• RTL support

AddToCartButton (/pages/menu/components/AddToCartButton/AddToCartButton.tsx)

• Add product to cart
• Quantity selection
• Multi-layer box shadow styling

MenuFooter (/pages/menu/components/MenuFooter/MenuFooter.tsx)

• Fixed footer with cart summary
• Navigate to cart/pay
• Disabled state when cart is empty
• Warning message for empty cart

ProductPreviewDialog (/pages/menu/components/ProductPreviewDialog/ProductPreviewDialog.tsx)

• Quick product preview
• Modal dialog display

Cart Components

CartFooter (/pages/cart/components/cartFooter/CartFooter.tsx)

• Cart summary footer
• Proceed to checkout button

SpecialRequestCard (/pages/cart/components/specialRequest/SpecialRequestCard.tsx)

• Special instructions input
• Bottom sheet for detailed input

TimeEstimateCard (/pages/cart/components/timeEstimate/TimeEstimateCard.tsx)

• Estimated preparation time
• Date/time picker

CouponCard (/pages/cart/components/CouponCard.tsx)

• Coupon code input
• Discount display

TableNumberCard (/pages/cart/components/TableNumberCard.tsx)

• Table number selection (dine-in)

CarPlateCard (/pages/cart/components/CarPlateCard.tsx)

• Car plate input (pickup)

Form Components

ProInputNumber (/components/Inputs/ProInputNumber.tsx)

• Custom number input
• Consistent styling

ProPhoneInput (/components/ProPhoneInput.tsx)

• Phone number input with country code
• Validation

ProDatePicker (/components/ProDatePicker/ProDatePicker.tsx)

• Date selection component
• Time picker integration

ProCheckboxGroups (/components/ProCheckboxGroups/ProCheckboxGroups.tsx)

• Checkbox group component
• Multiple selection handling

ProRatioGroups (/components/ProRatioGroups/ProRatioGroups.tsx)

• Radio button group
• Single selection handling

OtpInput (/components/OtpInput/OtpInput.tsx)

• OTP code input
• Multi-digit input fields

Icon Components (/components/Icons/)

• Comprehensive icon library
• Custom SVG icons for:
  • Order types (dine-in, delivery, pickup, etc.)
  • Cart, payment, location
  • Social media
  • Navigation (back, next, etc.)

Utility Components

ImageWithFallback (/components/ImageWithFallback/ImageWithFallback.tsx)

• Image component with fallback
• Error handling

ImagePreloader (/components/ImagePreloader/ImagePreloader.tsx)

• Preload images for better performance

Loader (/components/Loader/Loader.tsx)

• Loading spinner
• Full-page loading state

LoadingSpinner (/components/LoadingSpinner/LoadingSpinner.tsx)

• Reusable spinner component

ErrorBoundaries (/components/ErrorBoundaries/ErrorBoundaries.tsx)

• Error boundary wrapper
• Error handling

AccessDenied (/components/AccessDenied/AccessDenied.tsx)

• Access denied page
• Permission handling

LanguageSwitch (/components/LanguageSwitch/LanguageSwitch.tsx)

• Language switcher
• English/Arabic toggle

ThemeSwitch (/components/ThemeSwitch/ThemeSwitch.tsx)

• Theme switcher
• Light/Dark mode toggle

FloatingButton (/components/FloatingButton/FloatingButton.tsx)

• Floating action button
• Scroll to top functionality

WheelPicker (/components/WheelPicker/)

• Custom wheel picker component
• Used for time/date selection

🎨 Key Features

1. Multi-Service Ordering

• Dine-in orders
• Delivery orders
• Pickup orders
• Room service
• Office delivery
• Gift orders
• Scheduled orders
• Table booking

2. Bill Splitting

• Custom amount splitting
• Equal split among multiple people
• Pay for specific items
• QR code sharing for split payments

3. Real-Time Order Tracking

• Order status stepper
• Countdown timer for preparation
• Circular progress indicator
• Status updates

4. Internationalization

• English and Arabic support
• RTL (Right-to-Left) layout support
• Dynamic language switching

5. Theme Support

• Light and Dark themes
• Theme persistence
• CSS custom properties

6. Responsive Design

• Mobile-first approach
• Tablet and desktop support
• Adaptive layouts
• Touch-friendly interactions

7. Cart Management

• Add/remove items
• Quantity modification
• Special requests
• Coupon application
• Loyalty points integration

8. Payment Integration

• Multiple payment methods
• Payment summary
• Split bill support

9. User Authentication

• Phone number login
• OTP verification
• Protected routes

10. Order History

• View past orders
• Order details
• Re-order functionality
• Rate orders

🔧 Development

Prerequisites

• Node.js 18+
• npm or yarn

Installation

npm install

Development Server

npm run dev

Build

npm run build

Preview Production Build

npm run preview

Linting

npm run lint

📱 Routes Overview

• / - Restaurant landing page
• /:subdomain - Restaurant home
• /:subdomain/menu - Menu browsing
• /:subdomain/product/:productId - Product details
• /:subdomain/cart - Shopping cart
• /:subdomain/checkout - Checkout
• /:subdomain/pay - Payment
• /:subdomain/split-bill - Split bill management
• /:subdomain/order/:orderId - Active order tracking
• /:subdomain/orders/:orderId? - Order history
• /:subdomain/search - Product search
• /:subdomain/address - Address management
• /:subdomain/login - Login
• /:subdomain/otp - OTP verification
• /:subdomain/gift/redeem/:voucherId - Gift redemption

🎯 State Management

The application uses Redux Toolkit for state management with the following main slices:

• Cart/Order State: Manages cart items, order type, special requests, etc.
• Theme State: Manages light/dark theme
• Locale State: Manages language and RTL direction
• API State: RTK Query for API calls

🌐 API Integration

The application uses RTK Query for API integration:

• Restaurant details
• Menu data
• Order creation and tracking
• User authentication
• Payment processing

📝 Notes

• All footer buttons across bottom sheets and pages have a standardized height of 48px
• The application uses hash routing for better compatibility
• Custom bottom sheets prevent body scrolling when open
• Debounced inputs are used for better performance (e.g., 300ms for custom amount input)
• The app supports both mobile and desktop views with responsive breakpoints

🔐 Authentication

Some routes are protected using the PrivateRoute component:

• Order history (/orders)
• Error pages requiring authentication

🎨 Styling

• CSS Modules for component-specific styles
• Global CSS for theme variables
• Ant Design theme customization
• Custom CSS properties for theming
• RTL support with dynamic direction switching

---

Built with ❤️ using React, TypeScript, and Ant Design