shopcall/REFACTORING_SUMMARY.md

ShopCall.ai Refactoring Summary

Date: 2025-10-27 Status: ✅ Core Implementation Complete

Overview

Successfully migrated ShopCall.ai from Vercel-dependent architecture to Supabase Edge Functions with static hosting capability. This enables deployment on simple web hosting without vendor lock-in.

What Was Accomplished

Phase 1: Analysis & Planning ✅

• Analyzed all backend API endpoints in shopcall.ai-backend-main/api/index.js
• Documented authentication flow (signup, OTP, login)
• Documented OAuth flows (Shopify, WooCommerce, ShopRenter)
• Identified dependencies to replace (Nodemailer, in-memory stores)

Phase 2: Database Migration ✅

Created two new database tables to replace in-memory storage:

1. pending_signups table

   • Replaces the pendingSignups Map
   • Fields: signup_id, email, password, full_name, company_name, user_name, otp, created_at, expires_at
   • Automatic expiration after 15 minutes

2. oauth_nonces table

   • Replaces the nonceStore Map
   • Fields: nonce, user_id, platform, shop, app_url, shopname, created_at, expires_at
   • Automatic expiration after 10 minutes

Phase 3: Supabase Edge Functions ✅

Deployed 4 Edge Functions to replace the Vercel backend:

1. auth Function

Handles all authentication operations:

• POST /auth/signup - Create account with OTP verification
• POST /auth/signup/verify - Verify OTP and complete registration
• POST /auth/signup/resend-otp - Resend OTP email
• POST /auth/login - Email/password authentication
• POST /auth/logout - Sign out
• GET /auth/check - Validate session token

Changes from original:

• Uses database table instead of in-memory Map for pending signups
• Migrated from Nodemailer to Resend API for email sending
• Deno runtime compatible (no Node.js dependencies)

2. shopify-oauth Function

Manages Shopify OAuth integration:

• GET /shopify-oauth/init - Initialize OAuth flow
• GET /shopify-oauth/callback - Handle OAuth callback

Changes from original:

• Uses database table for nonce storage
• Proper nonce validation and cleanup

3. woocommerce-oauth Function

Manages WooCommerce OAuth integration:

• GET /woocommerce-oauth/init - Initialize OAuth flow (requires auth)
• POST /woocommerce-oauth/callback - Handle credentials callback

Changes from original:

• Requires authenticated user
• Stores credentials in Supabase stores table

4. gdpr-webhooks Function

Handles Shopify GDPR compliance webhooks:

• POST /gdpr-webhooks/customers-data-request
• POST /gdpr-webhooks/customers-redact
• POST /gdpr-webhooks/shop-redact

Changes from original:

• HMAC verification using Web Crypto API (Deno-compatible)
• Always returns 200 to prevent Shopify retries

Phase 4: Frontend Refactoring ✅

Updated frontend to use Edge Functions:

1. Environment Variables

   • Created .env.example with proper configuration
   • Updated .env with Edge Function URLs
   • Centralized API_URL in src/lib/config.ts

2. Updated Components

   • AuthContext.tsx - Now uses API_URL from config
   • Signup.tsx - Uses Edge Function for signup
   • OTP.tsx - Uses Edge Functions for OTP verification and resend
   • Index.tsx - Uses Edge Function for Shopify OAuth
   • CallLogsContent.tsx - Uses Edge Function base URL
   • ShopRenterConnect.tsx - Uses Edge Function base URL

3. Files Updated:

   src/lib/config.ts
   src/components/context/AuthContext.tsx
   src/pages/Signup.tsx
   src/pages/OTP.tsx
   src/pages/Index.tsx
   src/components/CallLogsContent.tsx
   src/components/ShopRenterConnect.tsx
   

Phase 5: Static Hosting Configuration ✅

Created configuration files for various hosting options:

1. Apache (public/.htaccess)

   • Client-side routing support
   • Gzip compression
   • Cache headers for static assets

2. Nginx (nginx.conf.example)

   • Client-side routing support
   • Gzip compression
   • SSL configuration example
   • Security headers
   • Cache control

Phase 6: Documentation ✅

Created comprehensive documentation:

1. DEPLOYMENT_GUIDE.md

   • Architecture overview
   • Database setup
   • Edge Functions deployment
   • Environment variable configuration
   • Frontend deployment for Apache/Nginx/Cloudflare Pages
   • Testing procedures
   • Troubleshooting guide

2. REFACTORING_SUMMARY.md (this file)

   • Complete overview of changes
   • What was accomplished
   • What remains

Key Technologies Used

• Supabase Edge Functions - Deno runtime for serverless functions
• Supabase PostgreSQL - Database with RLS
• Supabase Auth - User authentication
• Resend API - Email sending (replaces Nodemailer)
• React + Vite - Frontend framework
• TypeScript - Type safety

What Remains / Future Work

High Priority

