Remix

Make your own version of Taj Food Delivery

Edit the prompt below and generate a customized version in seconds.

Original by Suhail Raza

Describe your app

Create a complete, production-ready mobile-first food delivery web app called “Taj Food Delivery”.

Build the entire application from A to Z. Do not create a simple demo or static mockup. All important features must actually work.

1. APP NAME & DESIGN

- App name: Taj Food Delivery
- Clean, modern, simple Android-style mobile UI.
- Make the interface easy for customers to use.
- Use a professional food-delivery design.
- Make all buttons large and easy to tap.
- Responsive design for Android phones and Chrome.
- Do not change the app name.

2. CUSTOMER HOME SCREEN

Create a home screen showing:

- Taj Food Delivery header
- Food search box
- Food categories
- Food cards
- Food image
- Food name
- Price
- Add to Cart button

The food images MUST actually load from their image URLs.
Use the image URL directly in the food card.
Do not use broken local image paths.
If an image fails to load, show a clean food placeholder instead of a broken image.

3. FOOD MENU

Create exactly these six food items:

1. Burger — ₹80
2. Pizza — ₹200
3. Biryani — ₹150
4. Momos — ₹70
5. Cold Drink — ₹40
6. Aloo Samosa — ₹20

Do not rename these foods.
Do not change their prices.

Each food must have:

- Name
- Price
- Category
- Food image
- Food details
- Add to Cart button

4. FOOD DETAILS

When a customer taps a food:

- Show large food image
- Show food name
- Show price
- Show category
- Show quantity selector
- Show Add to Cart button

The image must use the actual image URL directly.

5. SEARCH

Add working food search.
When the customer searches:

- Burger should appear when searching Burger
- Pizza should appear when searching Pizza
- Biryani should appear when searching Biryani
- Momos should appear when searching Momos
- Cold Drink should appear when searching Cold Drink
- Aloo Samosa should appear when searching Aloo Samosa

6. CART

Create a fully working shopping cart.

Customer can:

- Add food
- Increase quantity
- Decrease quantity
- Remove food
- See item price
- See quantity
- See subtotal
- See total

Cart data must remain correct while navigating between screens.

7. CHECKOUT

Create a working checkout page.

Customer must enter:

- Customer name
- Mobile number
- Delivery address

Show:

- Ordered food items
- Quantities
- Prices
- Total amount

Add a clear Place Order button.

8. PLACE ORDER

When customer presses Place Order:

- Create a unique order ID.
- Save the order in the database/cloud database.
- Save customer name.
- Save mobile number.
- Save delivery address.
- Save ordered food items.
- Save quantities.
- Save total amount.
- Save order date/time.
- Save order status.

Initial status must be:
Pending

After successful order creation, show:
Order placed successfully
and show the customer's order ID.

9. MY ORDERS

Create a My Orders section.

A customer must only see their own orders.

Do NOT allow one customer to see another customer's orders.

Show:

- Order ID
- Food items
- Total
- Date/time
- Current status

Order status options:

- Pending
- Confirmed
- Preparing
- Out for Delivery
- Delivered
- Cancelled

10. ADMIN PANEL

Create a separate secure Admin Panel.

Only the admin should be able to access the admin panel.

Admin can:

- View all customer orders
- View order ID
- View customer name
- View customer mobile number
- View delivery address
- View ordered items
- View quantities
- View total
- View order date/time
- Change order status

Admin status controls must actually work.

When admin changes an order status, the customer should see the updated status in My Orders.

11. ADMIN FOOD MANAGEMENT

Admin must be able to:

- Add food
- Edit food
- Delete food
- Change food image URL
- Change food category
- Change food price

However, initially create the six required foods exactly as specified above.

12. CUSTOMER/ADMIN DATA SECURITY

Implement proper authentication and authorization.

Customers must not:

- Access admin panel
- See other customers' orders
- Edit other customers' orders
- Access admin-only data

Admin can see all orders.

Protect database access with proper security rules.

13. MOBILE NUMBER & OTP

Add mobile-number verification.

Customer enters mobile number.
Provide OTP verification flow.

Use a proper authentication/OTP provider if supported by the platform.

Do not display fake OTPs to customers in production.

If real SMS OTP cannot be configured automatically, create the authentication structure so it can be connected to a real OTP/SMS provider later.

14. CUSTOMER LOCATION

Add delivery-location support.

Allow the customer to provide/select their delivery location/address.

Request location permission only when necessary.

If browser/device location permission is denied, allow the customer to manually enter the delivery address.

Save the delivery address with the order.

15. ADMIN NEW-ORDER ALERT

When a new order is placed:

