Using Your Downloaded Template

Your ArchitectGBT template is designed for the modern founder workflow: Ship fast, validate, then build.

What You Get

When you download a template from ArchitectGBT, you get a complete landing page with:

✅ Beautiful, responsive design
✅ Email waitlist ready (works immediately)
✅ Integration guides visible on the page
✅ Placeholders for Clerk, Supabase, Mailerlite
✅ AI model integration (your chosen model)
✅ Ready to deploy in minutes

Think of it as a "progressive enhancement" template - it works great on Day 1, and you add features as you grow.

The 3-Phase Approach

Phase 1: Launch & Validate (Day 1)

Goal: Get your landing page live and start collecting emails

What's included out of the box:

Landing page with Hero, Features, Demo sections
Waitlist section - Collects emails (logs to console initially)
Integration guides - Shows users how to set up services
CTA sections - Drives signups
AI demo - Shows your value proposition

What to do:

Customize content

# Edit these files:
src/components/Hero.tsx        # Your headline
src/components/Features.tsx    # Your features
src/components/WaitlistSection.tsx  # Your CTA

Deploy immediately

npm install
npm run dev  # Test locally

# Then deploy to Vercel
git init
git add .
git commit -m "Launch"
git push

Share your link and collect signups! 📈

You're now live and marketing - No auth, no database needed yet. Just a beautiful landing page collecting emails.

Phase 2: Activate Email Collection (Week 1-2)

Goal: Actually save those emails for marketing

When to do this: When you start getting traction and want to send updates

Option A: Use Mailerlite (Best for marketing)

Perfect if you want to send newsletters, campaigns, automations.

Sign up at mailerlite.com (free tier: 1000 subscribers)
Get your API key
- Go to Developers section
- Create API token
- Copy it

Add to your project

# In .env.local
MAILERLITE_API_KEY=eyJ0eXAi...

Activate the integration
- Open src/app/api/waitlist/route.ts
- Uncomment the "OPTION 1: Mailerlite" code block
- Remove the placeholder code at the bottom

Redeploy

git add .
git commit -m "Add Mailerlite integration"
git push

✅ Done! Emails now save to Mailerlite automatically.

Option B: Use Supabase (Best if you'll add auth later)

Perfect if you plan to build a full app with user accounts.

Create Supabase project at supabase.com

Create waitlist table

create table waitlist (
  id uuid default uuid_generate_v4() primary key,
  email text unique not null,
  created_at timestamp with time zone default timezone('utc'::text, now()),
  source text default 'landing_page'
);

Get your keys from Settings → API

Add to your project

# In .env.local
NEXT_PUBLIC_SUPABASE_URL=https://xxx.supabase.co
SUPABASE_SERVICE_ROLE_KEY=eyJ...

Activate the integration
- Open src/app/api/waitlist/route.ts
- Uncomment the "OPTION 2: Supabase" code block
- Remove the placeholder code
Redeploy

✅ Done! Emails now save to Supabase.

Phase 3: Add Authentication (When Growing)

Goal: Let users create accounts and log in

When to do this: When you're ready to build actual product features beyond the landing page

Use Clerk for auth:

Follow the Clerk Integration Guide
The template already has placeholders - just uncomment them:
- src/app/layout.tsx - ClerkProvider wrapper
- src/middleware.ts - Protected routes
- Components for Sign In/Sign Up
Connect to your waitlist
- Import emails from Mailerlite
- Or query Supabase waitlist table
- Send invitation emails to early users

Now you have:

✅ Landing page collecting emails
✅ User authentication
✅ Protected dashboard/app routes

Phase 4: Build Your Product (When Validated)

Goal: Add database, features, and full functionality

When to do this: When you have validated demand (100+ signups, paid customers, etc.)

Use Supabase for database:

Follow the Supabase Integration Guide
Design your data model
- Create tables for your app data
- Set up Row Level Security (RLS)
- Connect to Clerk user IDs
Build features
- Use the included AI integration
- Add custom API routes
- Build your product UI

Now you have:

✅ Landing page
✅ Email collection
✅ User authentication
✅ Database
✅ Full product features
✅ AI integration

Template Structure

your-project/
├── src/
│   ├── app/
│   │   ├── page.tsx              # Landing page (Phase 1)
│   │   ├── api/
│   │   │   ├── waitlist/         # Email collection (Phase 2)
│   │   │   └── chat/             # AI integration (Phase 4)
│   │   └── dashboard/            # Protected app (Phase 3-4)
│   ├── components/
│   │   ├── Hero.tsx              # Customize this first
│   │   ├── Features.tsx          # Your product features
│   │   ├── WaitlistSection.tsx   # Email signup
│   │   └── IntegrationGuides.tsx # Visible on landing page
│   └── lib/
│       ├── ai.ts                 # AI model integration
│       └── supabase.ts           # Database (Phase 4)
├── .env.example                  # Copy to .env.local
└── README.md                     # Phase-by-phase guide

Key Benefits of This Approach

1. Ship in 1 Day

You don't need to set up auth, database, or email services to launch. Just customize and deploy.

2. Validate First

Collect emails and validate demand before building expensive features.

3. Pay Nothing Initially

Landing page: Free on Vercel
Emails to console: Free
No database costs yet
No auth costs yet

4. Easy Upgrades

Each phase is just uncommenting code and adding API keys. No major refactors.

5. Professional Setup

When you do add features, it's all production-ready code with best practices.

Common Workflows

"I just want to validate my idea"

Phase 1 only:

Customize Hero and Features
Deploy to Vercel
Share link on Twitter/Reddit/HN
See if people sign up (emails log to console)
Decide if worth building

"I'm ready to send updates to signups"

Phase 1 → Phase 2:

Get Mailerlite API key
Uncomment Mailerlite code
Redeploy
Send your first campaign!

"I got 1000 signups, time to build"

Phase 1 → 2 → 3 → 4:

Add Mailerlite for marketing
Add Clerk for user login
Add Supabase for app data
Build your product features
Invite waitlist users to beta

"I have an existing app, just want the landing page"

Use Phase 1 template only:

Use the landing page components
Point "Get Started" to your existing app
Keep collecting emails via your system
Customize everything else

What's Different from Other Templates?

Most templates force you to set up everything upfront:

❌ Must configure auth before deploying
❌ Must set up database before launching
❌ Must add payment before testing
❌ Complicated setup = delayed launch

ArchitectGBT templates are progressive:

✅ Deploy in 5 minutes
✅ Add features as needed
✅ Validate before investing time
✅ Production-ready at every phase

Need Help?

Phase 1 Issues: See Quick Start
Integration Help: See Integration Guides
Deployment: See Vercel Deployment
General Questions: hello@architectgbt.com

Remember: You don't have to do all phases. Many successful products start with just a landing page and email list! 🚀

Quick Links