🍽️ DINE24 - AI-Powered Restaurant Management System

Developer: MAMIDALA BHAVYA REDDY & DHADI SAI PRANEETH REDDY

🏆 Full Stack Web Application with Advanced AI Integration

🎯 Project Overview

DINE24 is a comprehensive, AI-powered restaurant management system that revolutionizes the dining experience through intelligent automation, seamless reservations, and real-time customer support. Built with modern React.js and integrated with Supabase backend services and Google's Gemini AI, this system provides a complete solution for restaurant operations and customer engagement.

🏗️ Real System Architecture & Flow

┌─────────────────────────────────────────────────────────────────────┐
│                    DINE24 ACTUAL SYSTEM FLOW                        │
└─────────────────────────────────────────────────────────────────────┘

┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
│   FRONTEND      │    │    BACKEND      │    │    DATABASE     │
│   (React.js)    │────│   (Supabase)    │────│   (PostgreSQL)  │
│                 │    │                 │    │                 │
│ • TypeScript    │    │ • Edge Functions│    │ • Tables:       │
│ • Tailwind CSS  │    │ • Authentication│    │   - reservations│
│ • React Router  │    │ • Real-time DB  │    │   - menu_items  │
│ • Vite Build    │    │ • RESTful API   │    │   - users       │
│ • AI Chat UI    │    │ • File Storage  │    │   - profiles    │
│ • Admin Panel   │    │                 │    │                 │
└─────────────────┘    └─────────────────┘    └─────────────────┘
         │                       │                       │
         ▼                       ▼                       ▼
┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
│   AI SERVICES   │    │   REAL-TIME     │    │   DEPLOYMENT    │
│                 │    │   FEATURES      │    │                 │
│ • Gemini API    │    │                 │    │ • Netlify       │
│ • Context Aware │    │ • Live Updates  │    │ • Hot Reload    │
│ • Navigation    │    │ • Toast Alerts  │    │ • Preview Mode  │
│ • Menu Context  │    │ • State Sync    │    │ • Build System  │
└─────────────────┘    └─────────────────┘    └─────────────────┘

🤖 AI Chatbot & Database Synchronization Flow (Real Implementation)

┌─────────────────────────────────────────────────────────────────────┐
│              SUPABASE + GEMINI AI INTEGRATION WORKFLOW              │
└─────────────────────────────────────────────────────────────────────┘

┌─────────────────┐     ┌─────────────────┐     ┌─────────────────┐
│    USER QUERY   │     │  SUPABASE EDGE  │     │   POSTGRESQL    │
│                 │     │    FUNCTION     │     │    DATABASE     │
│ "Show me menu"  │───▶ │                 │───▶│                 │
│ "Book a table"  │     │ ai-chat/index.ts│     │ • menu_items    │
│ "What's special"│     │                 │     │ • reservations  │
└─────────────────┘     │ 1. Parse Request│     │ • user_profiles │
         │               │ 2. Query DB     │     └─────────────────┘
         ▼               │ 3. Build Context│              │
┌─────────────────┐     │ 4. Call Gemini  │              ▼
│   FRONTEND      │     └─────────────────┘     ┌─────────────────┐
│   COMPONENT     │              │               │   MENU CONTEXT  │
│                 │              ▼               │                 │
│ AIChat.tsx      │     ┌─────────────────┐     │ • Dish Names    │
│ • State Mgmt    │◄────│   GEMINI API    │◄────│ • Prices        │
│ • UI Updates    │     │                 │     │ • Categories    │
│ • Navigation    │     │ • Natural Lang  │     │ • Ratings       │
└─────────────────┘     │ • Context Under │     │ • Availability  │
                        │ • Smart Routing │     └─────────────────┘
                        └─────────────────┘

🔄 Gemini API Page Navigation & Response Flow (Actual Implementation)

┌─────────────────────────────────────────────────────────────────────┐
│           REAL GEMINI API PROCESSING & NAVIGATION SYSTEM            │
└─────────────────────────────────────────────────────────────────────┘

     USER INPUT              SUPABASE EDGE FUNCTION            REACT FRONTEND
┌─────────────────┐    ┌─────────────────────────────────┐    ┌─────────────────┐
│                 │    │                                 │    │                 │
│ "Show vegetarian│───▶│   supabase/functions/ai-chat/   │───▶│   AIChat.tsx    │
│  dishes"        │    │        index.ts                 │    │                 │
│                 │    │                                 │    │ • Parse Response│
│ "Book table for │    │ 1. Receive Message              │    │ • Check Navigation│
│  4 people"      │    │ 2. Query menu_items table       │    │ • Update UI     │
│                 │    │ 3. Build menu context           │    │ • Trigger Route │
│ "Today's        │    │ 4. Detect navigation intent     │    │                 │
│  specials?"     │    │ 5. Call Gemini API with context │    │ React Router:   │
│                 │    │ 6. Process AI response          │    │ • /menu         │
└─────────────────┘    │ 7. Return JSON with navigation  │    │ • /reserve-table│
         │             │                                 │    │ • /todays-special│
         │             │ Navigation Detection:           │    └─────────────────┘
         ▼             │ - "menu" keywords → /menu       │             │
