From bf701f83423006035cd3c435f27a6f5f1c712165 Mon Sep 17 00:00:00 2001
From: Frank John Begornia <frank.begornia@yahoo.com>
Date: Sun, 16 Nov 2025 01:19:35 +0800
Subject: [PATCH] Replace Firebase Storage with MinIO and add user account
 features

- Storage Integration:
  * Remove Firebase Storage dependency and useFirebaseStorage composable
  * Implement direct MinIO uploads via POST /storage/upload with multipart/form-data
  * Upload canvas JSON, preview PNG, and production PNG as separate objects
  * Store public URLs and metadata in design records

- Authentication & Registration:
  * Add email/password registration page with validation
  * Integrate backend user session via /auth/login endpoint
  * Store backendUser.id as ownerId in design records
  * Auto-sync backend session on Firebase auth state changes

- User Account Pages:
  * Create profile page showing user details and backend session info
  * Create orders page with transaction history filtered by customerEmail
  * Add server proxy /api/orders to forward GET /transactions queries

- Navigation Improvements:
  * Replace inline auth buttons with avatar dropdown menu
  * Add Profile, Orders, and Logout options to dropdown
  * Implement outside-click and route-change handlers for dropdown
  * Display user initials in avatar badge

- API Updates:
  * Update transactions endpoint to accept amount as string
  * Format amount with .toFixed(2) in checkout success flow
  * Query orders by customerEmail instead of ownerId for consistency
---
 .env.example                               |   4 +-
 app/components/AppNavbar.vue               | 119 ++++++-
 app/components/LoginModal.vue              |  11 +
 app/components/designer/TemplatePicker.vue |   4 +-
 app/composables/useAuth.ts                 | 351 ++++++++++++++-------
 app/composables/useFirebaseStorage.ts      |   1 +
 app/pages/checkout/success.vue             | 235 ++++++++++++++
 app/pages/index.vue                        | 280 ++++++++++++++--
 app/pages/orders.vue                       | 227 +++++++++++++
 app/pages/profile.vue                      | 156 +++++++++
 app/pages/register.vue                     | 186 +++++++++++
 composables/useSlipmatDesigner.ts          | 105 +++++-
 nuxt.config.ts                             |   3 +-
 server/api/checkout.session.post.ts        |  60 ++--
 server/api/checkout/[sessionId].get.ts     |  62 ++++
 server/api/designs.post.ts                 |  60 ++++
 server/api/designs/[designId].get.ts       |  30 ++
 server/api/orders.get.ts                   |  43 +++
 server/api/transactions.post.ts            |  93 ++++--
 19 files changed, 1807 insertions(+), 223 deletions(-)
 create mode 100644 app/composables/useFirebaseStorage.ts
 create mode 100644 app/pages/checkout/success.vue
 create mode 100644 app/pages/orders.vue
 create mode 100644 app/pages/profile.vue
 create mode 100644 app/pages/register.vue
 create mode 100644 server/api/checkout/[sessionId].get.ts
 create mode 100644 server/api/designs.post.ts
 create mode 100644 server/api/designs/[designId].get.ts
 create mode 100644 server/api/orders.get.ts

diff --git a/.env.example b/.env.example
index d3f11ed..1fbd7ed 100644
--- a/.env.example
+++ b/.env.example
@@ -3,6 +3,7 @@
 NUXT_PUBLIC_FIREBASE_API_KEY=your_firebase_api_key_here
 NUXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_firebase_auth_domain_here
 NUXT_PUBLIC_FIREBASE_PROJECT_ID=your_firebase_project_id_here
+# Use the bucket ID (e.g. project-id.appspot.com), not the web URL.
 NUXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your_firebase_storage_bucket_here
 NUXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_messaging_sender_id_here
 NUXT_PUBLIC_FIREBASE_APP_ID=your_firebase_app_id_here
@@ -14,4 +15,5 @@ STRIPE_SECRET_KEY=sk_test_xxx
 STRIPE_WEBHOOK_SECRET=whsec_xxx
 
 # Backend Configuration
-NUXT_PUBLIC_BACKEND_URL=http://localhost:3000
\ No newline at end of file
+NUXT_PUBLIC_BACKEND_URL=http://localhost:3000
+NUXT_PUBLIC_STORAGE_URL=http://localhost:9000
\ No newline at end of file
diff --git a/app/components/AppNavbar.vue b/app/components/AppNavbar.vue
index d2bf42b..66b0786 100644
--- a/app/components/AppNavbar.vue
+++ b/app/components/AppNavbar.vue
@@ -1,41 +1,136 @@
 <script setup lang="ts">
-const { user, signOut, initAuth, isLoading } = useAuth()
+const { user, backendUser, signOut, initAuth, isLoading } = useAuth()
 const loginModal = useLoginModal()
+const route = useRoute()
+
+const dropdownRef = ref<HTMLElement | null>(null)
+const showMenu = ref(false)
+
+const displayName = computed(() => backendUser.value?.name || user.value?.displayName || backendUser.value?.email || user.value?.email || "Account")
+
+const avatarInitials = computed(() => {
+  const source = displayName.value
+  if (!source) {
+    return "S"
+  }
+  const parts = source.trim().split(/\s+/)
+  if (parts.length === 1) {
+    return parts[0].charAt(0).toUpperCase()
+  }
+  return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase()
+})
 
 const openLoginModal = () => {
   loginModal.value = true
 }
 
-// Initialize auth on component mount
-onMounted(() => {
-  initAuth()
-})
-
 const handleSignOut = async () => {
   try {
     await signOut()
+    showMenu.value = false
   } catch (error) {
     console.error('Sign out failed:', error)
   }
 }
+
+const toggleMenu = () => {
+  showMenu.value = !showMenu.value
+}
+
+const closeMenu = () => {
+  if (showMenu.value) {
+    showMenu.value = false
+  }
+}
+
+const handleClickOutside = (event: MouseEvent) => {
+  if (!dropdownRef.value) {
+    return
+  }
+  if (!dropdownRef.value.contains(event.target as Node)) {
+    closeMenu()
+  }
+}
+
+onMounted(() => {
+  initAuth()
+  document.addEventListener('click', handleClickOutside)
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener('click', handleClickOutside)
+})
+
+watch(
+  () => route.fullPath,
+  () => {
+    closeMenu()
+  }
+)
 </script>
 
 <template>
   <nav class="sticky top-0 z-30 border-b border-slate-800/60 bg-slate-950/80 backdrop-blur">
     <div class="mx-auto max-w-6xl px-4 py-4 sm:px-6 lg:px-8">
       <div class="flex items-center justify-between gap-6">
-        <p class="text-lg font-semibold text-white sm:text-xl">Slipmatz</p>
+        <NuxtLink to="/" class="text-lg font-semibold text-white transition hover:text-sky-300 sm:text-xl">
+          Slipmatz
+        </NuxtLink>
         <div class="flex items-center gap-3">
           <!-- Show user info and logout when authenticated -->
-          <div v-if="user && !isLoading" class="flex items-center gap-3">
-            <span class="text-sm text-slate-300">{{ user.email }}</span>
+          <div v-if="user && !isLoading" ref="dropdownRef" class="relative flex items-center gap-3">
+            <span class="hidden text-sm text-slate-300 sm:inline">{{ backendUser?.email || user.email }}</span>
             <button
               type="button"
-              @click="handleSignOut"
-              class="rounded-full border border-slate-700/80 px-4 py-2 text-sm font-medium text-slate-200 transition hover:border-rose-500 hover:text-rose-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-rose-500 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-950"
+              class="flex h-10 w-10 items-center justify-center rounded-full bg-slate-800 text-sm font-semibold uppercase text-slate-200 transition hover:bg-slate-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-sky-500 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-950"
+              @click.stop="toggleMenu"
+              aria-haspopup="menu"
+              :aria-expanded="showMenu"
             >
-              Logout
+              {{ avatarInitials }}
             </button>
+
+            <transition
+              enter-active-class="transition ease-out duration-100"
+              enter-from-class="transform opacity-0 scale-95"
+              enter-to-class="transform opacity-100 scale-100"
+              leave-active-class="transition ease-in duration-75"
+              leave-from-class="transform opacity-100 scale-100"
+              leave-to-class="transform opacity-0 scale-95"
+            >
+              <div
+                v-if="showMenu"
+                class="absolute right-0 top-12 w-56 rounded-2xl border border-slate-800/70 bg-slate-900/95 p-3 shadow-xl shadow-slate-950/50 backdrop-blur"
+                role="menu"
+              >
+                <p class="px-3 text-xs uppercase tracking-[0.25em] text-slate-500">Signed in as</p>
+                <p class="px-3 text-sm font-medium text-slate-200">{{ displayName }}</p>
+                <p class="px-3 text-xs text-slate-500">{{ backendUser?.email || user.email }}</p>
+                <div class="my-3 h-px bg-slate-800"></div>
+                <NuxtLink
+                  to="/profile"
+                  class="flex items-center gap-2 rounded-xl px-3 py-2 text-sm font-medium text-slate-200 transition hover:bg-slate-800"
+                  role="menuitem"
+                >
+                  Profile
+                </NuxtLink>
+                <NuxtLink
+                  to="/orders"
+                  class="flex items-center gap-2 rounded-xl px-3 py-2 text-sm font-medium text-slate-200 transition hover:bg-slate-800"
+                  role="menuitem"
+                >
+                  Orders
+                </NuxtLink>
+                <button
+                  type="button"
+                  class="mt-2 flex w-full items-center gap-2 rounded-xl px-3 py-2 text-sm font-semibold text-rose-300 transition hover:bg-rose-500/10"
+                  @click="handleSignOut"
+                  role="menuitem"
+                >
+                  Logout
+                </button>
+              </div>
+            </transition>
           </div>
           
           <!-- Show login button when not authenticated -->
