Integration Guide

Connect Your Workspace
To Real Backend Services

This guide will help you integrate third-party authentication, databases, and membership platforms to make your workspace fully functional with real user accounts and data persistence.

Important: Landingsite.ai Limitations

Landingsite.ai is a frontend-only platform. It cannot:

  • Run server-side code or custom backends
  • Store data in a server-side database
  • Handle Stripe webhooks or verify payments server-side
  • Send server-side emails or hash passwords securely

Solution: Integrate Third-Party Services

Use the platforms below to add authentication, databases, and backend functionality to your workspace.

Quick Comparison

Platform Difficulty Free Tier Best For Setup Time
🟢 Supabase
Medium Yes Full Stack 2-4 hours
🔥 Firebase
Medium Yes Google Users 2-4 hours
👥 Memberstack
Easy $25/mo No-Code 1-2 hours
🔐 Clerk
Easy 10k MAU Auth Only 1 hour
📊 Airtable
Easy Yes Data Storage 1 hour
⚙️ Custom App
Hard Varies Full Control 1-4 weeks

🏆 Our Recommendation: Supabase

For most use cases, we recommend Supabase because:

Free tier is generous (50,000 MAU)
Built-in authentication + database
Real-time subscriptions included
Row-level security for data protection
Storage for files and images
PostgreSQL database (powerful & scalable)
Jump to Supabase Guide
🟢

Supabase Integration

The open-source Firebase alternative with PostgreSQL database, authentication, and real-time subscriptions

Free Tier: 50,000 MAU Setup Time: 2-4 hours Difficulty: Medium
1

Create Supabase Account & Project

1.1 Go to supabase.com and sign up for free

1.2 Create a new project:

  • Project Name: zonepedia-workspace
  • Database Password: Choose a strong password
  • Region: Select closest to your users

1.3 Wait 2-3 minutes for project setup

Note: Save your project URL and API keys (anon key) - you'll need them later

2

Set Up Database Tables

Go to SQL Editor in Supabase and run this SQL:

-- Create users table (extends Supabase auth.users)
CREATE TABLE public.user_profiles (
  id UUID REFERENCES auth.users PRIMARY KEY,
  full_name TEXT,
  plan TEXT NOT NULL DEFAULT 'free',
  ideas_generated INTEGER DEFAULT 0,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Create saved ideas table
CREATE TABLE public.saved_ideas (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  user_id UUID REFERENCES auth.users NOT NULL,
  title TEXT NOT NULL,
  description TEXT,
  data JSONB,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Enable Row Level Security
ALTER TABLE public.user_profiles ENABLE ROW LEVEL SECURITY;
ALTER TABLE public.saved_ideas ENABLE ROW LEVEL SECURITY;

-- Create policies (users can only access their own data)
CREATE POLICY "Users can view own profile" 
  ON public.user_profiles FOR SELECT 
  USING (auth.uid() = id);

CREATE POLICY "Users can update own profile" 
  ON public.user_profiles FOR UPDATE 
  USING (auth.uid() = id);

CREATE POLICY "Users can view own ideas" 
  ON public.saved_ideas FOR SELECT 
  USING (auth.uid() = user_id);

CREATE POLICY "Users can insert own ideas" 
  ON public.saved_ideas FOR INSERT 
  WITH CHECK (auth.uid() = user_id);

CREATE POLICY "Users can delete own ideas" 
  ON public.saved_ideas FOR DELETE 
  USING (auth.uid() = user_id);

This creates secure tables where users can only access their own data

3

Configure Authentication

Go to Authentication → Settings:

Enable Email Authentication

Allow users to sign up with email/password

Add Site URL

Set to: https://zonepedialaunchpad.com

Add Redirect URLs

https://zonepedialaunchpad.com/workspace

Disable Email Confirmation (Optional)

For testing, you can disable email confirmation

4

Get Your API Keys

Go to Project Settings → API

Project URL:

https://xxxxx.supabase.co

Anon/Public Key:

eyJhbGc...

Important: The anon key is safe to use in frontend code. Never expose the service_role key!

5

Add Supabase to Your Workspace Page

You'll need to modify the workspace page to use Supabase instead of localStorage. Here's the code structure:

Add Supabase CDN to workspace page head section:

<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>

Initialize Supabase in your JavaScript:

// Replace with your actual values
const SUPABASE_URL = 'https://xxxxx.supabase.co'
const SUPABASE_ANON_KEY = 'eyJhbGc...'

// Initialize Supabase client
const supabase = window.supabase.createClient(SUPABASE_URL, SUPABASE_ANON_KEY)

// Sign up new user
async function signUp(email, password, fullName, plan) {
  const { data, error } = await supabase.auth.signUp({
    email,
    password,
    options: {
      data: {
        full_name: fullName,
        plan: plan
      }
    }
  })
  
  if (error) {
    console.error('Error signing up:', error)
    return null
  }
  
  // Create user profile
  await supabase.from('user_profiles').insert({
    id: data.user.id,
    full_name: fullName,
    plan: plan
  })
  
  return data
}

// Sign in existing user
async function signIn(email, password) {
  const { data, error } = await supabase.auth.signInWithPassword({
    email,
    password
  })
  
  if (error) {
    console.error('Error signing in:', error)
    return null
  }
  
  return data
}

// Get current user
async function getCurrentUser() {
  const { data: { user } } = await supabase.auth.getUser()
  return user
}

// Sign out
async function signOut() {
  const { error } = await supabase.auth.signOut()
  if (error) console.error('Error signing out:', error)
}

// Save idea
async function saveIdea(userId, title, description, data) {
  const { error } = await supabase.from('saved_ideas').insert({
    user_id: userId,
    title,
    description,
    data
  })
  
  if (error) {
    console.error('Error saving idea:', error)
  }
}

// Get saved ideas
async function getSavedIdeas(userId) {
  const { data, error } = await supabase
    .from('saved_ideas')
    .select('*')
    .eq('user_id', userId)
    .order('created_at', { ascending: false })
  
  if (error) {
    console.error('Error fetching ideas:', error)
    return []
  }
  
  return data
}

Tip: Replace the localStorage code in your workspace JavaScript with these Supabase functions

6

Handle Stripe Payment → Account Creation

Since Landingsite.ai can't handle Stripe webhooks, you have two options:

Option A: Manual Setup

  • Customer pays via Stripe
  • They see "Account Setup" form
  • They create their own account
  • You verify payment manually

Easiest - No code required

Option B: Automated

  • Set up Stripe webhook
  • Create serverless function
  • Auto-create Supabase account
  • Send welcome email

Requires external service (Vercel/Netlify)

Recommended for Starting: Use Option A (manual) to validate your business, then move to Option B when you have consistent sales

What You Get With Supabase

PostgreSQL Database

Powerful, scalable, relational database

Built-in Authentication

Email, social login, magic links

Row Level Security

Users can only access their data

Real-time Subscriptions

Live data updates automatically

File Storage

Upload PDFs, images, documents

Edge Functions

Run serverless code when needed

🔥

Firebase Integration

Google's comprehensive app development platform with authentication, Firestore database, and cloud functions

Free Tier: Generous Limits Setup Time: 2-4 hours

Quick Start

1

Create Firebase Project

Go to console.firebase.google.com

2

Add Web App

Register your app and copy config

3

Enable Authentication

Turn on Email/Password in Auth section

4

Create Firestore Database

Start in test mode, then add security rules

5

Add Firebase SDK

Include in your workspace page

Sample Integration

// Add to workspace head section
<script src="https://www.gstatic.com/firebasejs/10.7.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/10.7.0/firebase-auth-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/10.7.0/firebase-firestore-compat.js"></script>

<script>
// Initialize Firebase
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "your-app.firebaseapp.com",
  projectId: "your-project",
  storageBucket: "your-app.appspot.com",
  messagingSenderId: "123456",
  appId: "YOUR_APP_ID"
};

firebase.initializeApp(firebaseConfig);
const auth = firebase.auth();
const db = firebase.firestore();

// Sign up
auth.createUserWithEmailAndPassword(email, password)
  .then((userCredential) => {
    // Create user profile
    db.collection('users').doc(userCredential.user.uid).set({
      fullName: name,
      plan: plan,
      createdAt: firebase.firestore.FieldValue.serverTimestamp()
    });
  });

// Sign in
auth.signInWithEmailAndPassword(email, password);

// Get current user
auth.onAuthStateChanged((user) => {
  if (user) {
    // User is signed in
    console.log(user);
  }
});
</script>
👥

Memberstack Integration

No-code membership platform - easiest way to add authentication without coding

Paid: $25/month No-Code Setup

Why Choose Memberstack?

Zero Code Required

Add auth with simple HTML attributes

Pre-built UI Components

Login forms, signup forms, user profiles

Stripe Integration

Accept payments and manage subscriptions

Content Gating

Restrict pages based on membership plans

Member Dashboard

Built-in account management for users

Integration Steps

1

Sign up at memberstack.com

Start 14-day free trial

2

Add your domain

zonepedialaunchpad.com

3

Create membership plans

Match your Stripe plans

4

Copy embed code

Add to workspace page head

5

Add HTML attributes

data-ms-member, data-ms-plan, etc.

Perfect For Non-Technical Users

If you don't want to write code, Memberstack is the best option. It handles everything: authentication, payments, member management, and content gating with simple HTML attributes.

Visit Memberstack
🔐

Clerk Integration

Modern authentication with beautiful pre-built UI components

Free: 10,000 MAU Setup: 1 hour

Beautiful UI

Pre-built components that look professional out of the box. Customizable to match your brand.

Secure by Default

Built with security best practices. Handles sessions, tokens, and encryption automatically.

Easy Integration

Simple JavaScript SDK. Add authentication in minutes with just a few lines of code.

Important Note

Clerk is primarily for authentication. You'll still need a database (Supabase, Firebase, or Airtable) to store user data, saved ideas, and other information.

Clerk Documentation
📊

Airtable Integration

Use Airtable as a simple database - great for storing user data and business ideas

Free Tier Available No-Code Friendly

Best For

Simple Data Storage

Store user profiles, saved ideas, form submissions

Easy Manual Management

View and edit data in spreadsheet interface

Quick Prototyping

Test your idea before building complex backend

Limitations

No Built-in Authentication

You'll need another service for login/signup

API Rate Limits

5 requests per second on free tier

Not Real Database

Better for prototypes than production apps

Best Use Case

Combine Airtable with Clerk or Memberstack: Use Clerk/Memberstack for authentication, then use Airtable to store user-generated content and data. Simple and effective!

Airtable API Docs
⚙️

Build a Custom Application

For full control and unlimited possibilities, build a separate app on a subdomain

Advanced: Requires Development Timeline: 1-4 weeks

Recommended Architecture

Marketing Site

zonepedialaunchpad.com

  • Built with Landingsite.ai
  • Home, About, Pricing, Blog
  • Stripe payment links
  • SEO optimized landing pages

Web Application

app.zonepedialaunchpad.com

  • Custom built app (Next.js, React, etc.)
  • User authentication & accounts
  • Workspace dashboard
  • Business idea generation

This is the professional approach: Keep your beautiful marketing site on Landingsite.ai, and build the actual app functionality separately with full backend capabilities.

Technology Stack Options

Next.js Stack

Most Popular

  • Next.js 14 (React)
  • Supabase / Firebase
  • Tailwind CSS
  • TypeScript

Deploy on: Vercel (Free)

Best for: Full-stack apps, SEO, performance

🟢

MERN Stack

Traditional

  • MongoDB
  • Express.js
  • React
  • Node.js

Deploy on: Railway, Render

Best for: Traditional REST APIs

Serverless

Modern

  • Netlify Functions
  • Supabase
  • React / Vue
  • Stripe

Deploy on: Netlify (Free)

Best for: Cost-effective, scalable

Step-by-Step Implementation Plan

1

Set Up Subdomain

Configure DNS to point app.zonepedialaunchpad.com to your hosting provider (Vercel, Netlify, etc.)

In your DNS settings, add a CNAME record:

app → cname.vercel-dns.com
2

Initialize Project

Create a new Next.js app with TypeScript and Tailwind CSS

npx create-next-app@latest zonepedia-app --typescript --tailwind --app
3

Set Up Authentication

Install and configure Supabase or your chosen auth provider

npm install @supabase/supabase-js @supabase/auth-helpers-nextjs
4

Build Core Features

  • User dashboard
  • Business idea generation interface
  • Saved ideas management
  • Account settings page
5

Integrate Stripe Webhooks

Create an API route to handle Stripe payment confirmations

// app/api/webhooks/stripe/route.ts
export async function POST(req: Request) {
  const sig = req.headers.get('stripe-signature')
  // Verify and process webhook
  // Create user account
  // Send welcome email
}
6

Deploy & Test

Deploy to Vercel, set up environment variables, and test the entire flow

vercel --prod
7

Update Marketing Site Links

Change Stripe success URLs to point to your new app subdomain

success_url=https://app.zonepedialaunchpad.com/welcome?session_id={CHECKOUT_SESSION_ID}

Estimated Monthly Costs

Hosting (Vercel/Netlify) $0 - $20
Database (Supabase Free) $0
Email Service (Resend) $0 - $10
Domain (Already have) $0
Total $0 - $30

Costs scale with usage. Most startups operate on free tiers initially.

Development Timeline

Week 1: Setup & Authentication

Project setup, auth flow, basic pages

Week 2: Core Features

Dashboard, idea generation, data management

Week 3: Payment Integration

Stripe webhooks, plan management

Week 4: Polish & Deploy

Testing, bug fixes, production launch

When Should You Build a Custom App?

Choose Custom App If:

  • You need complex business logic
  • You want AI-powered features
  • You need real-time collaboration
  • You're planning to scale significantly
  • You have development resources

Use Third-Party Service If:

  • You want to launch quickly (days not weeks)
  • You're validating the business idea first
  • You don't have development experience
  • You have limited budget
  • Basic auth and data storage is enough

Pro Tip: Start with a third-party service like Supabase or Memberstack. If your business takes off and you need more control, then invest in building a custom app. Don't over-engineer before you have paying customers!

Our Recommendation

The best path forward based on your situation

Just Starting?

Validate your idea first

Use Memberstack

  • No coding required
  • Launch in 1-2 hours
  • $25/month is reasonable
View Memberstack Guide

Can Code?

Build it the right way

Use Supabase

  • Completely free to start
  • Full control & flexibility
  • Scalable to 50k users
View Supabase Guide

Ready to Scale?

Time for a custom app

Build Custom App

  • Unlimited possibilities
  • AI-powered features
  • Full brand control
View Custom App Guide

Your Quick Start Checklist

This Week

Next Week

Need Help?

We're Here to Support You

If you get stuck during integration, don't hesitate to reach out. We can help guide you through the process or recommend developers who specialize in these platforms.