Remix

Make your own version of Munaj Food Ordering

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

Original by Business Mail

Describe your app

# MUNAJ — SIMPLE CUSTOMER FOOD-ORDERING WEBSITE

Build a simple, clean, professional customer-facing food-ordering website for **MUNAJ**.

IMPORTANT:

This is the CUSTOMER WEBSITE.

The MUNAJ Admin Panel is a separate application.

Both applications must use the SAME Supabase project.

CUSTOMER WEBSITE
↓
SUPABASE
↑
ADMIN PANEL

The website should be simple and easy to use.

Do NOT over-design it.

Do NOT add unnecessary animations, complicated dashboards, excessive sections, or complicated features.

Focus on:

* Food discovery
* Restaurant browsing
* Cart
* Checkout
* Orders
* Customer account

---

# 1. DESIGN

Use a clean modern food-delivery design.

Keep the interface:

* Simple
* Fast
* Mobile-friendly
* Professional
* Easy to understand

Use:

* Clean cards
* Simple buttons
* Good spacing
* Clear typography
* High-quality food images
* Subtle animations only

Avoid:

* Excessive glassmorphism
* Excessive neon effects
* Complicated animations
* Crowded pages
* Too many menus
* Unnecessary popups

---

# 2. HEADER

Desktop header:

MUNAJ logo

Home | Restaurants | Offers | Orders

Cart

Account

Mobile:

MUNAJ logo

Cart icon

Account icon

Simple mobile menu.

---

# 3. HOME PAGE

Keep the homepage simple.

Hero:

**Good Food, Delivered to You.**

Short text:

"Order delicious meals from your favourite restaurants and get them delivered to your door."

Search bar:

**What are you craving?**

Button:

**Search**

Then show:

### Food Categories

* Nigerian
* Rice
* Swallow
* Chicken
* Fast Food
* Drinks
* Snacks

Then:

### Popular Restaurants

Simple restaurant cards containing:

* Image
* Restaurant name
* Rating
* Delivery time
* Delivery fee

Then:

### Popular Meals

Simple food cards containing:

* Image
* Name
* Price
* Add button

Then a simple footer.

---

# 4. RESTAURANTS PAGE

Show a simple list/grid of restaurants.

Each card:

* Restaurant image
* Name
* Rating
* Delivery time
* Delivery fee

Clicking a restaurant opens its menu.

---

# 5. RESTAURANT PAGE

Show:

* Restaurant image
* Restaurant name
* Rating
* Delivery information
* Short description

Then display the menu.

Food card:

* Food image
* Food name
* Short description
* Price
* * Add button

Keep it simple.

---

# 6. FOOD ITEM

When the customer selects a meal, show a simple modal.

Include:

* Food image
* Name
* Description
* Price
* Quantity
* Optional extras
* Special instructions

Button:

**Add to Cart**

---

# 7. CART

Create a simple cart page.

Show:

Food item

Quantity

Price

Remove

Order summary:

Subtotal

Delivery Fee

Total

Button:

**Checkout**

The cart must actually work.

---

# 8. CHECKOUT

Keep checkout simple.

Customer information:

* Full name
* Phone
* Delivery address
* City
* State

Payment:

* Paystack when configured

Order summary.

Button:

**Place Order**

Do not make checkout unnecessarily complicated.

---

# 9. ORDER CONFIRMATION

After ordering:

**Order Confirmed**

Show:

* Order number
* Items
* Total
* Delivery address
* Order status

Button:

**Track Order**

---

# 10. ORDERS

Create a simple Orders page.

Display:

* Order number
* Date
* Restaurant
* Total
* Status

Statuses:

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

Clicking an order opens its details.

---

# 11. CUSTOMER ACCOUNT

Keep the account page simple.

Sections:

* Profile
* Orders
* Addresses
* Favourites
* Notifications
* Settings
* Logout

Profile:

* Name
* Email
* Phone
* Profile picture

Allow customers to edit their information.

---

# 12. LOGIN / SIGNUP

Use Supabase Authentication.

* Email
* Password

Signup:

* Name
* Email
* Phone
* Password

Forgot password.

Keep the authentication screens simple and clean.

---

# 13. SUPABASE

Connect the website to the EXISTING MUNAJ Supabase project.