diff --git a/app/components/LoginModal.vue b/app/components/LoginModal.vue
index b752dcb..830bcc2 100644
--- a/app/components/LoginModal.vue
+++ b/app/components/LoginModal.vue
@@ -99,6 +99,17 @@ const handleGoogleLogin = async () => {
           {{ loginError || error }}
         </div>
 
+        <p class="mt-4 text-sm text-slate-400">
+          Need an account?
+          <NuxtLink
+            to="/register"
+            class="text-sky-400 hover:text-sky-300"
+            @click="isOpen = false"
+          >
+            Create one instead
+          </NuxtLink>
+        </p>
+
         <button
           @click="isOpen = false"
           class="mt-4 text-sm text-slate-400 hover:text-white"
diff --git a/app/components/designer/TemplatePicker.vue b/app/components/designer/TemplatePicker.vue
index e4c777a..1c4a521 100644
--- a/app/components/designer/TemplatePicker.vue
+++ b/app/components/designer/TemplatePicker.vue
@@ -21,7 +21,7 @@ const handleSelect = (templateId: string) => {
     <p class="mt-1 text-sm text-slate-400">
       Pick the vinyl size and print spec that matches this order.
     </p>
-    <div class="mt-4 grid gap-3 md:grid-cols-2">
+    <div class="mt-4 grid gap-3 md:grid-cols-1">
       <button
         v-for="template in props.templates"
         :key="template.id"
@@ -44,7 +44,7 @@ const handleSelect = (templateId: string) => {
             Active
           </span>
         </div>
-        <dl class="mt-3 grid grid-cols-2 gap-x-3 gap-y-2 text-xs text-slate-300">
+        <dl class="mt-3 grid grid-cols-4 gap-x-3 gap-y-2 text-xs text-slate-300">
           <div>
             <dt class="text-slate-500">Diameter</dt>
             <dd>{{ template.diameterInches }}&quot;</dd>
diff --git a/app/composables/useAuth.ts b/app/composables/useAuth.ts
index 81f27a8..bea0128 100644
--- a/app/composables/useAuth.ts
+++ b/app/composables/useAuth.ts
@@ -1,25 +1,37 @@
-import { 
-  signInWithEmailAndPassword, 
-  signInWithPopup, 
+import {
+  signInWithEmailAndPassword,
+  signInWithPopup,
   GoogleAuthProvider,
   signOut as firebaseSignOut,
   onAuthStateChanged,
-  getAuth
-} from 'firebase/auth'
-import { getApps, initializeApp } from 'firebase/app'
-import type { User } from 'firebase/auth'
+  getAuth,
+  createUserWithEmailAndPassword,
+} from "firebase/auth";
+import { getApp, getApps, initializeApp } from "firebase/app";
+import type { User } from "firebase/auth";
 
 export const useAuth = () => {
-  const user = ref<User | null>(null)
-  const isLoading = ref(true)
-  const error = ref<string | null>(null)
-  
-  const config = useRuntimeConfig()
+  const user = useState<User | null>("auth-user", () => null);
+  const isLoading = useState<boolean>("auth-loading", () => true);
+  const error = useState<string | null>("auth-error", () => null);
+  const firebaseReady = useState<boolean>("firebase-ready", () => false);
+  const listenerRegistered = useState<boolean>(
+    "auth-listener-registered",
+    () => false
+  );
+  const backendUser = useState<Record<string, any> | null>(
+    "auth-backend-user",
+    () => null
+  );
 
-  // Initialize Firebase if not already initialized
-  const initializeFirebase = async () => {
-    if (process.client && getApps().length === 0) {
-      console.log('Initializing Firebase with config:')
+  const config = useRuntimeConfig();
+
+  const ensureFirebaseApp = () => {
+    if (!process.client) {
+      return null;
+    }
+
+    if (!firebaseReady.value) {
       const firebaseConfig = {
         apiKey: config.public.firebaseApiKey,
         authDomain: config.public.firebaseAuthDomain,
@@ -29,149 +41,250 @@ export const useAuth = () => {
         appId: config.public.firebaseAppId,
         ...(config.public.firebaseMeasurementId
           ? { measurementId: config.public.firebaseMeasurementId }
-          : {})
-      }
-      await initializeApp(firebaseConfig)
-    }
-  }
+          : {}),
+      };
+
+      if (getApps().length === 0) {
+        initializeApp(firebaseConfig);
+      }
+
+      firebaseReady.value = true;
+    }
+
+    try {
+      return getApp();
+    } catch (err) {
+      console.error("[useAuth] Failed to get Firebase app instance:", err);
+      return null;
+    }
+  };
 
-  // Get auth instance directly
   const getAuthInstance = () => {
-    if (process.client) {
-      initializeFirebase()
-      return getAuth()
-    }
-    return null
-  }
+    const app = ensureFirebaseApp();
+    return app ? getAuth(app) : null;
+  };
 
-  // Initialize auth state listener
-  const initAuth = () => {
-    if (process.client) {
-      try {
-        const auth = getAuthInstance()
-        if (auth) {
-          onAuthStateChanged(auth, (firebaseUser) => {
-            user.value = firebaseUser
-            isLoading.value = false
-          })
-        }
-      } catch (err) {
-        console.error('Failed to initialize auth:', err)
-        isLoading.value = false
-      }
+  const authenticateWithBackend = async (idToken: string) => {
+    try {
+      const response = await $fetch<{
+        token?: string;
+        user?: Record<string, any> | null;
+      }>("/auth/login", {
+        baseURL: config.public.backendUrl,
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: {
+          idToken,
+        },
+      });
+
+      backendUser.value = response?.user ?? null;
+      return response;
+    } catch (err) {
+      console.error("Backend authentication failed:", err);
+      backendUser.value = null;
+      throw err;
     }
+  };
+
+  const syncBackendWithToken = async (tokenProvider: () => Promise<string>) => {
+    try {
+      const idToken = await tokenProvider();
+      await authenticateWithBackend(idToken);
+    } catch (err) {
+      console.warn("[useAuth] Failed to sync backend session", err);
+    }
+  };
+
+  const registerListener = () => {
+    if (!process.client || listenerRegistered.value) {
+      return;
+    }
+
+    try {
+      const auth = getAuthInstance();
+      if (auth) {
+        const existingUser = auth.currentUser;
+        if (existingUser && !user.value) {
+          user.value = existingUser;
+          isLoading.value = false;
+          syncBackendWithToken(() => existingUser.getIdToken());
+        }
+
+        listenerRegistered.value = true;
+        onAuthStateChanged(auth, (firebaseUser) => {
+          user.value = firebaseUser;
+          isLoading.value = false;
+          if (firebaseUser) {
+            syncBackendWithToken(() => firebaseUser.getIdToken());
+          } else {
+            backendUser.value = null;
+          }
+        });
+      }
+    } catch (err) {
+      console.error("[useAuth] Failed to initialize auth listener:", err);
+      isLoading.value = false;
+    }
+  };
+
+  const initAuth = () => {
+    registerListener();
+  };
+
+  // Eagerly register listener when composable is used in client context
+  if (process.client) {
+    registerListener();
   }
 
   // Sign in with email and password
   const signInWithEmail = async (email: string, password: string) => {
     try {
-      error.value = null
-      isLoading.value = true
-      
-      const auth = getAuthInstance()
+      error.value = null;
+      isLoading.value = true;
+
+      const auth = getAuthInstance();
       if (!auth) {
-        throw new Error('Firebase not initialized')
+        throw new Error("Firebase not initialized");
       }
-      
-      const userCredential = await signInWithEmailAndPassword(auth, email, password)
-      const idToken = await userCredential.user.getIdToken()
-      
+
+      const userCredential = await signInWithEmailAndPassword(
+        auth,
+        email,
+        password
+      );
+      const idToken = await userCredential.user.getIdToken();
+
       try {
-        await authenticateWithBackend(idToken)
+        await authenticateWithBackend(idToken);
       } catch (backendErr) {
-        console.warn('[useAuth] Backend authentication failed after email login:', backendErr)
+        console.warn(
+          "[useAuth] Backend authentication failed after email login:",
+          backendErr
+        );
       }
-      
-      return userCredential.user
+
+      user.value = userCredential.user;
+      registerListener();
+
+      return userCredential.user;
     } catch (err: any) {
-      error.value = err.message
-      throw err
+      error.value = err.message;
+      throw err;
     } finally {
-      isLoading.value = false
+      isLoading.value = false;
     }
-  }
+  };
 
   // Sign in with Google
   const signInWithGoogle = async () => {
     try {
-      error.value = null
-      isLoading.value = true
-      
-      const auth = getAuthInstance()
-      if (!auth) {
-        throw new Error('Firebase not initialized')
-      }
-      
-      const provider = new GoogleAuthProvider()
-      const userCredential = await signInWithPopup(auth, provider)
-      const idToken = await userCredential.user.getIdToken()
-      
-      try {
-        await authenticateWithBackend(idToken)
-      } catch (backendErr) {
-        console.warn('[useAuth] Backend authentication failed after Google login:', backendErr)
-      }
-      
-      return userCredential.user
-    } catch (err: any) {
-      error.value = err.message
-      throw err
-    } finally {
-      isLoading.value = false
-    }
-  }
+      error.value = null;
+      isLoading.value = true;
 
-  // Authenticate with backend
-  const authenticateWithBackend = async (idToken: string) => {
-    try {
-      const response = await $fetch('/auth/login', {
-        baseURL: config.public.backendUrl,
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json'
-        },
-        body: {
-          idToken
-        }
-      })
-      
-      return response
-    } catch (err) {
-      console.error('Backend authentication failed:', err)
-      throw err
+      const auth = getAuthInstance();
+      if (!auth) {
+        throw new Error("Firebase not initialized");
+      }
+
+      const provider = new GoogleAuthProvider();
+      const userCredential = await signInWithPopup(auth, provider);
+      const idToken = await userCredential.user.getIdToken();
+
+      try {
+        await authenticateWithBackend(idToken);
+      } catch (backendErr) {
+        console.warn(
+          "[useAuth] Backend authentication failed after Google login:",
+          backendErr
+        );
+      }
+
+      user.value = userCredential.user;
+      registerListener();
+
+      return userCredential.user;
+    } catch (err: any) {
+      error.value = err.message;
+      throw err;
+    } finally {
+      isLoading.value = false;
     }
-  }
+  };
+
+  const registerWithEmail = async (email: string, password: string) => {
+    try {
+      error.value = null;
+      isLoading.value = true;
+
+      const auth = getAuthInstance();
+      if (!auth) {
+        throw new Error("Firebase not initialized");
+      }
+
+      const userCredential = await createUserWithEmailAndPassword(
+        auth,
+        email,
+        password
+      );
+      const idToken = await userCredential.user.getIdToken();
+
+      try {
+        await authenticateWithBackend(idToken);
+      } catch (backendErr) {
+        console.warn(
+          "[useAuth] Backend authentication failed after registration:",
+          backendErr
+        );
+      }
+
+      user.value = userCredential.user;
+      registerListener();
+
+      return userCredential.user;
+    } catch (err: any) {
+      error.value = err.message;
+      throw err;
+    } finally {
+      isLoading.value = false;
+    }
+  };
 
   // Sign out
   const signOut = async () => {
     try {
-      const auth = getAuthInstance()
+      const auth = getAuthInstance();
       if (!auth) {
-        throw new Error('Firebase not initialized')
+        throw new Error("Firebase not initialized");
       }
-      
-      await firebaseSignOut(auth)
-      user.value = null
+
+      await firebaseSignOut(auth);
+      user.value = null;
+      backendUser.value = null;
     } catch (err: any) {
-      error.value = err.message
-      throw err
+      error.value = err.message;
+      throw err;
     }
-  }
+  };
 
   // Get current user's ID token
   const getIdToken = async () => {
-    if (!user.value) return null
-    return await user.value.getIdToken()
-  }
+    if (!user.value) return null;
+    return await user.value.getIdToken();
+  };
 
   return {
     user: readonly(user),
     isLoading: readonly(isLoading),
     error: readonly(error),
+    backendUser: readonly(backendUser),
     initAuth,
     signInWithEmail,
     signInWithGoogle,
+    registerWithEmail,
     signOut,
-    getIdToken
-  }
-}
\ No newline at end of file
+    getIdToken,
+  };
+};
diff --git a/app/composables/useFirebaseStorage.ts b/app/composables/useFirebaseStorage.ts
new file mode 100644
index 0000000..cb0ff5c
--- /dev/null
+++ b/app/composables/useFirebaseStorage.ts
@@ -0,0 +1 @@
+export {};
diff --git a/app/pages/checkout/success.vue b/app/pages/checkout/success.vue
new file mode 100644
index 0000000..c406d4f
--- /dev/null
+++ b/app/pages/checkout/success.vue
@@ -0,0 +1,235 @@
+<script setup lang="ts">
+const route = useRoute()
+const router = useRouter()
+
+const sessionId = computed(() => {
+  const raw = route.query.session_id
+  if (Array.isArray(raw)) {
+    return raw[0]
+  }
+  return typeof raw === 'string' ? raw : null
+})
+
+const { data: session, pending, error } = useAsyncData('checkout-session', async () => {
+  if (!sessionId.value) {
+    return null
+  }
+
+  return await $fetch(`/api/checkout/${sessionId.value}`)
+}, {
+  watch: [sessionId],
+})
+
+const amountLabel = computed(() => {
+  if (!session.value?.amountTotal) {
+    return null
+  }
+
+  const currencyCode = session.value.currency?.toUpperCase() ?? 'USD'
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: currencyCode,
+  }).format(session.value.amountTotal / 100)
+})
+
+const copyStatus = ref<'idle' | 'copied' | 'error'>('idle')
+const supportsClipboard = ref(false)
+const transactionStatus = ref<'idle' | 'saving' | 'saved' | 'error'>('idle')
+const transactionMessage = ref<string | null>(null)
+
+onMounted(() => {
+  supportsClipboard.value = typeof navigator !== 'undefined' && !!navigator.clipboard
+})
+
+watch(
+  () => session.value,
+  async (sessionValue) => {
+    if (!process.client) {
+      return
+    }
+    if (transactionStatus.value !== 'idle') {
+      return
+    }
+    if (!sessionId.value || !sessionValue?.id) {
+      return
+    }
+    if (sessionValue.paymentStatus !== 'paid') {
+      return
+    }
+
+    transactionStatus.value = 'saving'
+
+    try {
+      await $fetch('/api/transactions', {
+        method: 'POST',
+        body: {
+          stripeSessionId: sessionValue.id,
+          designId: sessionValue.metadata?.designId ?? `unknown-${sessionValue.id}`,
+          templateId: sessionValue.metadata?.templateId ?? null,
+          amount: sessionValue.amountTotal
+            ? (sessionValue.amountTotal / 100).toFixed(2)
+            : "0",
+          currency: sessionValue.currency ?? 'usd',
+          customerEmail: sessionValue.customerEmail ?? null,
+          customerDetails: sessionValue.customerDetails,
+        },
+      })
+      transactionStatus.value = 'saved'
+    } catch (err: any) {
+      console.error('Failed to persist transaction', err)
+      transactionStatus.value = 'error'
+      transactionMessage.value = err?.message ?? 'Unable to record this transaction.'
+    }
+  },
+  { immediate: true }
+)
+
+const copySessionId = async () => {
+  if (!supportsClipboard.value || !sessionId.value) {
+    return
+  }
+
+  try {
+    await navigator.clipboard.writeText(sessionId.value)
+    copyStatus.value = 'copied'
+    setTimeout(() => {
+      copyStatus.value = 'idle'
+    }, 2000)
+  } catch (err) {
+    console.error('Failed to copy session id', err)
+    copyStatus.value = 'error'
+    setTimeout(() => {
+      copyStatus.value = 'idle'
+    }, 2000)
+  }
+}
+
+const goToDesigner = () => {
+  const metadata = (session.value?.metadata ?? {}) as Record<string, unknown>
+  const designId = typeof metadata.designId === 'string' ? metadata.designId : null
+
+  if (designId) {
+    router.push({ path: '/', query: { designId } })
+  } else {
+    router.push('/')
+  }
+}
+</script>
+
+<template>
+  <main class="min-h-screen bg-slate-950 pb-16">
+    <AppNavbar />
+
+    <section class="mx-auto flex max-w-2xl flex-col gap-6 px-4 pt-16 text-slate-100">
+      <header class="space-y-4 text-center">
+        <div class="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-emerald-500/10 text-emerald-300">
+          <svg viewBox="0 0 24 24" class="h-10 w-10 fill-current">
+            <path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm4.7 7.3-5.2 5.2a1 1 0 0 1-1.4 0l-2-2a1 1 0 0 1 1.4-1.4l1.3 1.29 4.5-4.49a1 1 0 0 1 1.4 1.4Z" />
+          </svg>
+        </div>
+        <div>
+          <h1 class="text-3xl font-semibold">Payment Confirmed</h1>
+          <p class="mt-2 text-sm text-slate-400">
+            Thank you for purchasing your custom slipmat design. We've received your payment and sent a confirmation email.
+          </p>
+        </div>
+      </header>
+
+      <div v-if="!sessionId" class="rounded-2xl border border-slate-800/60 bg-slate-900/80 p-6">
+        <p class="text-sm text-slate-300">
+          We couldn't find a Stripe session ID in the URL. Please return to the designer and try again.
+        </p>
+        <button
+          type="button"
+          class="mt-4 w-full rounded-xl bg-sky-600 px-4 py-3 text-sm font-medium text-white transition hover:bg-sky-500"
+          @click="goToDesigner"
+        >
+          Back to Designer
+        </button>
+      </div>
+
+      <div
+        v-else
+        class="space-y-6"
+      >
+        <div class="rounded-2xl border border-slate-800/60 bg-slate-900/80 p-6">
+          <h2 class="text-lg font-semibold text-white">Order Summary</h2>
+          <dl class="mt-4 space-y-2 text-sm text-slate-300">
+            <div class="flex items-center justify-between">
+              <dt>Total Paid</dt>
+              <dd>
+                <span v-if="pending" class="text-slate-500">Loading...</span>
+                <span v-else-if="amountLabel">{{ amountLabel }}</span>
+                <span v-else class="text-slate-500">Pending</span>
+              </dd>
+            </div>
+            <div class="flex items-center justify-between">
+              <dt>Payment Status</dt>
+              <dd>
+                <span v-if="pending" class="text-slate-500">Loading...</span>
+                <span v-else-if="session?.paymentStatus">
+                  {{ session.paymentStatus === 'paid' ? 'Paid' : session.paymentStatus }}
+                </span>
+                <span v-else class="text-slate-500">Unknown</span>
+              </dd>
+            </div>
+            <div v-if="session?.customerEmail" class="flex items-center justify-between">
+              <dt>Receipt sent to</dt>
+              <dd>{{ session.customerEmail }}</dd>
+            </div>
+            <div class="flex items-center justify-between">
+              <dt>Session ID</dt>
+              <dd class="flex items-center gap-2 text-xs text-slate-400">
+                <span class="truncate max-w-[180px] sm:max-w-xs" :title="sessionId">{{ sessionId }}</span>
+                <button
+                  v-if="supportsClipboard"
+                  type="button"
+                  class="rounded-md border border-slate-700/70 px-2 py-1 text-[11px] uppercase tracking-wide text-slate-200 transition hover:border-slate-500 hover:text-white"
+                  @click="copySessionId"
+                >
+                  {{ copyStatus === 'copied' ? 'Copied' : 'Copy' }}
+                </button>
+              </dd>
+            </div>
+          </dl>
+
+          <div v-if="transactionStatus === 'saving'" class="mt-4 rounded-xl border border-slate-700/60 bg-slate-800/70 px-4 py-3 text-sm text-slate-200">
+            Recording your transaction...
+          </div>
+          <div v-else-if="transactionStatus === 'error'" class="mt-4 rounded-xl border border-rose-500/50 bg-rose-500/10 px-4 py-3 text-sm text-rose-200">
+            {{ transactionMessage || 'We could not record this transaction. Please contact support with your session ID.' }}
+          </div>
+          <div v-else-if="transactionStatus === 'saved'" class="mt-4 rounded-xl border border-emerald-500/50 bg-emerald-500/10 px-4 py-3 text-sm text-emerald-200">
+            Transaction stored safely.
+          </div>
+
+          <div v-if="error" class="mt-4 rounded-xl border border-rose-500/50 bg-rose-500/10 px-4 py-3 text-sm text-rose-200">
+            {{ error.message || 'We couldn\'t load the session details. Please contact support if this persists.' }}
+          </div>
+        </div>
+
+        <div class="rounded-2xl border border-slate-800/60 bg-slate-900/80 p-6">
+          <h2 class="text-lg font-semibold text-white">What's next?</h2>
+          <ul class="mt-4 space-y-3 text-sm text-slate-300">
+            <li>
+              We'll email you a confirmation that includes your payment details and a link to download the production-ready files once they're generated.
+            </li>
+            <li>
+              Need to tweak the design? Use the button below to reopen this project; your saved layout will load automatically.
+            </li>
+            <li>
+              Have questions? Reply directly to the confirmation email and our team will help out.
+            </li>
+          </ul>
+          <button
+            type="button"
+            class="mt-6 w-full rounded-xl bg-emerald-500 px-4 py-3 text-sm font-semibold text-emerald-950 transition hover:bg-emerald-400"
+            @click="goToDesigner"
+          >
+            Back to Designer
+          </button>
+        </div>
+      </div>
+    </section>
+  </main>
+</template>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index fbf7f36..29eb19e 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -11,6 +11,7 @@ const {
   templates,
   selectedTemplate,
   selectTemplate,
+  loadDesign,
   displaySize,
   templateLabel,
   productionPixelSize,
@@ -41,13 +42,214 @@ const {
 
 const DESIGN_PRICE_USD = 39.99;
 
-const { user } = useAuth();
+const { user, backendUser, initAuth, isLoading } = useAuth();
 const loginModal = useLoginModal();
+const route = useRoute();
+const router = useRouter();
+const config = useRuntimeConfig();
 
+const activeDesignId = ref<string | null>(
+  typeof route.query.designId === "string" ? route.query.designId : null
+);
+const loadedDesignId = ref<string | null>(null);
+const isDesignLoading = ref(false);
 const isCheckoutPending = ref(false);
 const checkoutError = ref<string | null>(null);
 const lastExportedDesign = ref<ExportedDesign | null>(null);
 
+type LoadDesignInput = Parameters<typeof loadDesign>[0];
+
+type StorageUploadResponse = {
+  bucket: string;
+  objectName: string;
+  publicUrl: string;
+  presignedUrl?: string | null;
+  presignedUrlExpiresIn?: number | null;
+};
+
+const uploadDesignAsset = async (
+  file: Blob,
+  filename: string,
+  options?: { prefix?: string; bucket?: string }
+): Promise<StorageUploadResponse> => {
+  if (!process.client) {
+    throw new Error("Asset uploads can only run in the browser context.");
+  }
+
+  const storageUrl = config.public.storageUrl;
+  if (!storageUrl) {
+    throw new Error("Storage URL is not configured.");
+  }
+
+  const formData = new FormData();
+  formData.append("file", file, filename);
+  if (options?.prefix) {
+    formData.append("prefix", options.prefix);
+  }
+  if (options?.bucket) {
+    formData.append("bucket", options.bucket);
+  }
+
+  return await $fetch<StorageUploadResponse>("/storage/upload", {
+    baseURL: storageUrl,
+    method: "POST",
+    headers: {
+      "content-type": "multipart/form-data",
+    },
+    body: formData,
+  });
+};
+
+const persistDesign = async (designId: string, design: ExportedDesign) => {
+  const safeDesignIdBase = designId.replace(/[^a-zA-Z0-9_-]/g, "-") || "design";
+  const assetBasePath = `designs/${safeDesignIdBase}`;
+  const timestamp = Date.now();
+
+  if (!design.previewBlob || !design.productionBlob) {
+    throw new Error("Design assets are missing; please export again.");
+  }
+
+  const canvasJsonString =
+    typeof design.canvasJson === "string"
+      ? design.canvasJson
+      : JSON.stringify(design.canvasJson);
+
+  const prefix = `${assetBasePath}/`;
+
+  const [previewUpload, productionUpload, canvasUpload] = await Promise.all([
+    uploadDesignAsset(design.previewBlob, `preview-${timestamp}.png`, {
+      prefix,
+    }),
+    uploadDesignAsset(design.productionBlob, `production-${timestamp}.png`, {
+      prefix,
+    }),
+    uploadDesignAsset(
+      new Blob([canvasJsonString], { type: "application/json" }),
+      `canvas-${timestamp}.json`,
+      { prefix }
+    ),
+  ]);
+
+  await $fetch("/api/designs", {
+    method: "POST",
+    body: {
+      designId,
+      templateId: design.templateId,
+      ownerEmail: user.value?.email ?? null,
+  ownerId: backendUser.value?.id ?? null,
+      previewUrl: previewUpload.publicUrl,
+      productionUrl: productionUpload.publicUrl,
+      canvasJson: canvasUpload.publicUrl,
+      metadata: {
+        designName: templateLabel.value,
+        storage: {
+          preview: {
+            objectName: previewUpload.objectName,
+            bucket: previewUpload.bucket,
+          },
+          production: {
+            objectName: productionUpload.objectName,
+            bucket: productionUpload.bucket,
+          },
+          canvas: {
+            objectName: canvasUpload.objectName,
+            bucket: canvasUpload.bucket,
+          },
+        },
+        storagePaths: {
+          preview: previewUpload.objectName,
+          production: productionUpload.objectName,
+          canvas: canvasUpload.objectName,
+        },
+      },
+    },
+  });
+
+  return {
+    previewUrl: previewUpload.publicUrl,
+    productionUrl: productionUpload.publicUrl,
+    canvasJsonUrl: canvasUpload.publicUrl,
+  };
+};
+
+const loadDesignById = async (designId: string) => {
+  if (!process.client) {
+    return;
+  }
+
+  isDesignLoading.value = true;
+  try {
+    const design = await $fetch<{
+      designId?: string;
+      templateId?: string | null;
+      previewUrl?: string | null;
+      productionUrl?: string | null;
+      canvasJson?: unknown;
+    }>(`/api/designs/${designId}`);
+
+    if (!design?.canvasJson) {
+      throw new Error("Saved design is missing canvas data.");
+    }
+
+    let canvasPayload: LoadDesignInput["canvasJson"] =
+      design.canvasJson as LoadDesignInput["canvasJson"];
+
+    if (typeof design.canvasJson === "string") {
+      const trimmed = design.canvasJson.trim();
+      const isRemoteSource = /^https?:\/\//i.test(trimmed);
+
+      if (isRemoteSource) {
+        const response = await fetch(trimmed);
+        if (!response.ok) {
+          throw new Error("Failed to download saved canvas data.");
+        }
+        canvasPayload =
+          (await response.text()) as LoadDesignInput["canvasJson"];
+      } else {
+        canvasPayload = trimmed as LoadDesignInput["canvasJson"];
+      }
+    }
+
+    await loadDesign({
+      templateId: design.templateId ?? null,
+      canvasJson: canvasPayload,
+      previewUrl: design.previewUrl ?? null,
+    });
+
+    loadedDesignId.value = designId;
+    lastExportedDesign.value = null;
+  } catch (error: any) {
+    console.error("Failed to load saved design", error);
+  } finally {
+    isDesignLoading.value = false;
+  }
+};
+
+watch(
+  () => route.query.designId,
+  (value) => {
+    const nextId = typeof value === "string" ? value : null;
+    if (nextId !== activeDesignId.value) {
+      activeDesignId.value = nextId;
+    }
+  }
+);
+
+watch(
+  activeDesignId,
+  (designId) => {
+    if (!designId || designId === loadedDesignId.value) {
+      return;
+    }
+    loadDesignById(designId);
+  },
+  { immediate: true }
+);
+
+onMounted(() => {
+  initAuth();
+});
+
 const handleTemplateSelect = (templateId: string) => {
   selectTemplate(templateId);
 };
@@ -64,6 +266,18 @@ const handleCheckout = async () => {
     return;
   }
 
+  initAuth();
+
+  if (isLoading.value) {
+    for (
+      let attempt = 0;
+      attempt < 10 && isLoading.value && !user.value;
+      attempt += 1
+    ) {
+      await new Promise((resolve) => setTimeout(resolve, 50));
+    }
+  }
+
   if (!user.value) {
     loginModal.value = true;
     return;
@@ -83,26 +297,42 @@ const handleCheckout = async () => {
     lastExportedDesign.value = exportResult;
 
     const designId =
-      typeof crypto !== "undefined" && "randomUUID" in crypto
+      activeDesignId.value ??
+      (typeof crypto !== "undefined" && "randomUUID" in crypto
         ? crypto.randomUUID()
-        : `design-${Date.now()}`;
+        : `design-${Date.now()}`);
+
+    await persistDesign(designId, exportResult);
+
+    activeDesignId.value = designId;
+    loadedDesignId.value = designId;
+
+    if (
+      typeof route.query.designId !== "string" ||
+      route.query.designId !== designId
+    ) {
+      await router.replace({ query: { designId } });
+    }
 
     const successUrlTemplate = `${window.location.origin}/checkout/success?session_id={CHECKOUT_SESSION_ID}`;
     const cancelUrl = window.location.href;
 
-    const session = await $fetch<{ id: string; url?: string | null }>("/api/checkout.session", {
-      method: "POST",
-      body: {
-        designId,
-        templateId: exportResult.templateId,
-        designName: templateLabel.value,
-        amount: DESIGN_PRICE_USD,
-        currency: "usd",
-        successUrl: successUrlTemplate,
-        cancelUrl,
-        customerEmail: user.value?.email,
-      },
-    });
+    const session = await $fetch<{ id: string; url?: string | null }>(
+      "/api/checkout.session",
+      {
+        method: "POST",
+        body: {
+          designId,
+          templateId: exportResult.templateId,
+          designName: templateLabel.value,
+          amount: DESIGN_PRICE_USD,
+          currency: "usd",
+          successUrl: successUrlTemplate,
+          cancelUrl,
+          customerEmail: user.value?.email ?? undefined,
+        },
+      }
+    );
 
     if (!session?.id) {
       throw new Error("Stripe session could not be created.");
@@ -113,11 +343,15 @@ const handleCheckout = async () => {
       return;
     }
 
-    const fallbackRedirect = successUrlTemplate.replace("{CHECKOUT_SESSION_ID}", session.id);
+    const fallbackRedirect = successUrlTemplate.replace(
+      "{CHECKOUT_SESSION_ID}",
+      session.id
+    );
     window.location.href = fallbackRedirect;
   } catch (err: any) {
     console.error("Checkout failed", err);
-    checkoutError.value = err?.message ?? "Unable to start checkout. Please try again.";
+    checkoutError.value =
+      err?.message ?? "Unable to start checkout. Please try again.";
   } finally {
     isCheckoutPending.value = false;
   }
@@ -169,7 +403,7 @@ const handleCheckout = async () => {
             :preview-url="previewUrl"
             :template-label="templateLabel"
             :production-pixels="productionPixelSize"
-            :is-exporting="isExporting"
+            :is-exporting="isExporting || isDesignLoading"
             :is-checkout-pending="isCheckoutPending"
             :checkout-price="DESIGN_PRICE_USD"
             :checkout-error="checkoutError"
@@ -181,7 +415,9 @@ const handleCheckout = async () => {
         </div>
 
         <div class="flex flex-col gap-6">
-          <div class="rounded-3xl border border-slate-800/60 bg-linear-to-br from-slate-900 via-slate-950 to-black p-6 shadow-2xl shadow-slate-950/60">
+          <div
+            class="rounded-3xl border border-slate-800/60 bg-linear-to-br from-slate-900 via-slate-950 to-black p-6 shadow-2xl shadow-slate-950/60"
+          >
             <DesignerCanvas
               :size="displaySize"
               :background-color="selectedTemplate.backgroundColor"
@@ -190,8 +426,8 @@ const handleCheckout = async () => {
             />
             <p class="mt-4 text-sm text-slate-400">
               Safe zone and bleed guides update automatically when you switch
-              templates. Use the toolbar to layer text, shapes, and imagery inside the
-              circular boundary.
+              templates. Use the toolbar to layer text, shapes, and imagery
+              inside the circular boundary.
             </p>
           </div>
         </div>
diff --git a/app/pages/orders.vue b/app/pages/orders.vue
new file mode 100644
index 0000000..3493e2d
--- /dev/null
+++ b/app/pages/orders.vue
@@ -0,0 +1,227 @@
+<script setup lang="ts">
+interface OrderRecord {
+  id?: string;
+  designId?: string;
+  templateId?: string | null;
+  amount?: string | number;
+  currency?: string;
+  customerEmail?: string | null;
+  status?: string | null;
+  createdAt?: string | null;
+  updatedAt?: string | null;
+  stripeSessionId?: string;
+  [key: string]: unknown;
+}
+
+const router = useRouter();
+const loginModal = useLoginModal();
+const { user, backendUser, initAuth, isLoading } = useAuth();
+
+const customerEmail = computed(() => backendUser.value?.email || user.value?.email || null);
+
+const orders = ref<OrderRecord[]>([]);
+const ordersLoading = ref(false);
+const ordersError = ref<string | null>(null);
+
+const isAuthenticated = computed(() => Boolean(user.value && customerEmail.value));
+
+onMounted(() => {
+  initAuth();
+});
+
+const fetchOrders = async () => {
+  if (!process.client) {
+    return;
+  }
+
+  if (!customerEmail.value) {
+    return;
+  }
+
+  ordersLoading.value = true;
+  ordersError.value = null;
+
+  try {
+    const response = await $fetch<OrderRecord[]>("/api/orders", {
+      query: { customerEmail: customerEmail.value ?? undefined },
+    });
+
+    if (Array.isArray(response)) {
+      orders.value = response;
+    } else if (response && typeof response === "object" && "orders" in response) {
+      orders.value = (response as any).orders ?? [];
+    } else {
+      orders.value = [];
+    }
+  } catch (error: any) {
+    console.error("Failed to load order history", error);
+    ordersError.value = error?.message ?? "Unable to load orders";
+    orders.value = [];
+  } finally {
+    ordersLoading.value = false;
+  }
+};
+
+watch(
+  () => customerEmail.value,
+  (email) => {
+    if (!process.client) {
+      return;
+    }
+    if (email) {
+      fetchOrders();
+    }
+  },
+  { immediate: true }
+);
+
+const formatAmount = (record: OrderRecord) => {
+  const rawAmount = record.amount;
+  const amountString =
+    typeof rawAmount === "string"
+      ? rawAmount
+      : typeof rawAmount === "number"
+        ? rawAmount.toString()
+        : "0";
+
+  const numericAmount = Number.parseFloat(amountString);
+  const currencyCode = (record.currency ?? "USD").toUpperCase();
+
+  if (Number.isFinite(numericAmount)) {
+    return new Intl.NumberFormat("en-US", {
+      style: "currency",
+      currency: currencyCode,
+    }).format(numericAmount);
+  }
+
+  return `${amountString} ${currencyCode}`.trim();
+};
+
+const formatDate = (value?: string | null) => {
+  if (!value) {
+    return "—";
+  }
+  const parsed = new Date(value);
+  return Number.isNaN(parsed.getTime()) ? value : parsed.toLocaleString();
+};
+
+const openLogin = () => {
+  loginModal.value = true;
+  router.push("/");
+};
+</script>
+
+<template>
+  <main class="min-h-screen bg-slate-950 pb-16 text-slate-100">
+    <AppNavbar />
+
+    <section class="mx-auto flex max-w-4xl flex-col gap-8 px-4 pt-16">
+      <header class="space-y-3">
+        <p class="text-sm uppercase tracking-[0.35em] text-sky-400">Account</p>
+        <h1 class="text-3xl font-semibold text-white">Order history</h1>
+        <p class="text-sm text-slate-400">
+          Review your completed purchases and keep track of the designs linked to each order.
+        </p>
+      </header>
+
+      <div v-if="isLoading" class="grid gap-4">
+        <div class="h-28 animate-pulse rounded-2xl border border-slate-800 bg-slate-900/50" />
+        <div class="h-28 animate-pulse rounded-2xl border border-slate-800 bg-slate-900/50" />
+      </div>
+
+      <div v-else-if="!isAuthenticated" class="rounded-2xl border border-slate-800/60 bg-slate-900/80 p-6">
+        <h2 class="text-xl font-semibold text-white">Sign in to view orders</h2>
+        <p class="mt-2 text-sm text-slate-400">
+          Orders are associated with your Slipmatz account. Sign in to see the designs you've purchased.
+        </p>
+        <button
+          type="button"
+          class="mt-4 rounded-md bg-sky-600 px-4 py-2 text-sm font-semibold text-white transition hover:bg-sky-500"
+          @click="openLogin"
+        >
+          Sign in
+        </button>
+      </div>
+
+      <div v-else class="space-y-6">
+        <div class="flex flex-wrap items-center justify-between gap-3">
+          <div class="text-sm text-slate-400">
+            Signed in as <span class="font-medium text-slate-200">{{ customerEmail }}</span>
+          </div>
+          <button
+            type="button"
+            class="rounded-md border border-slate-700/70 px-3 py-2 text-xs font-semibold uppercase tracking-[0.2em] text-slate-300 transition hover:border-slate-500 hover:text-white"
+            @click="fetchOrders"
+            :disabled="ordersLoading"
+          >
+            {{ ordersLoading ? 'Refreshing…' : 'Refresh' }}
+          </button>
+        </div>
+
+        <div v-if="ordersError" class="rounded-2xl border border-rose-500/60 bg-rose-500/10 p-6 text-sm text-rose-100">
+          {{ ordersError }}
+        </div>
+
+        <div v-if="ordersLoading" class="grid gap-4">
+          <div class="h-24 animate-pulse rounded-2xl border border-slate-800 bg-slate-900/50" />
+          <div class="h-24 animate-pulse rounded-2xl border border-slate-800 bg-slate-900/50" />
+          <div class="h-24 animate-pulse rounded-2xl border border-slate-800 bg-slate-900/50" />
+        </div>
+
+        <div v-else-if="orders.length === 0" class="rounded-2xl border border-slate-800/60 bg-slate-900/80 p-6 text-sm text-slate-300">
+          No orders yet. When you complete a purchase, your history will show up here for easy reference.
+        </div>
+
+        <div v-else class="space-y-4">
+          <article
+            v-for="order in orders"
+            :key="order.id || `${order.designId}-${order.createdAt}`"
+            class="rounded-2xl border border-slate-800/60 bg-slate-900/80 p-6 shadow-lg shadow-slate-950/40"
+          >
+            <div class="flex flex-wrap items-center justify-between gap-3">
+              <div>
+                <h3 class="text-lg font-semibold text-white">
+                  {{ formatAmount(order) }}
+                </h3>
+                <p class="text-sm text-slate-400">
+                  {{ order.currency ? order.currency.toUpperCase() : 'USD' }} • {{ formatDate(order.createdAt || order.updatedAt) }}
+                </p>
+              </div>
+              <span v-if="order.status" class="rounded-full border border-slate-700/70 px-3 py-1 text-xs uppercase tracking-[0.25em] text-slate-300">
+                {{ order.status }}
+              </span>
+            </div>
+
+            <dl class="mt-4 grid gap-3 text-sm text-slate-300 sm:grid-cols-2">
+              <div v-if="order.designId">
+                <dt class="text-xs uppercase tracking-[0.25em] text-slate-500">Design ID</dt>
+                <dd class="text-slate-200 break-all">{{ order.designId }}</dd>
+              </div>
+              <div v-if="order.templateId">
+                <dt class="text-xs uppercase tracking-[0.25em] text-slate-500">Template</dt>
+                <dd class="text-slate-200">{{ order.templateId }}</dd>
+              </div>
+              <div v-if="order.customerEmail">
+                <dt class="text-xs uppercase tracking-[0.25em] text-slate-500">Receipt sent to</dt>
+                <dd class="text-slate-200">{{ order.customerEmail }}</dd>
+              </div>
+              <div v-if="order.stripeSessionId">
+                <dt class="text-xs uppercase tracking-[0.25em] text-slate-500">Stripe session</dt>
+                <dd class="text-slate-200 break-all">{{ order.stripeSessionId }}</dd>
+              </div>
+            </dl>
+
+            <NuxtLink
+              v-if="order.designId"
+              :to="{ path: '/', query: { designId: order.designId } }"
+              class="mt-4 inline-flex items-center gap-2 text-sm font-semibold text-sky-400 transition hover:text-sky-300"
+            >
+              Reopen design
+              <span aria-hidden="true">→</span>
+            </NuxtLink>
+          </article>
+        </div>
+      </div>
+    </section>
+  </main>
+</template>
diff --git a/app/pages/profile.vue b/app/pages/profile.vue
new file mode 100644
index 0000000..8012c3d
--- /dev/null
+++ b/app/pages/profile.vue
@@ -0,0 +1,156 @@
+<script setup lang="ts">
+const router = useRouter();
+const loginModal = useLoginModal();
+const { user, backendUser, initAuth, isLoading, signOut } = useAuth();
+
+onMounted(() => {
+  initAuth();
+});
+
+const isAuthenticated = computed(() => Boolean(user.value));
+
+const displayName = computed(() => {
+  return (
+    backendUser.value?.name ||
+    user.value?.displayName ||
+    backendUser.value?.email ||
+    user.value?.email ||
+    "Slipmat Creator"
+  );
+});
+
+const displayEmail = computed(() => backendUser.value?.email || user.value?.email || "Unknown");
+
+const displayId = computed(() => backendUser.value?.id || user.value?.uid || null);
+
+const lastLogin = computed(() => {
+  const raw =
+    backendUser.value?.lastLogin ||
+    backendUser.value?.updatedAt ||
+    user.value?.metadata?.lastSignInTime ||
+    user.value?.metadata?.creationTime ||
+    null;
+
+  return raw ? new Date(raw) : null;
+});
+
+const profileFields = computed(() => {
+  const entries: Array<{ label: string; value: string | null }> = [
+    { label: "Display name", value: displayName.value },
+    { label: "Email", value: displayEmail.value },
+  ];
+
+  if (displayId.value) {
+    entries.push({ label: "User ID", value: displayId.value });
+  }
+
+  if (lastLogin.value) {
+    entries.push({ label: "Last login", value: lastLogin.value.toLocaleString() });
+  }
+
+  if (backendUser.value?.role) {
+    entries.push({ label: "Role", value: String(backendUser.value.role) });
+  }
+
+  if (backendUser.value?.createdAt) {
+    entries.push({ label: "Created", value: new Date(backendUser.value.createdAt).toLocaleString() });
+  }
+
+  return entries;
+});
+
+const openLogin = () => {
+  loginModal.value = true;
+  router.push("/");
+};
+
+const handleSignOut = async () => {
+  try {
+    await signOut();
+    router.push("/");
+  } catch (error) {
+    console.error("Sign out failed", error);
+  }
+};
+</script>
+
+<template>
+  <main class="min-h-screen bg-slate-950 pb-16 text-slate-100">
+    <AppNavbar />
+
+    <section class="mx-auto flex max-w-3xl flex-col gap-8 px-4 pt-16">
+      <header class="space-y-3">
+        <p class="text-sm uppercase tracking-[0.35em] text-sky-400">Account</p>
+        <h1 class="text-3xl font-semibold text-white">Profile</h1>
+        <p class="text-sm text-slate-400">
+          View your Slipmatz account details and manage sessions. Changes to your profile are controlled through your authentication provider.
+        </p>
+      </header>
+
+      <div v-if="isLoading" class="grid gap-4">
+        <div class="h-28 animate-pulse rounded-2xl border border-slate-800 bg-slate-900/50" />
+        <div class="h-28 animate-pulse rounded-2xl border border-slate-800 bg-slate-900/50" />
+      </div>
+
+      <div v-else-if="!isAuthenticated" class="rounded-2xl border border-slate-800/60 bg-slate-900/80 p-6">
+        <h2 class="text-xl font-semibold text-white">You're signed out</h2>
+        <p class="mt-2 text-sm text-slate-400">
+          Sign in to view your profile information and order history.
+        </p>
+        <button
+          type="button"
+          class="mt-4 rounded-md bg-sky-600 px-4 py-2 text-sm font-semibold text-white transition hover:bg-sky-500"
+          @click="openLogin"
+        >
+          Sign in
+        </button>
+      </div>
+
+      <div v-else class="space-y-6">
+        <div class="rounded-2xl border border-slate-800/60 bg-slate-900/80 p-6">
+          <div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+            <div>
+              <h2 class="text-xl font-semibold text-white">{{ displayName }}</h2>
+              <p class="text-sm text-slate-400">{{ displayEmail }}</p>
+            </div>
+            <div class="flex flex-wrap items-center gap-3">
+              <NuxtLink
+                to="/orders"
+                class="rounded-md border border-slate-700/70 px-4 py-2 text-sm font-medium text-slate-200 transition hover:border-sky-500 hover:text-white"
+              >
+                View order history
+              </NuxtLink>
+              <button
+                type="button"
+                class="rounded-md border border-rose-500/70 px-4 py-2 text-sm font-semibold text-rose-200 transition hover:bg-rose-500/10"
+                @click="handleSignOut"
+              >
+                Sign out
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <div class="rounded-2xl border border-slate-800/60 bg-slate-900/80 p-6">
+          <h3 class="text-lg font-semibold text-white">Account details</h3>
+          <dl class="mt-4 grid gap-4 text-sm text-slate-300 sm:grid-cols-2">
+            <div v-for="field in profileFields" :key="field.label" class="space-y-1">
+              <dt class="text-xs uppercase tracking-[0.25em] text-slate-500">{{ field.label }}</dt>
+              <dd class="text-sm text-slate-200 break-all">{{ field.value }}</dd>
+            </div>
+          </dl>
+        </div>
+
+        <div v-if="backendUser" class="rounded-2xl border border-slate-800/60 bg-slate-900/80 p-6">
+          <h3 class="text-lg font-semibold text-white">Backend session</h3>
+          <p class="text-sm text-slate-400">
+            The following data is provided by the Slipmatz backend and may include additional metadata used for order fulfillment.
+          </p>
+          <pre class="mt-4 overflow-x-auto rounded-xl bg-slate-950/80 p-4 text-xs text-slate-300">
+{{ JSON.stringify(backendUser, null, 2) }}
+          </pre>
+        </div>
+      </div>
+    </section>
+  </main>
+</template>
diff --git a/app/pages/register.vue b/app/pages/register.vue
new file mode 100644
index 0000000..3dd7484
--- /dev/null
+++ b/app/pages/register.vue
@@ -0,0 +1,186 @@
+<script setup lang="ts">
+const router = useRouter();
+const { user, registerWithEmail, signInWithGoogle, isLoading, error } = useAuth();
+const loginModal = useLoginModal();
+
+const email = ref("");
+const password = ref("");
+const confirmPassword = ref("");
+const isSubmitting = ref(false);
+const localError = ref<string | null>(null);
+
+const isProcessing = computed(() => isSubmitting.value || isLoading.value);
+const combinedError = computed(() => localError.value || error.value || null);
+
+const redirectIfAuthenticated = (maybeUser: unknown) => {
+  if (!process.client) {
+    return;
+  }
+  if (maybeUser) {
+    router.replace("/");
+  }
+};
+
+watch(
+  () => user.value,
+  (currentUser) => {
+    if (currentUser) {
+      redirectIfAuthenticated(currentUser);
+    }
+  },
+  { immediate: true }
+);
+
+const handleRegister = async () => {
+  if (!process.client) {
+    return;
+  }
+
+  localError.value = null;
+
+  if (!email.value.trim()) {
+    localError.value = "Email is required.";
+    return;
+  }
+
+  if (password.value.length < 6) {
+    localError.value = "Password must be at least 6 characters.";
+    return;
+  }
+
+  if (password.value !== confirmPassword.value) {
+    localError.value = "Passwords do not match.";
+    return;
+  }
+
+  try {
+    isSubmitting.value = true;
+    await registerWithEmail(email.value.trim(), password.value);
+    await router.replace("/");
+  } catch (err: any) {
+    localError.value = err?.message ?? "Registration failed. Please try again.";
+  } finally {
+    isSubmitting.value = false;
+  }
+};
+
+const handleGoogleRegister = async () => {
+  if (!process.client) {
+    return;
+  }
+
+  try {
+    isSubmitting.value = true;
+    await signInWithGoogle();
+    await router.replace("/");
+  } catch (err: any) {
+    localError.value = err?.message ?? "Google sign-in failed. Please try again.";
+  } finally {
+    isSubmitting.value = false;
+  }
+};
+
+const goToSignIn = async () => {
+  if (!process.client) {
+    return;
+  }
+
+  loginModal.value = true;
+  await router.push("/");
+};
+</script>
+
+<template>
+  <main class="min-h-screen bg-slate-950 pb-16 text-slate-100">
+    <AppNavbar />
+
+    <section class="mx-auto flex max-w-md flex-col gap-8 px-4 pt-16">
+      <header class="space-y-3 text-center">
+        <p class="text-sm uppercase tracking-[0.35em] text-sky-400">Create Account</p>
+        <h1 class="text-3xl font-semibold text-white">Join Slipmatz</h1>
+        <p class="text-sm text-slate-400">
+          Sign up with email and password to save your designs and return to them anytime.
+        </p>
+      </header>
+
+      <form class="space-y-5 rounded-2xl border border-slate-800/60 bg-slate-900/80 p-6" @submit.prevent="handleRegister">
+        <div class="space-y-1">
+          <label for="email" class="block text-sm font-medium text-slate-300">Email</label>
+          <input
+            id="email"
+            v-model="email"
+            type="email"
+            required
+            autocomplete="email"
+            class="w-full rounded-md border border-slate-700 bg-slate-800 px-3 py-2 text-white focus:border-sky-400 focus:outline-none focus:ring-2 focus:ring-sky-500/40"
+          />
+        </div>
+
+        <div class="space-y-1">
+          <label for="password" class="block text-sm font-medium text-slate-300">Password</label>
+          <input
+            id="password"
+            v-model="password"
+            type="password"
+            required
+            autocomplete="new-password"
+            minlength="6"
+            class="w-full rounded-md border border-slate-700 bg-slate-800 px-3 py-2 text-white focus:border-sky-400 focus:outline-none focus:ring-2 focus:ring-sky-500/40"
+          />
+          <p class="text-xs text-slate-500">Minimum 6 characters.</p>
+        </div>
+
+        <div class="space-y-1">
+          <label for="confirm-password" class="block text-sm font-medium text-slate-300">Confirm Password</label>
+          <input
+            id="confirm-password"
+            v-model="confirmPassword"
+            type="password"
+            required
+            autocomplete="new-password"
+            minlength="6"
+            class="w-full rounded-md border border-slate-700 bg-slate-800 px-3 py-2 text-white focus:border-sky-400 focus:outline-none focus:ring-2 focus:ring-sky-500/40"
+          />
+        </div>
+
+        <button
+          type="submit"
+          :disabled="isProcessing"
+          class="w-full rounded-md bg-emerald-500 px-4 py-2 text-sm font-semibold text-emerald-950 transition hover:bg-emerald-400 disabled:opacity-60"
+        >
+          {{ isProcessing ? "Creating account..." : "Create account" }}
+        </button>
+
+        <div class="my-2 flex items-center gap-3 text-xs uppercase tracking-[0.2em] text-slate-500">
+          <div class="flex-1 border-t border-slate-800"></div>
+          <span>or</span>
+          <div class="flex-1 border-t border-slate-800"></div>
+        </div>
+
+        <button
+          type="button"
+          :disabled="isProcessing"
+          class="w-full rounded-md border border-slate-700 bg-slate-900 px-4 py-2 text-sm font-semibold text-slate-200 transition hover:bg-slate-800 disabled:opacity-60"
+          @click="handleGoogleRegister"
+        >
+          Continue with Google
+        </button>
+
+        <p v-if="combinedError" class="rounded-md border border-rose-500/40 bg-rose-500/10 px-3 py-2 text-sm text-rose-200">
+          {{ combinedError }}
+        </p>
+      </form>
+
+      <p class="text-center text-sm text-slate-400">
+        Already have an account?
+        <NuxtLink
+          to="/"
+          class="text-sky-400 hover:text-sky-300"
+          @click.prevent="goToSignIn"
+        >
+          Sign in instead
+        </NuxtLink>
+      </p>
+    </section>
+  </main>
+</template>
diff --git a/composables/useSlipmatDesigner.ts b/composables/useSlipmatDesigner.ts
index f978400..111743f 100644
--- a/composables/useSlipmatDesigner.ts
+++ b/composables/useSlipmatDesigner.ts
@@ -13,15 +13,6 @@ export interface SlipmatTemplate {
   backgroundColor: string;
 }
 
-export interface ExportedDesign {
-  previewUrl: string;
-  previewBlob: Blob;
-  productionUrl: string;
-  productionBlob: Blob;
-  templateId: string;
-  createdAt: string;
-}
-
 const DISPLAY_SIZE = 720;
 const PREVIEW_SIZE = 1024;
 const MIN_ZOOM = 0.5;
@@ -59,6 +50,7 @@ const TEMPLATE_PRESETS: SlipmatTemplate[] = [
 ];
 
 type FabricCanvas = FabricNamespace.Canvas;
+type FabricSerializedCanvas = ReturnType<FabricCanvas["toJSON"]>;
 type FabricCircle = FabricNamespace.Circle;
 type FabricRect = FabricNamespace.Rect;
 type FabricTextbox = FabricNamespace.Textbox;
@@ -69,6 +61,16 @@ type CanvasReadyPayload = {
   fabric: FabricModule;
 };
 
+export interface ExportedDesign {
+  previewUrl: string;
+  previewBlob: Blob;
+  productionUrl: string;
+  productionBlob: Blob;
+  templateId: string;
+  createdAt: string;
+  canvasJson: FabricSerializedCanvas;
+}
+
 const FALLBACK_TEMPLATE: SlipmatTemplate = TEMPLATE_PRESETS[0] ?? {
   id: "custom",
   name: "Custom",
@@ -605,6 +607,77 @@ export const useSlipmatDesigner = () => {
     }
   };
 
+  const waitForCanvasReady = async (): Promise<FabricCanvas> => {
+    if (canvas.value) {
+      return canvas.value;
+    }
+
+    await new Promise<void>((resolve) => {
+      const stop = watch(
+        canvas,
+        (value) => {
+          if (value) {
+            stop();
+            resolve();
+          }
+        },
+        { immediate: false }
+      );
+    });
+
+    if (!canvas.value) {
+      throw new Error("Canvas not ready");
+    }
+
+    return canvas.value;
+  };
+
+  const loadDesign = async (payload: {
+    templateId?: string | null;
+    canvasJson: string | FabricSerializedCanvas;
+    previewUrl?: string | null;
+  }) => {
+    if (payload.templateId) {
+      selectTemplate(payload.templateId);
+    }
+
+    const currentCanvas = await waitForCanvasReady();
+    if (!fabricApi.value) {
+      throw new Error("Fabric API not ready");
+    }
+
+    const parsedJson =
+      typeof payload.canvasJson === "string"
+        ? (JSON.parse(payload.canvasJson) as FabricSerializedCanvas)
+        : payload.canvasJson;
+
+    await new Promise<void>((resolve, reject) => {
+      currentCanvas.loadFromJSON(parsedJson, () => {
+        maintainStaticLayerOrder();
+        updateSelectedStyleState();
+        currentCanvas.renderAll();
+        schedulePreviewRefresh();
+        resolve();
+      });
+    }).catch((error) => {
+      throw error;
+    });
+
+    // Reset cached assets; caller can provide preview if available.
+    previewBlob.value = null;
+    productionBlob.value = null;
+    if (productionObjectUrl.value) {
+      URL.revokeObjectURL(productionObjectUrl.value);
+      productionObjectUrl.value = null;
+    }
+
+    if (payload.previewUrl) {
+      previewUrl.value = payload.previewUrl;
+    } else {
+      await refreshPreview();
+    }
+  };
+
   const exportDesign = async (): Promise<ExportedDesign | null> => {
     const currentCanvas = canvas.value;
     if (!currentCanvas) {
@@ -629,6 +702,8 @@ export const useSlipmatDesigner = () => {
       });
       const productionDataBlob = await dataUrlToBlob(productionDataUrl);
 
+      const canvasJson = currentCanvas.toJSON();
+
       previewUrl.value = previewDataUrl;
       previewBlob.value = previewDataBlob;
       productionBlob.value = productionDataBlob;
@@ -645,6 +720,7 @@ export const useSlipmatDesigner = () => {
         productionBlob: productionDataBlob,
         templateId: selectedTemplate.value.id,
         createdAt: new Date().toISOString(),
+        canvasJson,
       };
     } finally {
       isExporting.value = false;
@@ -689,6 +765,7 @@ export const useSlipmatDesigner = () => {
     templates,
     selectedTemplate,
     selectTemplate,
+    loadDesign,
     displaySize,
     productionPixelSize,
     templateLabel,
@@ -697,9 +774,9 @@ export const useSlipmatDesigner = () => {
     productionBlob,
     productionObjectUrl,
     isExporting,
-  activeFillColor,
-  activeStrokeColor,
-  canStyleSelection,
+    activeFillColor,
+    activeStrokeColor,
+    canStyleSelection,
     zoomLevel,
     zoomPercent,
     minZoom: MIN_ZOOM,
@@ -709,8 +786,8 @@ export const useSlipmatDesigner = () => {
     addTextbox,
     addShape,
     addImageFromFile,
-  setActiveFillColor,
-  setActiveStrokeColor,
+    setActiveFillColor,
+    setActiveStrokeColor,
     setZoom,
     zoomIn,
     zoomOut,
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 69fc01e..72fe6ae 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -21,7 +21,8 @@ export default defineNuxtConfig({
       firebaseAppId: process.env.NUXT_PUBLIC_FIREBASE_APP_ID,
       firebaseMeasurementId: process.env.NUXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
       stripePublishableKey: process.env.NUXT_PUBLIC_STRIPE_PUBLISHABLE_KEY,
-      backendUrl: process.env.NUXT_PUBLIC_BACKEND_URL || 'http://localhost:3000'
+      backendUrl: process.env.NUXT_PUBLIC_BACKEND_URL || 'http://localhost:3000',
+      storageUrl: process.env.NUXT_PUBLIC_STORAGE_URL || 'http://localhost:9000',
     }
   },
   colorMode: {
diff --git a/server/api/checkout.session.post.ts b/server/api/checkout.session.post.ts
index b88eefb..29328ff 100644
--- a/server/api/checkout.session.post.ts
+++ b/server/api/checkout.session.post.ts
@@ -1,39 +1,51 @@
-import Stripe from 'stripe'
+import Stripe from "stripe";
 
 export default defineEventHandler(async (event) => {
-  const config = useRuntimeConfig()
-  const stripeSecretKey = config.stripeSecretKey
+  const config = useRuntimeConfig();
+  const stripeSecretKey = config.stripeSecretKey;
 
   if (!stripeSecretKey) {
-    throw createError({ statusCode: 500, statusMessage: 'Stripe secret key not configured' })
+    throw createError({
+      statusCode: 500,
+      statusMessage: "Stripe secret key not configured",
+    });
   }
 
   const stripe = new Stripe(stripeSecretKey, {
-    apiVersion: '2024-10-28.acacia',
-  })
+    apiVersion: "2025-10-29.clover",
+  });
 
   const body = await readBody<{
-    designId: string
-    templateId?: string
-    designName?: string
-    amount: number
-    currency?: string
-    successUrl: string
-    cancelUrl: string
-    customerEmail?: string
-  }>(event)
+    designId: string;
+    templateId?: string;
+    designName?: string;
+    amount: number;
+    currency?: string;
+    successUrl: string;
+    cancelUrl: string;
+    customerEmail?: string;
+  }>(event);
 
-  if (!body?.designId || !body?.amount || !body?.successUrl || !body?.cancelUrl) {
-    throw createError({ statusCode: 400, statusMessage: 'Missing required fields' })
+  if (
+    !body?.designId ||
+    !body?.amount ||
+    !body?.successUrl ||
+    !body?.cancelUrl
+  ) {
+    throw createError({
+      statusCode: 400,
+      statusMessage: "Missing required fields",
+    });
   }
 
-  const { currency = 'usd' } = body
+  const { currency = "usd" } = body;
 
   const session = await stripe.checkout.sessions.create({
-    mode: 'payment',
-    payment_method_types: ['card'],
-    billing_address_collection: 'auto',
+    mode: "payment",
+    payment_method_types: ["card"],
+    billing_address_collection: "auto",
     customer_email: body.customerEmail,
+    shipping_address_collection: { allowed_countries: ["US", "CA"] },
     line_items: [
       {
         quantity: 1,
@@ -56,7 +68,7 @@ export default defineEventHandler(async (event) => {
     },
     success_url: body.successUrl,
     cancel_url: body.cancelUrl,
-  })
+  });
 
-  return { id: session.id, url: session.url }
-})
+  return { id: session.id, url: session.url };
+});
diff --git a/server/api/checkout/[sessionId].get.ts b/server/api/checkout/[sessionId].get.ts
new file mode 100644
index 0000000..21f6029
--- /dev/null
+++ b/server/api/checkout/[sessionId].get.ts
@@ -0,0 +1,62 @@
+import Stripe from 'stripe'
+
+export default defineEventHandler(async (event) => {
+  const config = useRuntimeConfig()
+  const stripeSecretKey = config.stripeSecretKey
+
+  if (!stripeSecretKey) {
+    throw createError({ statusCode: 500, statusMessage: 'Stripe secret key not configured' })
+  }
+
+  const params = event.context.params as { sessionId?: string }
+  const sessionId = params?.sessionId
+
+  if (!sessionId) {
+    throw createError({ statusCode: 400, statusMessage: 'Missing session id' })
+  }
+
+  const stripe = new Stripe(stripeSecretKey, {
+    apiVersion: '2025-10-29.clover',
+  })
+
+  try {
+    const session = await stripe.checkout.sessions.retrieve(sessionId, {
+      expand: ['payment_intent', 'customer'],
+    })
+
+    const customerDetails = session.customer_details ?? null
+
+    return {
+      id: session.id,
+      paymentStatus: session.payment_status,
+      amountTotal: session.amount_total,
+      currency: session.currency,
+      customerEmail: customerDetails?.email ?? session.customer_email ?? null,
+      customerName: customerDetails?.name ?? null,
+      createdAt: session.created ? new Date(session.created * 1000).toISOString() : null,
+      metadata: session.metadata ?? {},
+      customerDetails: customerDetails
+        ? {
+            name: customerDetails.name ?? null,
+            email: customerDetails.email ?? null,
+            phone: customerDetails.phone ?? null,
+            address: customerDetails.address
+              ? {
+                  line1: customerDetails.address.line1 ?? null,
+                  line2: customerDetails.address.line2 ?? null,
+                  city: customerDetails.address.city ?? null,
+                  state: customerDetails.address.state ?? null,
+                  postalCode: customerDetails.address.postal_code ?? null,
+                  country: customerDetails.address.country ?? null,
+                }
+              : null,
+          }
+        : null,
+    }
+  } catch (error: any) {
+    throw createError({
+      statusCode: error?.statusCode ?? 500,
+      statusMessage: error?.message ?? 'Unable to retrieve checkout session',
+    })
+  }
+})
diff --git a/server/api/designs.post.ts b/server/api/designs.post.ts
new file mode 100644
index 0000000..5b688f3
--- /dev/null
+++ b/server/api/designs.post.ts
@@ -0,0 +1,60 @@
+export default defineEventHandler(async (event) => {
+  const body = await readBody<{
+    designId: string;
+    templateId: string;
+    ownerEmail?: string | null;
+    ownerId?: string | null;
+    previewUrl?: string | null;
+    productionUrl?: string | null;
+    canvasJson: unknown;
+    metadata?: Record<string, unknown>;
+  }>(event);
+
+  if (!body?.designId || !body?.templateId || body.canvasJson === undefined) {
+    throw createError({
+      statusCode: 400,
+      statusMessage: "Missing required design fields",
+    });
+  }
+
+  const config = useRuntimeConfig();
+  const backendUrl = config.public?.backendUrl;
+
+  if (!backendUrl) {
+    throw createError({
+      statusCode: 500,
+      statusMessage: "Backend URL not configured",
+    });
+  }
+
+  const payload = {
+    designId: body.designId,
+    templateId: body.templateId,
+    ownerEmail: body.ownerEmail ?? null,
+    ownerId: body.ownerId ?? null,
+    previewUrl: body.previewUrl ?? null,
+    productionUrl: body.productionUrl ?? null,
+    canvasJson: body.canvasJson,
+    metadata: body.metadata ?? {},
+    updatedAt: new Date().toISOString(),
+  };
+
+  try {
+    const result = await $fetch("/designs", {
+      baseURL: backendUrl,
+      method: "POST",
+      body: payload,
+    });
+
+    return {
+      ok: true,
+      result,
+    };
+  } catch (err) {
+    console.error("[designs] Failed to forward design payload", err);
+    throw createError({
+      statusCode: 502,
+      statusMessage: (err as Error)?.message ?? "Failed to persist design",
+    });
+  }
+});
diff --git a/server/api/designs/[designId].get.ts b/server/api/designs/[designId].get.ts
new file mode 100644
index 0000000..99e8713
--- /dev/null
+++ b/server/api/designs/[designId].get.ts
@@ -0,0 +1,30 @@
+export default defineEventHandler(async (event) => {
+  const params = event.context.params as { designId?: string }
+  const designId = params?.designId
+
+  if (!designId) {
+    throw createError({ statusCode: 400, statusMessage: "Missing design id" })
+  }
+
+  const config = useRuntimeConfig()
+  const backendUrl = config.public?.backendUrl
+
+  if (!backendUrl) {
+    throw createError({ statusCode: 500, statusMessage: "Backend URL not configured" })
+  }
+
+  try {
+    const design = await $fetch(`/designs/${encodeURIComponent(designId)}`, {
+      baseURL: backendUrl,
+      method: "GET",
+    })
+
+    return design
+  } catch (err) {
+    console.error(`[designs] Failed to fetch design ${designId}`, err)
+    throw createError({
+      statusCode: 502,
+      statusMessage: (err as Error)?.message ?? "Failed to load design",
+    })
+  }
+})
diff --git a/server/api/orders.get.ts b/server/api/orders.get.ts
new file mode 100644
index 0000000..8ab97b6
--- /dev/null
+++ b/server/api/orders.get.ts
@@ -0,0 +1,43 @@
+export default defineEventHandler(async (event) => {
+  const config = useRuntimeConfig();
+  const backendUrl = config.public?.backendUrl;
+
+  if (!backendUrl) {
+    throw createError({ statusCode: 500, statusMessage: "Backend URL not configured" });
+  }
+
+  const query = getQuery(event);
+  const customerEmail = typeof query.customerEmail === "string" ? query.customerEmail : null;
+
+  if (!customerEmail) {
+    throw createError({ statusCode: 400, statusMessage: "Missing customerEmail" });
+  }
+
+  try {
+    const result = await $fetch("/transactions", {
+      baseURL: backendUrl,
+      method: "GET",
+      query: { customerEmail },
+    });
+
+    if (Array.isArray(result)) {
+      return result;
+    }
+
+    if (result && Array.isArray((result as any).data)) {
+      return (result as any).data;
+    }
+
+    if (result && Array.isArray((result as any).orders)) {
+      return (result as any).orders;
+    }
+
+    return result;
+  } catch (err) {
+    console.error("[orders] Failed to fetch order history", err);
+    throw createError({
+      statusCode: 502,
+      statusMessage: (err as Error)?.message ?? "Failed to load order history",
+    });
+  }
+});
diff --git a/server/api/transactions.post.ts b/server/api/transactions.post.ts
index d52f803..b771b5e 100644
--- a/server/api/transactions.post.ts
+++ b/server/api/transactions.post.ts
@@ -1,36 +1,73 @@
 export default defineEventHandler(async (event) => {
   const body = await readBody<{
-    stripeSessionId: string
-    designId: string
-    templateId?: string
-    amount: number
-    currency: string
-    customerEmail?: string
-    assets?: {
-      previewUrl?: string
-      productionUrl?: string
-    }
-  }>(event)
+    stripeSessionId: string;
+    designId: string;
+    templateId?: string;
+    amount: number | string;
+    currency: string;
+    customerEmail?: string;
+    customerDetails?: {
+      name?: string | null;
+      email?: string | null;
+      phone?: string | null;
+      address?: {
+        line1?: string | null;
+        line2?: string | null;
+        city?: string | null;
+        state?: string | null;
+        postalCode?: string | null;
+        country?: string | null;
+      } | null;
+    };
+  }>(event);
 
   if (!body?.stripeSessionId || !body?.designId) {
-    throw createError({ statusCode: 400, statusMessage: 'Missing required fields' })
+    throw createError({
+      statusCode: 400,
+      statusMessage: "Missing required fields",
+    });
   }
 
-  // TODO: Persist the transaction to your database of choice.
-  // Example shape:
-  // await db.transaction.create({
-  //   stripeSessionId: body.stripeSessionId,
-  //   designId: body.designId,
-  //   templateId: body.templateId,
-  //   amount: body.amount,
-  //   currency: body.currency,
-  //   customerEmail: body.customerEmail,
-  //   previewUrl: body.assets?.previewUrl,
-  //   productionUrl: body.assets?.productionUrl,
-  // })
+  const config = useRuntimeConfig();
+  const backendUrl = config.public?.backendUrl;
 
-  return {
-    ok: true,
-    receivedAt: new Date().toISOString(),
+  if (!backendUrl) {
+    throw createError({
+      statusCode: 500,
+      statusMessage: "Backend URL not configured",
+    });
   }
-})
+
+  const record = {
+    stripeSessionId: body.stripeSessionId,
+    designId: body.designId,
+    templateId: body.templateId ?? null,
+    amount: body.amount.toString(),
+    currency: body.currency,
+    customerEmail: body.customerEmail ?? null,
+    customerDetails: body.customerDetails ?? null,
+  };
+
+  console.log("[transactions] Forwarding record to backend:", record);  
+
+  try {
+    const backendResult = await $fetch("/transactions", {
+      baseURL: backendUrl,
+      method: "POST",
+      body: record,
+    });
+
+    return {
+      ok: true,
+      receivedAt: new Date().toISOString(),
+      backendResult,
+    };
+  } catch (err) {
+    console.error("[transactions] Failed to forward to backend", err);
+    throw createError({
+      statusCode: 502,
+      statusMessage:
+        (err as Error)?.message ?? "Failed to save transaction to backend",
+    });
+  }
+});