Dealer Website Platform Rebuild: Basic Inventory to Full SaaS

📸Snapshot

📋Context

DealerClick's dealer website platform was built on Gatsby (static site generator) as a basic MVP: inventory listings, vehicle detail pages, and simple contact forms. No blog. No location pages. No AI chat. No real credit application. No dealer tools. The stack was fundamentally limited—Gatsby great for blogs but terrible for dynamic features (AI chat, real-time inventory). Zero SEO infrastructure (no sitemaps, no structured data, poor metadata, no canonical URLs). Zero dealer tools (all content changes required emailing engineering). Dealers couldn't rank for local searches, missed "near me" searches, had no content marketing strategy. Competitors offered AI chat, blogs, location pages, real credit applications. Framework risk—Gatsby ecosystem stagnating, build times increasing (10-15 minutes), community shrinking. Critical business trigger: Dealers leaving for competitors with better features, can't charge premium pricing without premium features, support tickets overwhelming (dealers emailing for basic content changes), SEO disadvantage hurting dealer ROI (fewer organic leads = lower website value).

⚠️Problem

Risk if Unresolved

• Business Risk: 20-30% annual churn as dealers leave for platforms with AI chat, blogs, location SEO, prequalification
• Lost Revenue: Can't charge $500+/month premium pricing without premium features ($200/month commodity pricing instead)
• Support Burden: Unsustainable support ticket volume (100+ tickets/month for basic content changes)
• Competitive Disadvantage: Falling further behind competitors innovating with AI, advanced SEO tools
• Technical Risk: Framework obsolescence, scalability issues (build times increasing), security vulnerabilities (outdated dependencies with CVEs)

🔒Constraints & Requirements

Non-Goals

• Native mobile apps: Web-first approach (responsive mobile web, not iOS/Android native apps—can add later if demand justifies)
• Multi-language: English only for MVP (Spanish localization can be added if dealers request)
• Voice search: Not in scope for V1 (Alexa/Google Assistant integration nice-to-have for future)
• VR showroom: Not in scope (3D vehicle viewing, virtual test drives—cool but not essential)
• Advanced A/B testing: Focus on core features first, experimentation infrastructure can follow
• White-label reseller program: B2B direct to dealers only (not building for resellers/agencies)

🎯Strategy

Decision Rationale

• Full rebuild vs. incremental updates: 1-2 month rebuild (higher risk) vs 1-2 week incremental (safer). Full rebuild necessary to compete long-term. Incremental updates on Gatsby don't solve root problems. Mitigation: Phased rollout (foundation → SEO → blog → locations → AI chat → credit app), thorough testing on staging.
• OpenAI API costs vs. rule-based chatbot: OpenAI ($0.15 per 1M input tokens, $0.60 per 1M output tokens) vs free rule-based chatbot. OpenAI provides dramatically better UX (natural language understanding, context awareness, function calling). Cost negligible for premium SaaS ($500+/month vs $0.50/month OpenAI cost per dealer).
• 700Credit integration vs. simple credit form: 700Credit integration (harder, compliance requirements, per-pull fees) vs simple form (easier, no compliance). Real credit integration provides massive value (qualify leads upfront, filter tire-kickers, dynamic pricing based on credit score). Competitive differentiator. Per-pull fees passed to dealers ($15-30 per credit check, acceptable for qualified lead).
• Zero CMS costs strategy: If you already have backend with database (DealerClick CRM), why pay $200-800/month for separate CMS (Contentful, Sanity)? Build simple admin dashboard instead. ROI immediate (no ongoing CMS fees), full control over data model, no vendor lock-in.

🚀Execution

Rollout & Risk Controls

• Phased rollout: Foundation → SEO → blog → locations → AI chat → credit app (iterative, validate each phase before next)
• Thorough testing on staging environment (2 days of dealer testing before DNS cutover)
• DNS cutover only after dealer approval (zero downtime deployment strategy)
• Feature flags for AI features (controlled rollout, kill switch if OpenAI costs spike)
• Database migrations with rollback scripts (tested in staging environment)
• Zero downtime deployment via Docker (blue-green deployment, instant rollback)
• Monitoring dashboards (Sentry error tracking, Lighthouse CI performance regression, Google Analytics 4)
• Backup plan: Old Gatsby site still available if critical issues discovered (DNS rollback)

🏗️Architecture

System Components