Do NOT create another Supabase project.

Do NOT create duplicate tables.

Before creating anything, inspect the existing database structure.

Use existing tables and columns whenever possible.

The website should use Supabase for:

* Customer accounts
* Restaurants
* Food/menu items
* Categories
* Orders
* Order items
* Addresses
* Favourites
* Notifications
* Website settings
* Branding settings
* Offers where available

Do NOT use localStorage as the main database.

---

# 14. ADMIN PANEL CONNECTION

The Admin Panel and customer website must be connected through Supabase.

When the administrator changes supported content in the Admin Panel, the customer website should use the updated information.

For example:

Admin changes:

Restaurant name

Food name

Food price

Food image

Offer

Website name

Logo

Brand colors

The customer website should display the updated information.

---

# 15. BRANDING

The website should read branding settings from Supabase where those settings already exist.

Support:

* App name
* Logo
* Primary color
* Secondary color
* Accent color

Default:

MUNAJ

Do not hard-code branding when an Admin Panel setting exists.

---

# 16. IMPORTANT DATABASE RULE

Do not blindly assume table names.

First inspect the existing Supabase schema.

If the Admin Panel already has:

site_settings

profiles

orders

notifications

or other existing tables,

use those existing tables instead of creating duplicates.

Make the customer website compatible with the current database.

---

# 17. SECURITY

Use Supabase RLS correctly.

Customers must only access their own private information.

Customers must NOT be able to:

* Access another customer's orders
* Modify another customer's profile
* Access admin settings
* Modify restaurant information
* Modify food prices
* Access private admin data

Never expose:

* Supabase service-role key
* Paystack secret key
* Other private credentials

in frontend code.

---

# 18. ORDER STATUS

Use Supabase data for order status.

When an order changes from:

Pending

Preparing

Out for Delivery

Delivered

the customer should see the updated status.

Use Supabase Realtime only where useful.

Do not make the application unnecessarily complicated.

---

# 19. SEARCH

Simple search.

Customers can search for:

* Food
* Restaurants
* Categories

Show simple results.

---

# 20. OFFERS

Create a simple Offers section.

Show active offers managed by the Admin Panel where available.

Example:

**20% OFF**

"Get 20% off your first order."

Keep promotional design simple.

---

# 21. MOBILE

The website MUST work perfectly on mobile.

Mobile navigation:

Home

Orders

Cart

Account

Make buttons easy to tap.

Keep pages lightweight and fast.

---

# 22. ERROR MESSAGES

Never expose technical Supabase errors to customers.

Instead of:

"new row violates row-level security policy"

show:

"Something went wrong. Please try again."

Technical errors can be logged for development/admin purposes.

---

# 23. LOADING

Use simple loading indicators and skeletons.

Do not show technical messages.

Examples:

"Loading..."

"Finding restaurants..."

"Adding to cart..."

"Placing your order..."

---

# 24. EMPTY CART

Show:

**Your cart is empty**

"Add something delicious to get started."

Button:

**Browse Food**

---

# 25. FOOTER

Simple footer:

MUNAJ

"Good food, delivered."

Links:

About

Contact

Help

Privacy

Terms

---

# 26. REQUIRED PAGES

Create only the pages actually needed:

/restaurants

/restaurants/:id

/search

/offers

/cart

/checkout

/orders

/orders/:id

/login

/signup

/account

/account/addresses

/account/settings

/contact

/help

---

# 27. IMPORTANT — KEEP IT SIMPLE

Do NOT add unnecessary features.

Do NOT create:

* Complicated animations
* Huge dashboards
* Excessive popups
* Complicated maps unless required
* Unnecessary analytics
* Complex loyalty systems
* Unnecessary social features
* Fake functionality

Every feature that is included must actually work.

---

# 28. FINAL RESULT

The final MUNAJ website should feel like a simple, real food-ordering platform.

A customer should be able to:

1. Open MUNAJ
2. Find a restaurant
3. Select food
4. Add food to cart
5. Checkout
6. Place an order
7. Track the order
8. View previous orders

Keep the entire experience simple.

The Admin Panel controls the platform.

Supabase stores the data.

The customer website displays and uses that data.

Build the complete simple MUNAJ customer website now.

Free to use. No credit card required.