Skip to main content

Architecture Overview

This document describes the high-level architecture of Artbase Studio, including system components, data flow, and key design decisions.

System Components​

┌─────────────────────────────────────────────────────────────────┐
│                         Clients                                  │
├─────────────────┬─────────────────┬─────────────────────────────┤
│   Web App       │   Creator Hub   │   Gallery                   │
│   (Next.js)     │   (React)       │   (Next.js)                 │
└────────┬────────┴────────┬────────┴────────┬────────────────────┘
         │                 │                 │
         └────────────────┬┴─────────────────┘
                          │
┌─────────────────────────▼───────────────────────────────────────┐
│                    API Layer (Next.js)                          │
│  ┌──────────────┐ ┌──────────────┐ ┌──────────────┐            │
│  │ REST APIs    │ │ Webhooks     │ │ Auth         │            │
│  └──────────────┘ └──────────────┘ └──────────────┘            │
└─────────────────────────┬───────────────────────────────────────┘
                          │
┌─────────────────────────▼───────────────────────────────────────┐
│                    Services Layer                                │
│  ┌──────────────┐ ┌──────────────┐ ┌──────────────┐            │
│  │ Supabase     │ │ Stripe       │ │ Resend       │            │
│  │ (DB + Auth)  │ │ (Payments)   │ │ (Email)      │            │
│  └──────────────┘ └──────────────┘ └──────────────┘            │
└─────────────────────────────────────────────────────────────────┘

Technology Stack​

Frontend​

ComponentTechnology
FrameworkNext.js 15 (App Router)
UIReact 19, Tailwind CSS
StateZustand, React Query
FormsReact Hook Form, Zod
IconsLucide React

Backend​

ComponentTechnology
RuntimeNode.js 20+
FrameworkNext.js API Routes
DatabasePostgreSQL (Supabase)
AuthSupabase Auth
ORMSupabase Client

Infrastructure​

ComponentTechnology
HostingVercel
DatabaseSupabase (PostgreSQL)
File StorageSupabase Storage
CDNVercel Edge Network

External Services​

ServicePurpose
StripePayments, Connect, Subscriptions
ResendTransactional email
Etsy APIChannel integration
Gumroad APIChannel integration

Data Flow​

Order Flow​

Customer → Gallery → Cart → Checkout → Stripe
                                         │
                                         ▼
                              Payment Intent Created
                                         │
                                         ▼
Webhook ← Stripe ← Payment Confirmed ───┘
    │
    ▼
Order Created → Artist Notified → Fulfillment
                                      │
                                      ▼
                              Shipping Update → Customer Notified

Authentication Flow​

User → Login Page → Supabase Auth
                         │
                         ▼
                   JWT Issued
                         │
                         ▼
              Session Cookie Set
                         │
                         ▼
           API Requests with Token
                         │
                         ▼
              RLS Policies Applied

Multi-Tenancy​

Artbase uses organization-based multi-tenancy:

Data Isolation​

  • Each artist has an organization
  • All data includes org_id foreign key
  • Row Level Security (RLS) enforces isolation

Access Control​

RolePermissions
OwnerFull access, billing, delete
AdminFull access except billing
EditorProducts, orders, no settings

Database Schema​

Core Tables​

-- Organizations (tenants)
organizations (id, name, slug, ...)

-- Users
profiles (id, user_id, display_name, ...)

-- Membership (user ↔ org)
memberships (id, user_id, org_id, role)

-- Products
products (id, org_id, title, status, ...)
product_variants (id, product_id, price, ...)

-- Orders
orders (id, org_id, status, total, ...)
order_items (id, order_id, variant_id, ...)

RLS Example​

CREATE POLICY "Users can view own org products"
ON products FOR SELECT
USING (
  org_id IN (
    SELECT organization_id FROM memberships
    WHERE user_id = auth.uid()
  )
);

API Design​

REST Conventions​

  • GET /api/products - List products
  • POST /api/products - Create product
  • GET /api/products/[id] - Get product
  • PUT /api/products/[id] - Update product
  • DELETE /api/products/[id] - Delete product

Response Format​

{
  "data": { ... },
  "error": null
}

Error Format​

{
  "error": "Description of error",
  "code": "ERROR_CODE"
}

Security​

Authentication​

  • Supabase Auth with JWT
  • Session cookies (httpOnly, secure)
  • PKCE flow for OAuth

Authorization​

  • RLS at database level
  • API middleware validation
  • Role-based access control

Data Protection​

  • All traffic over HTTPS
  • Passwords hashed (bcrypt)
  • Sensitive data encrypted
  • PCI compliance via Stripe

Scaling Considerations​

Current Architecture​

  • Serverless API (Vercel)
  • Managed database (Supabase)
  • CDN for static assets
  • Edge caching

Future Scaling​

  • Database read replicas
  • Background job queues
  • Caching layer (Redis)
  • Geographic distribution