shopcall/TODO.md

ShopCall.ai Refactoring TODO

Project Goal

Refactor the entire project to remove Vercel dependencies and enable static hosting on simple webhosting. Use Supabase Edge Functions for backend functionality.

---

Phase 1: Analysis & Planning

• Analyze current backend API endpoints in shopcall.ai-backend-main/api/index.js
  • Document all authentication endpoints (signup, login, OTP, logout)
  • Document OAuth flows (Shopify, WooCommerce)
  • Document GDPR webhook endpoints
  • Document helper functions (generateOTP, sendOTPEmail, etc.)
• Identify current dependencies and integrations
  • Nodemailer for email sending → Replaced with Resend
  • In-memory stores (pendingSignups, nonceStore) → Replaced with database tables
  • Supabase client usage patterns
• Design Edge Functions architecture
  • Plan function structure and organization
  • Plan shared utilities and dependencies

---

Phase 2: Database Migration

• Create Supabase database tables to replace in-memory stores
  • Create pending_signups table (replace pendingSignups Map)
  • Fields: signup_id, email, password, full_name, company_name, user_name, otp, created_at, expires_at
  • Create oauth_nonces table (replace nonceStore Map)
  • Fields: nonce, user_id, platform, shop, app_url, shopname, created_at, expires_at
  • Add TTL/cleanup mechanism for expired records (cleanup functions created)
• Update existing stores table if needed (already has required fields)
• Create database migration files (applied via Supabase MCP)
• Test database schema with sample data

---

Phase 3: Supabase Edge Functions Setup

• Set up Supabase Edge Functions project structure
  • Used Supabase MCP tool for deployment
  • Created modular function structure
  • Shared utilities (cors.ts, email.ts, oauth.ts)
• Create Edge Function for authentication endpoints
  • /auth/signup - Store user data and send OTP
  • /auth/signup/verify - Verify OTP and create user
  • /auth/signup/resend-otp - Resend OTP email
  • /auth/login - Email/password login
  • /auth/logout - Sign out
  • /auth/check - Validate session token
• Create Edge Function for Shopify integration
  • /shopify-oauth/init - Initialize OAuth flow
  • /shopify-oauth/callback - Handle OAuth callback
• Create Edge Function for WooCommerce integration
  • /woocommerce-oauth/init - Initialize OAuth flow (requires auth)
  • /woocommerce-oauth/callback - Handle OAuth callback
• Create Edge Function for GDPR webhooks
  • /gdpr-webhooks/customers-data-request - Customer data request
  • /gdpr-webhooks/customers-redact - Customer redaction
  • /gdpr-webhooks/shop-redact - Shop redaction
• Implement email sending in Edge Functions
  • Research Edge Function email options → Chose Resend
  • Implement OTP email templates
  • Replace Nodemailer functionality
• Create shared utilities for Edge Functions
  • OTP generation and validation (email.ts)
  • Email templates and sending (email.ts)
  • URL normalization and validation (oauth.ts)
  • HMAC webhook verification (in gdpr-webhooks)
  • CORS headers (cors.ts)

---

Phase 4: Frontend Refactoring

