A full-stack mobile food ordering platform built with React Native, Expo, Supabase, PostgreSQL, and Razorpay.
Makeeasy is a full-stack mobile food ordering application designed to simplify the process of discovering food, placing orders, processing payments, and managing restaurant operations.
The platform provides a complete ordering workflow for customers while also offering role-based administrative functionality for managing products and orders.
The application was designed with a focus on:
- Scalable architecture
- Reusable components
- Secure authentication
- Role-based authorization
- Real-time order tracking
- Secure payment processing
- Efficient image delivery
- Maintainable code structure
- Full-stack mobile food ordering platform
- Built using React Native and Expo
- Supports 1000+ food products
- Designed to handle 500+ daily orders
- Real-time order tracking
- Secure authentication using Supabase Auth
- Role-based admin access
- PostgreSQL database
- Razorpay payment integration
- CDN-based image delivery
- Modular and reusable component architecture
- React Native
- Expo
- Expo Router
- JavaScript
- Context API
- Reusable UI Components
- Supabase
- PostgreSQL
- Supabase Auth
- Supabase Realtime
- Supabase Storage
- Razorpay
- Git
- GitHub
- Expo CLI
- REST APIs
- CDN-based media delivery
Users can:
- Create an account
- Log in securely
- Maintain an authenticated session
- Access personalized order data
Authentication is handled using Supabase Auth.
Users can:
- Browse available food items
- View food categories
- View product details
- Check prices and availability
- View product images
Users can:
- Add products to the cart
- Increase or decrease quantity
- Remove items
- View the total amount
- Proceed to checkout
The ordering flow includes:
- Product selection
- Cart confirmation
- Order creation
- Payment initiation
- Payment verification
- Order confirmation
- Real-time status tracking
Razorpay is integrated for secure payment processing.
The payment workflow includes:
User
|
v
Create Order
|
v
Initiate Razorpay Payment
|
v
Complete Payment
|
v
Verify Payment
|
v
Confirm Order
Real-Time Order Tracking
Users can track the current state of their orders.
Example order states:
Plaintext
PLACED
|
v
CONFIRMED
|
v
PREPARING
|
v
READY
|
v
OUT_FOR_DELIVERY
|
v
DELIVERED
Supabase Realtime allows the application to receive order status changes without requiring the user to manually refresh the application.
Administrators can:
Add new products
Update existing products
Delete products
Manage product availability
View incoming orders
Update order status
Manage menu data
The admin area is protected using role-based access control.
Makeeasy follows a client-server architecture.
┌─────────────────────┐
│ Customer │
│ React Native App │
└──────────┬──────────┘
│
v
┌─────────────────────┐
│ Expo Router │
│ Application Layer │
└──────────┬──────────┘
│
┌────────────────┼────────────────┐
│ │ │
v v v
┌────────────┐ ┌──────────────┐ ┌──────────────┐
│ Supabase │ │ PostgreSQL │ │ Razorpay │
│ Auth │ │ Database │ │ Payments │
└────────────┘ └──────────────┘ └──────────────┘
│
v
┌─────────────────────┐
│ Supabase Realtime │
│ Order Status Events │
└─────────────────────┘
The system consists of the following major layers:
┌─────────────────────────────────────────────────┐
│ Presentation Layer │
│ │
│ React Native + Expo │
│ │
└───────────────────────┬─────────────────────────┘
│
v
┌─────────────────────────────────────────────────┐
│ Application Layer │
│ │
│ Routing | State | Business Logic │
│ │
└───────────────────────┬─────────────────────────┘
│
v
┌─────────────────────────────────────────────────┐
│ Service Layer │
│ │
│ Authentication | Payments | Orders │
│ │
└───────────────────────┬─────────────────────────┘
│
v
┌─────────────────────────────────────────────────┐
│ Backend Layer │
│ │
│ Supabase + PostgreSQL │
│ │
└───────────────────────┬─────────────────────────┘
│
v
┌─────────────────────────────────────────────────┐
│ Infrastructure Layer │
│ │
│ Storage | CDN | Realtime | Payments │
│ │
└─────────────────────────────────────────────────┘
Customer Application Flow
┌───────────────┐
│ Start │
└───────┬───────┘
│
v
┌───────────────┐
│ Authentication│
└───────┬───────┘
│
v
┌───────────────┐
│ Browse Menu │
└───────┬───────┘
│
v
┌───────────────┐
│ Select Product│
└───────┬───────┘
│
v
┌───────────────┐
│ Add to Cart │
└───────┬───────┘
│
v
┌───────────────┐
│ Checkout │
└───────┬───────┘
│
v
┌───────────────┐
│ Razorpay │
│ Payment │
└───────┬───────┘
│
v
┌───────────────┐
│ Create Order │
└───────┬───────┘
│
v
┌───────────────┐
│ Track Order │
└───────────────┘
User
|
| 1. Select Products
v
Cart
|
| 2. Checkout
v
Payment Initiation
|
| 3. Razorpay Payment
v
Payment Verification
|
| 4. Successful Payment
v
Order Created
|
| 5. Admin Receives Order
v
Order Processing
|
| 6. Status Updated
v
Supabase Realtime
|
| 7. Live Update
v
Customer Application
The payment process follows this workflow:
┌──────────┐
│ User │
└────┬─────┘
│
│ Selects Checkout
v
┌─────────────────┐
│ Create Order │
│ Request │
└────────┬────────┘
│
v
┌─────────────────┐
│ Razorpay │
│ Payment Gateway │
└────────┬────────┘
│
v
┌─────────────────┐
│ Payment Success │
└────────┬────────┘
│
v
┌─────────────────┐
│ Verify Payment │
└────────┬────────┘
│
v
┌─────────────────┐
│ Create Database │
│ Order │
└────────┬────────┘
│
v
┌─────────────────┐
│ Order Confirmed │
└─────────────────┘
The application uses PostgreSQL as its primary relational database.
####Main Entities
Users
|
| 1
|
| N
Orders
|
| 1
|
| N
Order Items
|
| N
|
| 1
Products
|
| N
|
| 1
Categories
Stores user information.
users
├── id
├── name
├── email
├── phone
├── role
└── created_at
CUSTOMER
ADMIN
Stores all available food products.
products
├── id
├── name
├── description
├── price
├── image_url
├── category_id
├── is_available
└── created_at
Stores product categories.
categories
├── id
├── name
├── description
└── created_at
Stores items added to the cart.
cart
├── id
├── user_id
├── product_id
├── quantity
└── created_at
Stores customer orders.
orders
├── id
├── user_id
├── total_amount
├── order_status
├── payment_status
├── delivery_address
└── created_at
Stores the individual products inside an order.
order_items
├── id
├── order_id
├── product_id
├── quantity
├── price
└── created_at
Stores payment information.
payments
├── id
├── order_id
├── payment_id
├── amount
├── payment_status
└── created_at
Supabase Auth is used to manage user authentication. The general authentication flow:
User
|
v
Sign Up / Login
|
v
Supabase Auth
|
v
Session Created
|
v
User Identity Verified
|
v
Application Access Granted
┌─────────────┐
│ Authenticated│
│ User │
└──────┬──────┘
│
v
┌──────────────┐
│ Check Role │
└──────┬───────┘
│
┌─────────────┴─────────────┐
│ │
v v
┌───────────┐ ┌───────────┐
│ Customer │ │ Admin │
│ Features │ │ Features │
└───────────┘ └───────────┘
Supabase Realtime is used to listen for changes in order status. Example:
Admin Updates Order
|
v
Database Updated
|
v
Realtime Event Triggered
|
v
Customer App Receives Update
|
v
UI Updates Automatically
This eliminates the need for continuous polling and improves the user experience.
Food images are stored using cloud storage and delivered through CDN infrastructure.
Admin Uploads Image
|
v
Supabase Storage
|
v
CDN Distribution
|
v
Mobile Application
This improves image loading performance and reduces unnecessary server load.
The application separates business logic into service modules. Example:
UI Component
|
v
Service Layer
|
v
Supabase / External API
Example service responsibilities:
authService
|
├── login()
├── signup()
└── logout()
productService
|
├── getProducts()
├── createProduct()
├── updateProduct()
└── deleteProduct()
orderService
|
├── createOrder()
├── getOrders()
├── updateOrderStatus()
└── subscribeToOrderUpdates()
paymentService
|
├── initiatePayment()
└── verifyPayment()
This approach prevents business logic from being tightly coupled with UI components.
The application follows several security principles:
Authentication handled by Supabase Auth
Role-based access control
Database-level access control
Secure payment processing through Razorpay
Sensitive credentials stored using environment variables
Restricted administrative operations
Controlled access to user-specific order data
Example environment configuration:
Code snippet
SUPABASE_URL=your_supabase_url
SUPABASE_ANON_KEY=your_supabase_anon_key
RAZORPAY_KEY_ID=your_razorpay_key
Sensitive credentials should never be committed to GitHub.
The application focuses on performance through:
Image Optimization: Images are delivered using CDN infrastructure to improve loading speed.
Component Reusability: Reusable components reduce unnecessary code duplication.
Efficient Database Queries: Database queries are designed to fetch only required data.
Realtime Updates: Realtime events avoid continuous polling.
Modular Architecture: Separating UI, services, and business logic makes the application easier to maintain and optimize.
The architecture can be extended to support a larger food delivery ecosystem. Future architecture:
┌───────────────────┐
│ Customers │
└─────────┬─────────┘
│
v
┌───────────────────┐
│ API / Backend │
└─────────┬─────────┘
│
┌─────────────────────┼─────────────────────┐
│ │ │
v v v
┌──────────────┐ ┌──────────────┐ ┌──────────────┐
│ Restaurant │ │ Delivery │ │ Payment │
│ Management │ │ Service │ │ Service │
└──────────────┘ └──────────────┘ └──────────────┘
│ │ │
└─────────────────────┼─────────────────────┘
│
v
┌───────────────────┐
│ PostgreSQL │
└───────────────────┘
Multi-restaurant support
Delivery partner application
Push notifications
Location-based delivery tracking
Coupon system
Recommendation engine
Restaurant analytics
Advanced search
Product reviews and ratings
Microservice-based architecture for large-scale deployment
- Managing Multiple User Roles The application required different access levels for customers and administrators.
Solution: Implemented role-based authorization to restrict access to administrative functionality.
- Real-Time Order Updates Users need to know when their order status changes.
Solution: Used Supabase Realtime to propagate order status changes to the client application.
- Secure Payments Payment processing requires secure transaction handling.
Solution: Integrated Razorpay for payment processing and payment status management.
- Efficient Image Delivery Food applications require a large number of images.
Solution: Used cloud storage and CDN-based delivery to improve image performance.
- Maintainable Codebase As the application grows, tightly coupled code becomes difficult to maintain.
Solution: Used reusable components and separated services, state management, routing, and business logic.
End-to-End Order Lifecycle
┌────────────────────┐
│ User Browses Food │
└──────────┬─────────┘
│
v
┌────────────────────┐
│ Adds Items to Cart │
└──────────┬─────────┘
│
v
┌────────────────────┐
│ Checkout │
└──────────┬─────────┘
│
v
┌────────────────────┐
│ Razorpay Payment │
└──────────┬─────────┘
│
v
┌────────────────────┐
│ Payment Verified │
└──────────┬─────────┘
│
v
┌────────────────────┐
│ Order Created │
└──────────┬─────────┘
│
v
┌────────────────────┐
│ Admin Processes │
│ Order │
└──────────┬─────────┘
│
v
┌────────────────────┐
│ Status Updated │
└──────────┬─────────┘
│
v
┌────────────────────┐
│ Realtime Update │
└──────────┬─────────┘
│
v
┌────────────────────┐
│ Customer Receives │
│ Live Status │
└────────────────────┘
Add screenshots of the application below:
Home Screen
Product Details
Cart
Payment
Order Tracking
Admin Dashboard
Clone the Repository
git clone [https://github.com/Anshumanojmahto/Makeeasyapp.git](https://github.com/Anshumanojmahto/Makeeasyapp.git)
Navigate to the Project
cd Makeeasyapp
Install Dependencies
npm install
Configure Environment Variables
Create a .env file:
Code snippet
EXPO_PUBLIC_SUPABASE_URL=your_supabase_url
EXPO_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
EXPO_PUBLIC_RAZORPAY_KEY_ID=your_razorpay_key
Start the Development Server
npx expo start
You can then run the application on:
Android Emulator
iOS Simulator
Physical Device using Expo Go
The project was designed to support:
1000+ products
500+ daily orders
100+ active users
1000+ payment transactions
30% faster image loading through CDN optimization
This project demonstrates practical experience in:
Full-stack application development
Mobile application development
Database design
Authentication
Authorization
Payment gateway integration
Realtime systems
Cloud storage
CDN-based optimization
State management
Modular architecture
Product development
System design
Improve product search
Add advanced filtering
Add push notifications
Add multiple restaurants
Add delivery partner application
Add location-based delivery tracking
Add analytics dashboard
Add recommendation system
Add customer reviews
Add loyalty program
Scale backend infrastructure
Add caching
Introduce background job processing
Improve observability and monitoring
Anshu Manoj Mahto Computer Science and Engineering Student at NIT Patna.
GitHub: https://github.com/Anshumanojmahto
This project is developed for educational, portfolio, and startup demonstration purposes.