Building an AI-Powered Multi-Tenant Admin Platform from Zero

📸Snapshot

📋Context

DealerClick provides website management and digital marketing solutions for automotive dealerships. Each dealer gets a custom website for showcasing inventory, capturing leads, and providing dealership information. The platform serves as the online presence for dealers' businesses. Before this work, the platform had ZERO self-service capabilities for dealers - ALL updates required manual support intervention through a Go API on Hetzner Cloud with PostgreSQL. The platform served 200+ dealer websites but had no admin interface, no dealer authentication system, and content was locked in the database with no UI.

⚠️Problem

Risk if Unresolved

• Business Risk: 10-15% annual churn ($90k ARR loss), $200k+ annual revenue opportunity unrealized from lost sales
• Support Scaling: Need to hire 2-3 additional support staff at $60k each ($120k-$180k/year fixed costs)
• Revenue Stagnation: No premium feature upsell path, missing $10k-$30k/year AI add-on opportunity
• Technical Risk: Database schema increasingly difficult to modify, support scripts brittle, no automated testing
• Competitive Risk: Platform perceived as legacy, competitors actively targeting DealerClick customers with migration offers

🔒Constraints & Requirements

Non-Goals

• Native mobile apps: Web-responsive admin panel sufficient for dealer needs
• Multi-language support: English-only for MVP (Spanish localization deferred)
• Advanced analytics beyond Google Analytics 4: Real-time GA4 dashboard sufficient, no custom analytics engine
• Automated migration: Manual migration scripts acceptable for one-time 200-dealer rollout
• White-label reseller program: B2B direct to dealers only, not building for agencies/resellers
• Advanced A/B testing: Focus on core CMS features first, experimentation infrastructure deferred

🎯Strategy

Decision Rationale

• Full custom build vs. third-party CMS: Upfront 2-3 month investment cheaper than $500-$2000/month forever. Total ownership enables AI features (DALL-E logos, GPT blog generation) that third-party CMS couldn't support.
• 3-layer modular architecture pattern: Critical for solo engineer maintainability. Breaking pages into Layout → Sections → Widgets reduced file sizes 70-85% and enabled reusable components across all CMS screens.
• Progressive rollout (10 → 50 → 200 dealers): De-risked full platform launch. 10-dealer pilot caught auth bugs, 50-dealer phase validated analytics dashboard, 200-dealer rollout proved zero-downtime migration strategy.
• AI features as revenue differentiator: OpenAI integration costs pennies per generation but dealers pay $10-$50 for logo/blog AI tools. New revenue stream funded continued platform development.
• Vercel deployment vs. self-hosted: Free tier sufficient for admin panel traffic, automatic CI/CD via GitHub Actions, edge functions for API routes, zero maintenance overhead vs. managing another server.

🚀Execution

Rollout & Risk Controls

• Feature flags for AI features (controlled rollout, kill switch if OpenAI costs spike)
• Database migrations with rollback scripts (tested in staging environment)
• Progressive dealer migration: 10 pilot → 50 validation → 200 full rollout
• Zero downtime deployment via Vercel (blue-green deployment, instant rollback)
• Support team training before each rollout phase (onboarding scripts, known issues documentation)
• Monitoring dashboards (Sentry error tracking, Vercel analytics, OpenAI usage tracking)
• Backup plan: Manual content management tools still available if admin panel issues

🏗️Architecture

System Components

• Frontend (Next.js 16 + React 19): Server Components for static content, Client Components for interactive forms, Zustand for client state, Tailwind CSS for styling. 3-layer modular architecture (Layout → Sections → Widgets) reduced file sizes 70-85%.
• Backend (Go + PostgreSQL): Existing Go API extended with dealer-facing endpoints, multi-tenant security via dealer_id foreign keys, rate limiting via Upstash Redis, image uploads via Cloudinary, session management via NextAuth.js.
• AI Services: OpenAI DALL-E for logo generation (server-side background removal via sharp), OpenAI GPT-4o-mini for blog post generation, credit-based billing tracked in PostgreSQL.
• Analytics: Google Analytics 4 Data API for real-time dealer dashboards, server-side data fetching to avoid client-side API key exposure.
• Authentication: NextAuth.js with database sessions, role-based access control (owner/manager/staff), multi-tenant isolation via dealer_id claims in JWT tokens.

Data Flows

• Ingress: Dealer logs in via NextAuth.js → JWT token with dealer_id + role → Server Components fetch dealer-specific data from Go API → Client Components for interactive forms.
• CRUD Operations: Client form submit → Next.js API route validates session + dealer_id → Go backend endpoint with multi-tenant security → PostgreSQL update → revalidate Next.js cache → UI updates.
• AI Generation: Dealer requests logo/blog → Next.js API route → OpenAI API call (server-side) → process result (background removal, formatting) → store in Cloudinary/database → deduct credits → return to UI.
• Analytics: Dealer views dashboard → Next.js Server Component → Google Analytics 4 Data API (server-side with service account) → process metrics → render charts → cache for 5 minutes.

🛡️Security

Controls Implemented

• Multi-tenant isolation: dealer_id foreign keys throughout database, NextAuth.js JWT claims include dealer_id, Go backend validates dealer_id on every request
• Role-Based Access Control (RBAC): Owner (full control) → Manager (content management) → Staff (read-only). NextAuth.js session includes role claim, UI conditionally renders based on role.
• Rate limiting: Upstash Redis tracks AI generation requests per dealer (10 logos/day, 20 blog posts/day), prevents abuse and cost spikes
• API key management: OpenAI key in Vercel environment variables (never exposed to client), Google Analytics service account JSON in secure storage
• Session security: NextAuth.js database sessions (no localStorage), HTTP-only cookies, CSRF protection enabled
• Input validation: Zod schemas for all form inputs, server-side validation in Next.js API routes, SQL injection prevention via pgx parameterized queries
• Audit logging: All dealer actions logged (who, what, when) for compliance and debugging

⚙️Operations

📊Results

💡Lessons Learned

📦Artifacts

• Live Admin Panel
• Modular Architecture Docs
• NextAuth.js + RBAC Implementation
• OpenAI Integration Guide
• Progressive Rollout Playbook

Selected Technical Details

// 3-Layer Modular Architecture Pattern
// Layout → Sections → Widgets reduces file sizes 70-85%

// Page Layout (app/admin/inventory/layout.tsx)
export default function InventoryLayout({ children }) {
  return <DashboardShell>{children}</DashboardShell>;
}

// Section Component (app/admin/inventory/sections/InventoryList.tsx)
export function InventoryList() {
  return (
    <Section title="Inventory">
      <InventoryTable />
      <InventoryFilters />
    </Section>
  );
}

// Widget Component (components/widgets/InventoryTable.tsx)
export function InventoryTable() {
  const { data } = useInventory();
  return <Table data={data} />;
}