Architecture Overview

​

System Architecture

​

Component Breakdown

​

1. Web Store (Frontend)

​

2. iOS App (Seller Dashboard)

​

3. Backend (Supabase)

​

Data Flow

​

Product Creation Flow

​

Order Placement Flow

​

Multi-Tenancy Strategy

​

Subdomain Routing

shopname.mypopup.shop → Seller's Store
another.mypopup.shop  → Different Store

export function middleware(req: NextRequest) {
  const hostname = req.headers.get('host') || ''
  const subdomain = hostname.split('.')[0]

  // Fetch store data based on subdomain
  const store = await getStoreBySubdomain(subdomain)

  // Pass to page as context
  return NextResponse.rewrite(new URL(`/${store.id}`, req.url))
}

stores
  - id (uuid)
  - subdomain (unique)
  - owner_id (user_id)
  - brand_color
  - logo_url

products
  - id (uuid)
  - store_id (foreign key)
  - title, price, etc.

orders
  - id (uuid)
  - store_id (foreign key)
  - buyer_email
  - status

-- Sellers can only see their own store's data
CREATE POLICY "Sellers view own products"
  ON products FOR SELECT
  USING (store_id IN (
    SELECT id FROM stores WHERE owner_id = auth.uid()
  ));

​

Deployment Architecture

​

Security Considerations

​

Performance Optimizations

1. Web Store
   • Static generation for public pages
   • Image optimization (Next.js Image)
   • React Query caching
   • Edge caching (Cloudflare)
2. iOS App
   • Image lazy loading
   • Pagination for large lists
   • Local caching (UserDefaults)
   • Background fetch for orders
3. Database
   • Indexed columns (store_id, created_at)
   • Materialized views for analytics
   • Connection pooling
   • Read replicas (future)