┌─────────────────┐    │ - "book" keywords → /reserve    │             │
│  REAL DATABASE  │    │ - "special" keywords → /special │             ▼
│   INTEGRATION   │    │                                 │    ┌─────────────────┐
│                 │    │ Context Building:               │    │   AUTOMATIC     │
│ Supabase Tables │    │ - Real menu prices from DB      │    │   ROUTING       │
│ • menu_items    │    │ - Current availability          │    │                 │
│ • reservations  │    │ - User preferences              │    │ useNavigate()   │
│ • user_data     │    │ - Restaurant capacity           │    │ • Smooth trans  │
│ • chat_logs     │    │                                 │    │ • Toast notify  │
└─────────────────┘    └─────────────────────────────────┘    └─────────────────┘

🚀 Actual Technology Stack Used

🎨 Frontend Technologies

Technology	Purpose	Implementation Details
	UI Framework	Component-based architecture with hooks
	Type Safety	Static typing for robust development
	CSS Framework	Utility-first CSS for rapid UI development
	Build Tool	Fast development server and optimized builds
	Client Routing	Single-page application routing

🔧 Backend & Database Services

Technology	Purpose	Implementation Details
	Backend-as-a-Service	Authentication, database, and edge functions
	Database	Relational database via Supabase
	Serverless API	Deno-powered serverless functions

🤖 AI Integration

Technology	Purpose	Implementation Details
	AI Chatbot	Google's Gemini API for intelligent responses
	Real-time Comm	Browser-based real-time communication

🛠️ Development Tools

Technology	Purpose	Implementation Details
	Runtime	JavaScript runtime for development
	Package Manager	Dependency management
	Code Quality	Linting and code standards

📁 Real File Structure & Implementation

Core Application Files

src/
├── App.tsx                 # Main app component with routing setup
├── main.tsx               # Application entry point
├── index.css              # Global styles and design tokens
├── pages/                 # Route-based page components
│   ├── Index.tsx          # Homepage with hero section
│   ├── Menu.tsx           # Menu display with real-time data
│   ├── ReserveTable.tsx   # Multi-step reservation process
│   ├── About.tsx          # Restaurant information
│   └── admin/             # Admin panel pages
├── components/            # Reusable UI components
│   ├── AIChat.tsx         # AI chatbot interface
│   ├── Header.tsx         # Navigation component
│   ├── Footer.tsx         # Site footer
│   ├── ReservationForm.tsx# Form handling for bookings
│   └── ui/                # Shadcn/ui components
└── integrations/
    └── supabase/          # Supabase client and types

Backend Implementation

supabase/
├── functions/
│   └── ai-chat/
│       └── index.ts       # Gemini API integration
├── migrations/            # Database schema
└── config.toml           # Supabase configuration

🔍 How Each Key File Works

src/App.tsx - Application Router

Sets up React Router for client-side navigation
Provides global context (QueryClient, Theme, Toaster)
Manages authentication state
Why this way: Centralized routing enables AI chatbot navigation

src/components/AIChat.tsx - AI Interface

Real-time chat interface with Gemini AI
Manages conversation state and history
Handles navigation triggers from AI responses
Why this way: Direct integration with Supabase Edge Functions

supabase/functions/ai-chat/index.ts - AI Backend

// Core AI processing logic
1. Receives user message from frontend
2. Queries Supabase database for menu context
3. Builds context string with current data
4. Calls Gemini API with enhanced prompt
5. Detects navigation intent from response
6. Returns structured JSON to frontend

Why this way: Serverless architecture scales automatically, secure API key handling

src/pages/ReserveTable.tsx - Reservation System

Multi-step booking process (482 lines - needs refactoring)
Real-time table availability checking
PDF generation for confirmations
Why this way: Step-by-step UX improves conversion rates

src/integrations/supabase/client.ts - Database Connection

Configured Supabase client with authentication
Type-safe database operations
Real-time subscriptions capability
Why this way: Single source of truth for all data operations

🎯 Real AI Integration Flow

1. User Interaction

// AIChat component sends message
const response = await supabase.functions.invoke('ai-chat', {
  body: { message: userInput, context: userContext }
});

2. Edge Function Processing

// supabase/functions/ai-chat/index.ts
const { data: menuItems } = await supabase
  .from('menu_items')
  .select('*')
  .order('rating', { ascending: false });

