lime-restaurant

byM Revanth Kumar

Build a modern QR-based restaurant ordering web app for a brand called “MRK Foods”. The system should work like this: customers scan a QR code at their table and instantly access a digital menu where they can browse food items, add them to cart, and place orders in real time. Core features: QR code landing page for table-based ordering Digital menu with categories (BBQ, Burgers, Pizza, Drinks, Desserts) Food item cards with image, name, price, rating, and Add to Cart button Shopping cart with quantity controls and live total price calculation Order placement system with confirmation page Table number detection or input system Order status tracking (Received → Preparing → Ready) Design style: Modern premium UI inspired by Uber Eats + Apple Dark theme with neon accents (orange/red highlights) Glassmorphism cards and smooth animations Mobile-first responsive design Clean typography and interactive hover effects Pages: Landing page with QR scan introduction Menu page (main ordering interface) Cart + checkout page Order confirmation/status page Additional requirements: Fast, responsive, production-ready structure Smooth navigation and transitions Simple admin-ready structure for adding menu items Clean code architecture (frontend + backend if possible) The final output should be a fully working QR restaurant ordering website that can be deployed and used in a real restaurant environment.

OrdersLogin
Orders

Comments (0)

No comments yet. Be the first!

System Requirements

System Requirement Document
Page 1 of 5

lime-restaurant System Requirements Document

Introduction

The "lime-restaurant" project is a modern QR-based restaurant ordering web application designed for "MRK Foods". This system aims to enhance the dining experience by allowing customers to scan a QR code at their table to access a digital menu, browse food items, add them to their cart, and place orders in real-time.

System Overview

The lime-restaurant system is designed to streamline the ordering process in a restaurant setting. Customers can use their smartphones to scan a QR code, which directs them to a digital menu. The application supports a seamless ordering experience with features like a categorized menu, live order tracking, and an intuitive user interface. The system also includes roles for an owner and admins to manage the restaurant's operations effectively.

Page 2 of 5

Functional Requirements

  • As a Customer, I should be able to scan a QR code to access the digital menu.
  • As a Customer, I should be able to browse food items by categories such as BBQ, Burgers, Pizza, Drinks, and Desserts.
  • As a Customer, I should be able to view food item details including image, name, price, and rating.
  • As a Customer, I should be able to add items to my cart and adjust quantities.
  • As a Customer, I should be able to see a live total price calculation in my cart.
  • As a Customer, I should be able to place an order and receive a confirmation.
  • As a Customer, I should be able to track my order status (Received → Preparing → Ready).
  • As an Admin, I should be able to add and update menu items.
  • As an Admin, I should be able to monitor and manage orders.
  • As the Owner, I should have full access to manage admins, view reports, and configure system settings.

User Personas

  • Owner: M Revanth Kumar, responsible for overall system management, admin oversight, and strategic decisions.
  • Admin: Restaurant staff responsible for managing menu items, tracking orders, and ensuring smooth operations.
  • Customer: Restaurant patrons who use the QR-based system to order food.
Page 3 of 5

Visuals Colors and Theme

  • primary: #1A1A2E (Deep Midnight Blue)
  • primary_light: #16213E (Light Midnight Blue)
  • secondary: #E94560 (Crimson Red)
  • accent: #F9D342 (Vibrant Yellow)
  • highlight: #FF6F61 (Coral)
  • bg: #0F3460 (Dark Blue)
  • surface: rgba(255, 255, 255, 0.1) (Glassmorphism Effect)
  • text: #FFFFFF (White)
  • text_muted: #B0B0B0 (Muted Gray)
  • border: rgba(255, 255, 255, 0.2) (Subtle White)

Signature Design Concept

The homepage of the lime-restaurant web app will feature an interactive "Digital Dining Experience" concept. Upon scanning the QR code, users are greeted with a dynamic landing page that simulates a virtual restaurant table. Using @react-three/fiber and @react-three/drei, the table will appear in 3D, with menu categories represented as interactive objects (e.g., a pizza box for the Pizza category). Users can click on these objects to "open" them, revealing the menu items inside. The background will subtly shift colors using gsap to reflect the time of day, enhancing the dining ambiance. Hover effects will animate the objects slightly, inviting interaction, and clicking will trigger smooth transitions to the detailed menu view.

Page 4 of 5

Interaction Model & Motion Direction

The landing page will employ a "parallax" interaction model, creating a layered depth effect as users scroll. Decorative elements like ambient lighting and floating particles will move at different speeds, providing a rich, immersive experience. The main content will scroll naturally, ensuring usability and accessibility. Internal pages, such as the menu and cart, will use an "animated" model with scroll-triggered reveals and hover transitions to maintain a polished, responsive feel.

Non-Functional Requirements

  • The system must be highly responsive and mobile-first to accommodate various device sizes.
  • The application should ensure fast load times and smooth transitions.
  • The architecture must support scalability to handle increased traffic during peak hours.
  • Security measures must be in place to protect user data and transactions.

Tech Stack

  • Frontend: React for Web
  • Backend: Python with FastAPI
  • Database: MySQL or MariaDB, using Alembic for migrations
  • AI Models: GPT 5.4 for user-friendly responses
  • AI Tools: Litellm for LLM Routing
  • Local Orchestration: Docker, docker-compose
  • Server-side Orchestration: Kubernetes
Page 5 of 5

Assumptions and Constraints

  • The system assumes that customers have smartphones capable of scanning QR codes.
  • The restaurant environment must support stable internet connectivity for real-time operations.
  • The application will be deployed in a production environment with appropriate server resources.

Glossary

  • QR Code: A machine-readable code used for accessing the digital menu.
  • Glassmorphism: A design style that uses transparency and blur effects to create a frosted glass appearance.
  • Parallax: A scrolling effect where background images move slower than foreground images, creating a sense of depth.
  • Admin: A user role with permissions to manage menu items and orders.
  • Owner: The primary user role with full system access and management capabilities.
Login: Sign In
Dashboard: View Orders
Dashboard: Monitor Live Orders
Orders: Update Status
Menu: Manage Items
Menu: Add Item
Menu: Edit Item
Menu: Update Details
Orders: View History