FlutterFirebaseNext.jsTailwind CSSWebMobile

Cravings Digital Menu

Cravings Digital Menu

TYPE

fullstack

DURATION

1 week

COMPLETED

February 2024

LANGUAGE

Dart & TypeScript

MISSION BRIEF

Cravings Digital Menu is a modern, interactive food menu app designed for Cravings Restaurant to elevate their customer experience. Built using Flutter and Firebase, the mobile app allows users to browse a sleek, image-rich catalog of dishes, view detailed descriptions, and filter items by categories like 'Grab & Go Breakfast,' 'Specials,' or 'Main Dishes'. The system also includes a web-based admin panel built with Next.js, enabling restaurant managers to update menu items in real time, adjust prices, organize categories, and even change branding elements like the app theme colors or featured banners without needing to redeploy.

REPOSITORY LIVE DEMO

VISUAL_EVIDENCE

Gallery 0
Gallery 1
Gallery 2
Gallery 3

CORE FEATURES

  • Explore food items with rich images and descriptions
  • Sort and filter by category (e.g., Grab & Go, Specials, Main)
  • Search for specific meals by name or ingredient
  • Live pricing and availability updates
  • Admin panel for creating and editing menu items
  • Dynamic theme customization (colors, logos, background images)
  • Real-time data syncing across devices
  • QR code support for quick access to digital menu
  • Offline mode with cached menu data
  • Preview mode for testing menu changes before publishing

TECH STACK

  • >Flutter for fast, cross-platform mobile experience
  • >Firebase Firestore for real-time and scalable data handling
  • >Firebase Authentication for secure admin access
  • >Next.js admin panel with Tailwind CSS and dynamic previewing
  • >Role-based access control for different admin users
  • >Custom hooks and reusable components in admin for scalability
  • >Cloud Functions for automatic image resizing and sync triggers
  • >Responsive layout for tablets, kiosks, and smartphones

Operational Hurdles

Keeping UI in sync with frequent menu changes

SOLUTION_PROTOCOL: Utilized Firebase Realtime updates and implemented a listener-based reactive UI to reflect changes immediately

Providing customization without breaking the design

SOLUTION_PROTOCOL: Created a configuration engine in the admin panel that allows safe and scoped style/theme overrides

Making the admin dashboard intuitive for non-technical staff

SOLUTION_PROTOCOL: Designed the panel with drag-and-drop reordering, inline editing, and clear visual feedback for every action

Ensuring good performance even with high-resolution food images

SOLUTION_PROTOCOL: Used Firebase Cloud Storage with optimized image formats and lazy loading to ensure smooth performance