• Update frontend to use environment variables
  • Create .env.example file
  • Replace hardcoded backend URL (https://shopcall-ai-backend.vercel.app)
  • Add Supabase Edge Function base URL configuration
• Update API calls to use Edge Functions
  • Update AuthContext to call Edge Functions
  • Update all API endpoints in components (6 files updated)
  • Test authentication flow
• Configure Vite for static build
  • Review vite.config.ts for static hosting (already configured)
  • Proper base path configuration exists
  • Build output directory configured (dist/)
• Add client-side routing support for static hosting
  • Create .htaccess for Apache hosting
  • Create nginx.conf example for Nginx hosting
  • Handle 404 fallback to index.html
• Remove Vercel dependencies (optional - can keep for now)
  • Delete vercel.json from frontend
  • Remove any Vercel-specific code
• Update environment handling
  • Use Vite's import.meta.env
  • Centralized in src/lib/config.ts

---

Phase 5: Backend Cleanup

• Remove Vercel-specific files from backend
  • Delete vercel.json
  • Archive api/index.js (keep for reference)
• Move backend code to Edge Functions
  • Ensure all functionality is migrated
  • Delete unused files
• Update .gitignore for both projects
  • Ensure proper ignoring of build artifacts
  • Ignore environment files
  • Ignore Supabase local dev files

---

Phase 6: Deployment & Testing

• Deploy Edge Functions to Supabase
  • Configure Edge Function secrets
  • Set up environment variables in Supabase
  • Deploy each function
  • Test Edge Function endpoints
• Build frontend for static hosting
  • Run production build (npm run build)
  • Test build output locally
  • Verify all routes work correctly
  • Test with different hosting scenarios
• End-to-end testing
  • Test authentication flow (signup, OTP, login)
  • Test Shopify OAuth integration
  • Test WooCommerce OAuth integration
  • Test dashboard and protected routes
  • Test GDPR webhook endpoints
• Performance testing
  • Test Edge Function response times
  • Test static hosting performance
  • Optimize bundle size if needed

---

Phase 7: Documentation

• Create deployment guide for static hosting
  • Apache hosting setup with .htaccess
  • Nginx hosting setup with config
  • Environment variable configuration
  • Edge Functions deployment steps
• Create DEPLOYMENT_GUIDE.md
  • Document new Edge Functions architecture
  • Deployment instructions for multiple hosting options
  • Environment variable configuration
  • Testing procedures
  • Troubleshooting section
• Create REFACTORING_SUMMARY.md
  • Complete overview of all changes
  • What was accomplished
  • What remains to be done
  • Migration checklist
• Update CLAUDE.md (optional)
  • Document new Edge Functions architecture
  • Update deployment instructions
  • Remove Vercel-specific information
  • Add static hosting requirements

---

Phase 8: Final Review

• Code review and cleanup
  • Remove unused dependencies
  • Clean up commented code
  • Ensure consistent code style
• Security review
  • Verify no secrets in code
  • Check CORS configuration
  • Verify authentication flows
  • Test Edge Function security
• Final testing
  • Complete end-to-end test
  • Test on actual static hosting
  • Verify all features work
• Git repository cleanup
  • Commit all changes
  • Create proper commit messages
  • Tag release version

---

Notes

Current Architecture

• Frontend: React/Vite at shopcall.ai-main/ (deployed to Vercel)
• Backend: Express.js serverless function at shopcall.ai-backend-main/api/index.js (deployed to Vercel)
• Database: Supabase PostgreSQL
• Authentication: Supabase Auth

Target Architecture

• Frontend: Static React build (hosted on simple webhosting)
• Backend: Supabase Edge Functions (Deno runtime)
• Database: Supabase PostgreSQL (unchanged)
• Authentication: Supabase Auth (unchanged)

Key Considerations

• Edge Functions use Deno runtime (not Node.js)
• Need to replace Nodemailer with Deno-compatible email solution
• In-memory stores must move to Supabase database
• Frontend needs proper routing configuration for static hosting
• Environment variables must be properly managed for static hosting

Dependencies to Replace

• ❌ Vercel serverless functions → ✅ Supabase Edge Functions
• ❌ Nodemailer → ✅ Deno-compatible email service (Resend/SendGrid)
• ❌ In-memory Maps → ✅ Supabase database tables
• ❌ Hardcoded URLs → ✅ Environment variables

---

Progress Tracking

Status: ✅ Core Implementation Complete - Testing Phase Last Updated: 2025-10-27 Current Phase: Phase 6 - Deployment & Testing

Summary of Completed Work

• ✅ Phase 1: Analysis & Planning - COMPLETE
• ✅ Phase 2: Database Migration - COMPLETE (testing pending)
• ✅ Phase 3: Edge Functions Setup - COMPLETE
• ✅ Phase 4: Frontend Refactoring - COMPLETE (testing pending)
• ⏭️ Phase 5: Backend Cleanup - SKIPPED (can keep old code for reference)
• 🔄 Phase 6: Deployment & Testing - IN PROGRESS
• ✅ Phase 7: Documentation - COMPLETE
• ⏸️ Phase 8: Final Review - PENDING

What's Ready

• Database tables created and configured
• 4 Edge Functions deployed (auth, shopify-oauth, woocommerce-oauth, gdpr-webhooks)
• Frontend updated to use Edge Functions
• Static hosting configuration files created
• Comprehensive documentation written

What Needs Testing

• Complete authentication flow (signup → OTP → verify → login)
• OAuth integrations (Shopify, WooCommerce)
• Email delivery (Resend API needs to be configured)
• Static hosting routing
• GDPR webhooks

Next Steps

1. Configure Resend API key in Supabase
2. Test authentication flow end-to-end
3. Test OAuth integrations
4. Deploy to production hosting
5. Update OAuth callback URLs in provider settings