Skip to content

Setup & Installation Guide

Overview

This guide covers the complete setup process for ConnectGain, including environment configuration, dependencies, and deployment.

Prerequisites

Required Accounts

  • Supabase Account - For backend services
  • AppGain Account (optional) - For WhatsApp Lite
  • Meta Business Account (optional) - For WhatsApp Cloud, Messenger, Instagram
  • Stripe Account (optional) - For payment processing

Development Tools

  • Node.js 18+ and npm
  • Git - Version control
  • Code Editor - VS Code recommended
  • Supabase CLI - For local development

Local Development Setup

Step 1: Clone Repository

git clone <repository-url>
cd connectgain

Step 2: Install Dependencies

npm install

Step 3: Environment Variables

Create .env.local file:

VITE_SUPABASE_URL=https://txpaxbxhnvnhsjwwaeoy.supabase.co
VITE_SUPABASE_ANON_KEY=your_anon_key_here
VITE_STRIPE_PUBLIC_KEY=your_stripe_key_here

Step 4: Start Development Server

npm run dev

Application will be available at http://localhost:5173

Production Deployment

Frontend Deployment (Vercel)

  1. Connect Repository
  2. Import project to Vercel

  3. Connect GitHub repository

  4. Configure Environment Variables

  5. Add all required environment variables

  6. Set production values

  7. Deploy

  8. Vercel automatically deploys on push

  9. Or trigger manual deployment

  10. Configure Domain

  11. Add custom domain
  12. Configure DNS

Frontend Deployment (Netlify)

  1. Connect Repository
  2. Import project to Netlify

  3. Connect Git repository

  4. Build Settings

  5. Build command: npm run build

  6. Publish directory: dist

  7. Environment Variables

  8. Add environment variables

  9. Set production values

  10. Deploy

  11. Deploy automatically or manually

Edge Functions Deployment

# Install Supabase CLI
npm install -g supabase

# Login to Supabase
supabase login

# Link project
supabase link --project-ref your-project-ref

# Deploy function
supabase functions deploy function-name

Database Setup

Initial Migration

# Apply migrations
supabase db push

# Or via Supabase Dashboard
# Go to SQL Editor → Run migrations

Required Extensions

-- Enable required extensions
CREATE EXTENSION IF NOT EXISTS "uuid-ossp";
CREATE EXTENSION IF NOT EXISTS "pgcrypto";

Seed Data (Optional)

# Run seed script
npm run seed

Channel Configuration

WhatsApp Lite Setup

  1. Get AppGain Account
  2. Sign up at AppGain

  3. Get Suit ID

  4. Configure in ConnectGain

  5. Go to Settings → Channels
  6. Add WhatsApp Lite
  7. Enter Suit ID
  8. Connect

WhatsApp Cloud Setup

  1. Meta Business Setup
  2. Create Meta Business Account
  3. Set up WhatsApp Business API

  4. Get access token and phone number ID

  5. Configure Webhook

  6. Webhook URL: https://your-project.supabase.co/functions/v1/whatsapp-cloud-webhook
  7. Subscribe to messages events

  8. Verify webhook

  9. Configure in ConnectGain

  10. Go to Settings → Channels
  11. Add WhatsApp Cloud
  12. Enter credentials
  13. Connect

Other Channels

Similar setup process for: - Facebook Messenger - Instagram - Telegram - TikTok

Security Configuration

API Keys

  1. Generate API Keys
  2. Go to Settings → API Keys
  3. Generate new key

  4. Store securely

  5. Set Permissions

  6. Configure key permissions
  7. Set expiration (optional)

Webhook Security

  1. Configure Webhook Secrets
  2. Generate secret
  3. Store in environment variables

  4. Configure in webhook settings

  5. Verify Signatures

  6. Webhooks verify HMAC signatures
  7. Ensure secrets match

Monitoring Setup

Error Tracking

  1. Configure Error Logging
  2. Set up error tracking service
  3. Configure error boundaries
  4. Monitor Edge Function logs

Analytics

  1. Set Up Analytics
  2. Configure analytics service
  3. Track key metrics
  4. Set up dashboards

Backup Configuration

Database Backups

  1. Automatic Backups
  2. Supabase provides automatic backups
  3. Configure backup retention
  4. Test restore process

Manual Backups

# Export database
supabase db dump > backup.sql

# Restore database
supabase db reset < backup.sql

Performance Optimization

Frontend Optimization

  1. Build Optimization
  2. Enable code splitting
  3. Optimize images

  4. Minify assets

  5. Caching

  6. Configure CDN caching
  7. Set cache headers
  8. Use service workers

Backend Optimization

  1. Database Indexing
  2. Add indexes for frequent queries
  3. Optimize slow queries

  4. Monitor query performance

  5. Edge Functions

  6. Optimize function code
  7. Set appropriate timeouts
  8. Monitor function performance

Testing Setup

Unit Tests

npm run test

Integration Tests

npm run test:integration

E2E Tests

npm run test:e2e

Troubleshooting Setup Issues

Common Issues

  1. Environment Variables Not Loading
  2. Check .env.local file exists
  3. Verify variable names match

  4. Restart dev server

  5. Database Connection Failed

  6. Verify Supabase URL and key
  7. Check network connectivity

  8. Verify RLS policies

  9. Edge Functions Not Deploying

  10. Check Supabase CLI version
  11. Verify project link
  12. Review function code

Last Updated: January 2025