• Frontend (Next.js 14 + React 18): Server Components for static content (inventory listings, blog posts, location pages—zero JavaScript by default), Client Components for interactive forms (contact, credit application, filters—opt-in client hydration only where needed), Zustand for client state (blogStore, chatStore, inventoryStore, favoritesStore, compareStore—client-side caching prevents redundant API calls), Tailwind CSS + Shadcn/ui for styling.
• Backend (DealerClick Go + PostgreSQL): Existing Go API extended with dealer-facing endpoints (blog CRUD, inventory search, lead submission, content management), multi-tenant security via dealer_id foreign keys, API key authentication.
• AI Services: OpenAI GPT-4o-mini (gpt-4o-mini-2024-07-18) for chatbot with 5 function calling capabilities (searchInventory, getVehicleDetails, getDealershipInfo, getFAQs, suggestNavigation), 10-message conversation history for context, server-side API calls (never expose OpenAI key to client).
• Credit Services: 700Credit API for soft pull pre-screening (real TransUnion credit check, no impact on credit score) + hard pull for full application (explicit consent required), dynamic pricing based on actual credit score, SSN encryption (AES-256-GCM server-side, never stored in plaintext).
• SEO Infrastructure: 3 sitemaps (main sitemap, blog sitemap, image sitemap—all dynamic, auto-generated), JSON-LD structured data (BlogPosting for blog posts, FAQPage for FAQ, BreadcrumbList for navigation, Product for vehicles), NAP consistency checker (/api/seo/nap-check - validates Name, Address, Phone consistency across pages), internal linking strategy generator (/api/seo/internal-links).
• Security & Performance: Cloudflare Turnstile CAPTCHA (free tier, invisible challenge—no annoying "check the boxes" UX), rate limiting (5 credit applications per IP per day via Redis), SSN encryption (AES-256-GCM server-side), honeypot spam protection (hidden username field), Zod validation (schema validation on all forms, server-side validation), Sharp image optimization (WebP/AVIF), Workbox service workers (offline cache), Sentry monitoring (error tracking, performance monitoring, security event logging).

Data Flows

• Ingress: User visits dealer website → Next.js Server Components fetch from DealerClick CRM → render pure HTML (zero JavaScript for inventory listings, blog posts) → Client Components for forms (contact, credit application, filters) → form submit → Next.js API route → DealerClick CRM → lead created.
• Blog CRUD: Dealer creates blog post → /api/blog-posts endpoint → Zustand blogStore updates client cache → Next.js revalidates ISR (5-minute cache) → blog listing/detail pages updated.
• AI Chat: User asks question → ChatWidget component → /api/chat endpoint → OpenAI GPT-4o-mini with function calling → searchInventory() / getDealershipInfo() / getFAQs() → response with context (last 10 messages) → display in ChatWidget.
• Credit Application: User fills 6-step form → Cloudflare Turnstile CAPTCHA validation → Zod schema validation → /api/credit endpoint → SSN encryption (AES-256-GCM server-side) → 700Credit API call (soft pull pre-screening) → dynamic pricing based on credit score → return pre-approval decision.
• SEO: Google crawler visits → Next.js Server Components → dynamic sitemap generation (main, blog, image) → JSON-LD structured data (BlogPosting, FAQPage, BreadcrumbList, Product) → canonical URLs + hreflang tags → Open Graph + Twitter meta tags → rich snippets in Google results.

🛡️Security

Controls Implemented

• Cloudflare Turnstile CAPTCHA: Applied to credit application form (prevent bot spam), applied to contact form (honeypot backup), free tier (unlimited requests for non-commercial use), invisible challenge (no annoying "check the boxes" UX)
• SSN Encryption: AES-256-GCM server-side encryption (symmetric key stored in environment variable, never committed to git), SSN never stored in plaintext (encrypted before sending to 700Credit API), encryption key rotation (manual process, documented in runbook), lib/server/decrypt.ts - server-side only, never bundled in client JavaScript
• Rate Limiting: 5 credit applications per IP per day (prevent abuse, bill shock from excessive 700Credit API calls), configurable via environment variable (CREDIT_APP_RATE_LIMIT), Redis-based (in-memory store for rate limit counters, TTL 24 hours)
• Honeypot Fields: Hidden username field on contact forms (invisible to humans via CSS, filled by bots), if honeypot filled return 200 OK (silent success) but don't create lead (waste bot's time)
• Zod Validation: Schema validation on all forms (contact, credit application, blog post creation), server-side validation (never trust client, validate again on server), type-safe error messages (Zod infers TypeScript types, prevents runtime errors)
• Sentry Monitoring: Error tracking (production errors sent to Sentry, alerts via Slack), security event logging (failed credit applications, honeypot triggers, rate limit violations), performance monitoring (slow API routes, large bundle sizes)

⚙️Operations

📊Results

💡Lessons Learned

📦Artifacts

• Live Demo Site
• Next.js 14 Codebase
• SEO Implementation (Sitemaps, JSON-LD)
• OpenAI Function Calling Guide
• 700Credit Integration Docs

Selected Technical Details

// OpenAI Function Calling for Automotive Chatbot
const functions = [
  {
    name: 'searchInventory',
    description: 'Search vehicle inventory by make, model, year, price range',
    parameters: {
      type: 'object',
      properties: {
        make: { type: 'string', description: 'Vehicle make (e.g., Toyota, Ford)' },
        model: { type: 'string', description: 'Vehicle model (e.g., Camry, F-150)' },
        year: { type: 'number', description: 'Vehicle year' },
        priceRange: { type: 'string', description: 'Price range (e.g., "10000-20000")' }
      }
    }
  },
  // ... other functions (getVehicleDetails, getDealershipInfo, getFAQs, suggestNavigation)
]

// OpenAI API call with function calling
const response = await openai.chat.completions.create({
  model: 'gpt-4o-mini',
  messages: conversationHistory,
  functions,
  function_call: 'auto',
})