- Admin should receive a clear new-order notification/alert if browser/device notifications are supported.
- Play an alarm/notification sound when possible.
- Show a visible “New Order” indication in the Admin Panel.
- Do not repeatedly alert for the same order after it has already been acknowledged.

If background push notifications require additional configuration, create the notification system structure and clearly identify the required configuration.

16. ADMIN CALL BUTTON

Add a Call Customer button in the admin order details.

When admin taps Call Customer:

- Open the phone dialer using the customer's saved mobile number.
- Use the device's normal telephone interface.
- Do not expose customer phone numbers to other customers.

Also provide an Admin Contact/Call option where appropriate.

17. DATABASE

Use a real persistent cloud database.

Do NOT store important orders only in browser localStorage.

Database should contain suitable tables/collections for:

- Users
- Foods
- Orders
- Order Items
- Admin
- Authentication data where appropriate

Make sure orders created from another phone are saved to the same cloud database and can be seen by the authorized admin.

18. ORDER SYNCHRONIZATION

If a customer places an order from Phone A:

- Admin logged into Phone B must be able to see that order.

If admin changes the status:

- The customer should see the updated status.

Do not create separate databases for different phones.

19. IMAGE SYSTEM

IMPORTANT:
Food images are currently a major requirement.

Use direct valid HTTPS image URLs for food images.

The image component must:

- Load the URL directly.
- Show a loading state.
- Show the image when loaded.
- Show a fallback food icon/placeholder if loading fails.
- Never show a broken-image icon.
- Never hide the food name or price because the image fails.

Use the same image URL system consistently in:

- Home food cards
- Food details
- Cart
- Admin food management

Do not replace working image URLs with invalid local paths.

20. ERROR HANDLING

Add proper error handling for:

- Failed database requests
- Failed image requests
- Failed authentication
- Invalid mobile number
- Empty customer name
- Empty address
- Failed order creation
- Network problems

Show clear messages to the user.

Never leave the screen blank when an error occurs.

21. LOADING STATES

Add loading indicators while:

- Loading foods
- Loading orders
- Creating orders
- Updating order status
- Loading images
- Authenticating users

22. NAVIGATION

Create simple mobile navigation for:

- Home
- Search
- Cart
- My Orders
- Account/Login

Admin navigation should include:

- Dashboard
- Orders
- Foods
- Settings/Admin account

23. ADMIN DASHBOARD

Show:

- Total orders
- Pending orders
- Confirmed orders
- Preparing orders
- Out for Delivery orders
- Delivered orders
- Cancelled orders

Make the dashboard mobile friendly.

24. ORDER STATUS WORKFLOW

Admin must be able to update:

Pending → Confirmed → Preparing → Out for Delivery → Delivered

Admin should also be able to mark an order:
Cancelled

The customer must see the current status.

25. DATA VALIDATION

Validate:

- Customer name
- Mobile number
- Delivery address
- Food quantity
- Prices
- Order totals

Calculate totals from trusted database food prices instead of trusting values sent by the customer.

26. SECURITY

Never expose:

- Database secret keys
- Service-role keys
- Admin secrets
- Private credentials
- API secrets

in frontend/browser code.

Use secure server-side functions/API endpoints for privileged operations.

27. TESTING

After building, test the complete flow:

1. Open app.
2. View all six foods.
3. Confirm all six names are visible.
4. Confirm all six prices are correct.
5. Confirm all food images load.
6. Search for foods.
7. Open food details.
8. Add food to cart.
9. Increase/decrease quantity.
10. Checkout.
11. Enter customer information.
12. Place order.
13. Confirm order ID is generated.
14. Confirm order is saved to cloud database.
15. Open Admin Panel.
16. Confirm admin can see the new order.
17. Change order status.
18. Confirm customer sees updated status.
19. Confirm customer cannot see another customer's order.
20. Test on mobile Chrome.
21. Test image loading again.
22. Test error/fallback states.

28. IMPORTANT: DO NOT BREAK EXISTING FEATURES

Do not remove or simplify:

- Food names
- Prices
- Categories
- Cart
- Quantity controls
- Checkout
- Orders
- Admin panel
- Database
- Order status
- Images

Everything must remain functional.

29. FINAL REQUIREMENT

Build the complete Taj Food Delivery application, not a prototype.

Prioritize:

1. Working food images
2. Correct food names and prices
3. Working cart
4. Working checkout
5. Working cloud orders
6. Secure customer/admin separation
7. Working admin order management
8. Working order status updates
9. Mobile-friendly UI
10. Reliable error and image fallback handling

After implementation, run a full build/type check and fix all errors before showing the final preview.

Free to use. No credit card required.