FoodHub - Food Delivery Platform

A comprehensive Next.js food delivery platform with three user roles: Customer, Admin, and Delivery Person. Built with Next.js 14, TypeScript, Tailwind CSS, and Supabase.

Features

Customer Features

• Browse menu with categories and filtering
• Add items to cart with quantity selection
• Place orders with special instructions
• Track order status (Preparing, Out for Delivery, Delivered)
• View order history
• Responsive design for mobile and desktop

Admin Features

• Manage menu items (add, edit, delete, toggle availability)
• Upload dish photos
• Track orders in real-time
• Update order status from Preparing to Out for Delivery
• View detailed order information
• Manage restaurant settings

Delivery Person Features

• View orders assigned for delivery
• Track order status (Out for Delivery, Delivered)
• Mark orders as delivered
• View customer information and order details
• Real-time order updates

Tech Stack

• Frontend: Next.js 14, TypeScript, Tailwind CSS
• Backend: Supabase (PostgreSQL, Auth, Real-time)
• UI Components: Heroicons, Headless UI
• State Management: React Context API
• Notifications: React Hot Toast

Setup Instructions

1. Clone and Install Dependencies

cd /Users/noct.kun/Documents/igibfun/fooddelivery/website
npm install

2. Set up Environment Variables

1. Run the setup script to create the environment file:

npm run setup

2. Create a new project at supabase.com
3. Go to Settings > API to get your project URL and anon key
4. Update the .env.local file with your actual Supabase credentials:

NEXT_PUBLIC_SUPABASE_URL=your_actual_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_actual_anon_key
SUPABASE_SERVICE_ROLE_KEY=your_actual_service_role_key

3. Set up Database

1. Go to your Supabase project dashboard
2. Navigate to SQL Editor
3. Copy and paste the contents of database-schema.sql
4. Run the SQL script to create all tables, functions, and policies

4. Run the Development Server

npm run dev

Open http://localhost:3000 in your browser.

Database Schema

The application uses the following main tables:

• profiles: User profiles with roles (customer, admin, delivery)
• restaurants: Restaurant information and settings
• categories: Menu categories
• menu_items: Individual menu items with pricing and availability
• orders: Order information with token numbers
• order_items: Individual items within orders
• delivery_times: Configurable delivery time slots

User Roles

Customer

• Can browse menu and place orders
• Access: /menu, /orders

Admin

• Can manage menu and track orders
• Access: /admin, /admin/menu, /admin/orders

Delivery Person

• Can view and update delivery orders
• Access: /delivery

Key Features

Order Management

• Daily token number generation (resets at midnight)
• Real-time order status updates
• Automatic order cleanup after delivery

Menu Management

• Category-based organization
• Image upload support
• Availability toggling
• Price management

Authentication

• Role-based access control
• Secure authentication with Supabase Auth
• Protected routes with middleware
• Automatic sign-in after registration (email confirmation disabled)

Customization

Restaurant Branding

• Update restaurant name and logo in the database
• Modify colors in Tailwind CSS classes
• Customize the homepage content

Menu Items

• Add/remove categories
• Upload dish photos
• Set pricing and availability

Delivery Settings

• Configure delivery time slots
• Set delivery time estimates
• Manage restaurant hours

Deployment

Vercel (Recommended)

1. Push your code to GitHub
2. Connect your repository to Vercel
3. Add environment variables in Vercel dashboard
4. Deploy

Other Platforms

• Ensure environment variables are set
• Build command: npm run build
• Start command: npm start

Troubleshooting

Common Issues

1. Authentication not working: Check Supabase URL and keys
2. Database errors: Ensure all tables are created from the SQL schema
3. Image upload issues: Verify image URLs are accessible
4. Order status not updating: Check RLS policies in Supabase

Development Tips

• Use Supabase dashboard to monitor database changes
• Check browser console for client-side errors
• Use Supabase logs for server-side debugging
• Test with different user roles

Support

For issues or questions:

1. Check the Supabase documentation
2. Review the Next.js documentation
3. Check the browser console for errors
4. Verify environment variables are correct

License

This project is created for commercial use by restaurants. Customize as needed for your business requirements.