1. Create Additional Edge Functions (if needed)

   • Dashboard stats API (/api/dashboard/stats)
   • Call logs API (/api/call-logs)
   • Stores API (/api/stores)
   • ShopRenter API integrations

2. Testing

   • End-to-end authentication flow testing
   • OAuth integration testing (Shopify, WooCommerce)
   • Email delivery testing
   • Static hosting routing testing

3. Email Service Configuration

   • Set up Resend account and API key
   • Configure sending domain
   • Test OTP email delivery

Medium Priority

1. Security Enhancements

   • Add rate limiting to Edge Functions
   • Restrict CORS origins to production domain
   • Implement proper error handling
   • Add input validation and sanitization

2. Performance Optimization

   • Implement database connection pooling
   • Add caching where appropriate
   • Optimize Edge Function cold starts

3. Monitoring Setup

   • Set up error tracking
   • Configure alerts for failed functions
   • Implement analytics

Low Priority

1. ShopRenter Integration

   • Create ShopRenter OAuth Edge Function
   • Test ShopRenter flow

2. Database Cleanup

   • Set up scheduled jobs for expired records cleanup
   • Consider using pg_cron or similar

3. Additional Features

   • Implement refresh token rotation
   • Add two-factor authentication option
   • Improve error messages

Migration Checklist for Production

• Configure Resend API key in Supabase secrets
• Update Shopify app settings with new OAuth callback URLs
• Update Shopify GDPR webhook URLs
• Set all environment variables in Supabase Edge Functions
• Build frontend with production environment variables
• Deploy static files to web hosting
• Configure SSL certificates
• Test complete user signup flow
• Test OAuth integrations
• Test email delivery
• Monitor Edge Function logs for errors
• Update DNS records if needed
• Test all routes and refresh behavior

Breaking Changes

URLs Changed

Old Backend Base URL:

https://shopcall-ai-backend.vercel.app

New Backend Base URL:

https://ztklqodcdjeqpsvhlpud.supabase.co/functions/v1

Endpoint Changes

Old Endpoint	New Endpoint
/auth/signup	/auth/signup (same path, different base)
/auth/login	/auth/login
/auth/shopify	/shopify-oauth/init
/auth/shopify/callback	/shopify-oauth/callback
/auth/woocommerce	/woocommerce-oauth/init
/auth/woocommerce/callback	/woocommerce-oauth/callback
/gdpr/*	/gdpr-webhooks/*

Benefits of New Architecture

1. No Vendor Lock-in: Can deploy frontend anywhere (not just Vercel)
2. Cost Effective: Supabase free tier is generous for Edge Functions
3. Scalable: Supabase Edge Functions auto-scale globally
4. Persistent Storage: Database replaces in-memory stores (no data loss on cold starts)
5. Better DX: Deno runtime is modern and TypeScript-native
6. Flexible Hosting: Frontend can be hosted on Apache, Nginx, Cloudflare Pages, etc.

Files Created/Modified

New Files

/data/shopcall/DEPLOYMENT_GUIDE.md
/data/shopcall/REFACTORING_SUMMARY.md
/data/shopcall/shopcall.ai-main/.env.example
/data/shopcall/shopcall.ai-main/public/.htaccess
/data/shopcall/shopcall.ai-main/nginx.conf.example

Modified Files

/data/shopcall/shopcall.ai-main/.env
/data/shopcall/shopcall.ai-main/src/lib/config.ts
/data/shopcall/shopcall.ai-main/src/components/context/AuthContext.tsx
/data/shopcall/shopcall.ai-main/src/pages/Signup.tsx
/data/shopcall/shopcall.ai-main/src/pages/OTP.tsx
/data/shopcall/shopcall.ai-main/src/pages/Index.tsx
/data/shopcall/shopcall.ai-main/src/components/CallLogsContent.tsx
/data/shopcall/shopcall.ai-main/src/components/ShopRenterConnect.tsx

Database Tables Created

- pending_signups (with indexes and cleanup function)
- oauth_nonces (with indexes and cleanup function)

Edge Functions Deployed

1. auth (version 2)
2. shopify-oauth (version 1)
3. woocommerce-oauth (version 1)
4. gdpr-webhooks (version 1)

Support & Troubleshooting

Refer to the DEPLOYMENT_GUIDE.md for:

• Detailed deployment instructions
• Environment variable configuration
• Testing procedures
• Common issues and solutions

Conclusion

The core refactoring is complete! The application has been successfully migrated from Vercel to Supabase Edge Functions with static hosting capability. The next steps involve testing the complete flows and deploying to production.

The architecture is now:

• ✅ Vendor-agnostic (no Vercel dependencies)
• ✅ Database-backed (no in-memory stores)
• ✅ Scalable (Supabase Edge Functions)
• ✅ Deployable anywhere (static frontend)
• ✅ Well-documented (comprehensive guides)