const context = menuItems?.map(item => 
  `${item.name} - ₹${item.price} - ${item.category}`
).join('\n');

3. AI Response & Navigation

// Navigation detection and routing
if (response.shouldNavigate === 'menu') {
  navigate('/menu');
  toast.success('Navigated to menu');
}

🏢 Database Schema (PostgreSQL via Supabase)

Tables Used

-- Reservations table
CREATE TABLE reservations (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  full_name TEXT NOT NULL,
  email TEXT NOT NULL,
  phone TEXT NOT NULL,
  num_people INTEGER NOT NULL,
  arrival_date DATE NOT NULL,
  arrival_time TIME NOT NULL,
  table_number TEXT,
  status TEXT DEFAULT 'confirmed',
  total_amount DECIMAL(10,2),
  created_at TIMESTAMP DEFAULT NOW()
);

-- Menu items table
CREATE TABLE menu_items (
  id SERIAL PRIMARY KEY,
  name TEXT NOT NULL,
  category TEXT NOT NULL,
  price DECIMAL(8,2) NOT NULL,
  offer_price DECIMAL(8,2),
  rating DECIMAL(3,2) DEFAULT 0,
  is_veg BOOLEAN DEFAULT true,
  created_at TIMESTAMP DEFAULT NOW()
);

🚀 Why This Architecture?

Frontend Choices

React + TypeScript: Type safety prevents runtime errors
Tailwind CSS: Rapid UI development with consistent design
Vite: Fast development server, instant hot reload
React Router: Client-side routing enables AI navigation

Backend Choices

Supabase: Eliminates backend complexity, built-in auth
Edge Functions: Serverless, auto-scaling, global distribution
PostgreSQL: ACID compliance for reservation data integrity

AI Integration Choices

Gemini API: Advanced reasoning, context understanding
Edge Function Processing: Secure API key management
Real-time Context: Fresh menu data for accurate responses

🔧 Development Workflow

Local Development

# Start development server
npm run dev

# Build for production  
npm run build

# Deploy edge functions
supabase functions deploy ai-chat

Key Features Implementation

Real-time Menu Updates: Supabase real-time subscriptions
AI Context Building: Live database queries in edge functions
Smooth Navigation: React Router with AI-triggered routing
Type Safety: Full TypeScript coverage prevents errors

🎯 Future Scope & Enhancements

💳 Payment Gateway Integration

Stripe Integration: Secure online payment processing
Razorpay Support: India-specific payment solutions
Digital Wallet Support: UPI, PayTM, Google Pay integration
Automated Billing: PDF invoice generation with payment receipts

🌟 Advanced AI Features

Voice Assistant: Speech-to-text with AI responses
Image Recognition: Photo-based menu recommendations
Multilingual Support: AI responses in multiple languages
Predictive Analytics: AI-powered demand forecasting

📱 Mobile & Performance

PWA Implementation: Mobile app-like experience
Offline Capabilities: Service worker for offline functionality
Performance Optimization: Code splitting, lazy loading
Real-time Notifications: Push notifications for bookings

👨‍💻 Developer Information

Name: MAMIDALA BHAVYA REDDY
Role: Full Stack Developer
Specialization: React.js, TypeScript, Supabase, AI Integration

Name: DHADI SAI PRANEETH REDDY
Role: Full Stack Developer
Specialization: React.js, TypeScript, Supabase, AI Integration

Technical Achievements:

Built responsive restaurant management system using React and TypeScript
Integrated Google Gemini AI for intelligent customer support
Implemented real-time database synchronization with Supabase
Created seamless AI-powered navigation system
Developed comprehensive reservation management with PDF generation
Optimized for mobile-first responsive design

Key Implementation Decisions:

Supabase over traditional backend: Faster development, built-in features
Edge Functions for AI: Secure, scalable serverless architecture
TypeScript throughout: Type safety prevents production bugs
Component-based architecture: Maintainable, reusable code structure
Real-time data flow: Enhanced user experience with live updates

Version: 1.0.0
Last Updated: January 2024
Tech Stack: React, TypeScript, Supabase, Gemini AI
Developer: MAMIDALA BHAVYA REDDY & DHADI SAI PRANEETH REDDY

Name		Name	Last commit message	Last commit date
Latest commit History 8 Commits
public		public
src		src
supabase		supabase
.gitignore		.gitignore
README.md		README.md
bun.lockb		bun.lockb
components.json		components.json
eslint.config.js		eslint.config.js
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.ts		tailwind.config.ts
tsconfig.app.json		tsconfig.app.json
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vite.config.ts		vite.config.ts

pritjasani08/DINE-24

Folders and files

Latest commit

History

Repository files navigation