Getting Started with Your Boilerplate

Welcome! You've purchased the AI Startup SEO boilerplate and received GitHub access. This guide walks you through the next steps: cloning the code, working in your IDE, making it yours, and deploying.

⏱️ Time Required: 1-2 hours for complete setup

📌 Prerequisites:

• ✅ GitHub account connected (see dashboard)
• ✅ License key received
• ✅ Basic familiarity with command line (we'll explain everything!)

---

📖 What You'll Learn

1. ✅ Clone the private repository to your computer
2. ✅ Open and work in your favorite IDE (VS Code, Cursor, Claude Code)
3. ✅ Create your own private repository
4. ✅ Customize branding and features
5. ✅ Pull updates from us in the future

---

Step 1: Accept GitHub Invitation

1.1 Check Your Email or GitHub Notifications

After connecting your GitHub account on the dashboard, you'll receive an invitation.

Where to find it:

• 📧 Email: Check inbox for "You've been invited to join..."
• 🔔 GitHub: https://github.com/notifications
• 🔗 Direct: https://github.com/jveritas/aistartupseo-boilerplate/invitations

1.2 Accept the Invitation

1. Click the invitation link
2. Click "Accept invitation"
3. You now have read-only access! ✅

What this means:

• ✅ You can clone (download) the repository
• ✅ You can pull (get updates) from us
• ❌ You cannot push (upload) changes to our repo
• ❌ You cannot delete our repository

This is normal and expected! You'll create your own repository next.

---

Step 2: Install Required Tools

2.1 Install Git

Already have Git? Skip this step.

Check if installed:

git --version
# If you see a version number (e.g., "git version 2.x.x"), you're good!

Don't have Git?

• Windows: Download from https://git-scm.com/download/win
• Mac: Run brew install git or download from https://git-scm.com/download/mac
• Linux: Run sudo apt install git (Ubuntu/Debian) or sudo yum install git (CentOS)

2.2 Install Node.js

You need Node.js 18 or higher (20 recommended).

Check if installed:

node --version
# Should show v18.x.x or v20.x.x

Don't have Node.js?

• Download from: https://nodejs.org (get the LTS version)
• Or use NVM: https://github.com/nvm-sh/nvm

2.3 Choose Your IDE

Pick ONE of these (we recommend VS Code for beginners):

Option A: VS Code (Recommended for beginners)

• Download: https://code.visualstudio.com
• Free, easy to use, huge community
• Extensions recommended:
  • Prisma (for database)
  • Tailwind CSS IntelliSense
  • ESLint

Option B: Cursor (AI-powered VS Code fork)

• Download: https://cursor.sh
• Built-in AI assistant
• Same interface as VS Code

Option C: Claude Code (What we use!)

• Install: npm install -g @anthropic-ai/claude-code
• AI agent that writes code for you
• Works in terminal + has VS Code extension
• Requires Anthropic API key

For this guide, we'll use VS Code examples. Commands work the same in all IDEs.

---

Step 3: Clone the Repository

3.1 Create a Project Folder

Open your terminal (Command Prompt on Windows, Terminal on Mac/Linux):

# Navigate to where you want your projects
cd ~/Desktop  # Or any folder you prefer

# Create a folder for your SaaS projects
mkdir my-saas-projects
cd my-saas-projects

3.2 Clone Our Repository

# Clone the boilerplate
git clone https://github.com/jveritas/aistartupseo-boilerplate.git my-awesome-saas

# Navigate into it
cd my-awesome-saas

Replace my-awesome-saas with your project name (use lowercase, hyphens instead of spaces).

What just happened?

• Git downloaded all 50,000+ lines of code to your computer
• You now have a complete copy in my-awesome-saas/ folder
• This is YOUR copy - modify anything you want!

3.3 Verify It Worked

ls  # Mac/Linux
dir # Windows

# You should see:
# src/  prisma/  public/  package.json  README.md  etc.

✅ Success! You now have the code locally.

---

Step 4: Open in Your IDE

Using VS Code:

code .

This opens VS Code with your project.

Alternative: Open VS Code → File → Open Folder → Select my-awesome-saas

Using Cursor:

cursor .

Using Claude Code:

claude-code

What you'll see:

• Sidebar with folders: src/, prisma/, public/, etc.
• File explorer showing all code
• Terminal at the bottom (very important!)

---

Step 5: Create YOUR Own Private Repository

Why? You can't push changes to our repository (it's read-only). You need your own!

5.1 Create a New GitHub Repository

1. Go to: https://github.com/new
2. Repository name: my-awesome-saas (or your project name)
3. Description: (optional) "My SaaS built with AI Startup SEO boilerplate"
4. Visibility: ⚠️ Private (very important!)
5. Do NOT check "Add README" or "Add .gitignore" (we already have these)
6. Click "Create repository"

5.2 Link Your Project to Your Repository

In your terminal (inside your project folder):

# Remove connection to our repository
git remote remove origin

# Add YOUR repository as the new origin
git remote add origin https://github.com/YOUR-USERNAME/my-awesome-saas.git

# Replace YOUR-USERNAME with your actual GitHub username!
# Example: git remote add origin https://github.com/john-doe/my-awesome-saas.git

5.3 Push Code to YOUR Repository

# Push all code to your repository
git push -u origin main

# If prompted, enter your GitHub username and password
# (Or use a Personal Access Token - GitHub will guide you)

✅ Done! Your code is now in YOUR private repository.

Verify: Visit https://github.com/YOUR-USERNAME/my-awesome-saas - you should see all the code!

---

Step 6: Keep Connection to Our Repository (For Updates)

You want to get our updates in the future, so keep a connection:

# Add our repository as "upstream"
git remote add upstream https://github.com/jveritas/aistartupseo-boilerplate.git

# Verify your remotes
git remote -v

# You should see:
# origin    https://github.com/YOUR-USERNAME/my-awesome-saas.git (your repo)
# upstream  https://github.com/jveritas/aistartupseo-boilerplate.git (our repo)

What this means:

• origin = YOUR repository (where you push your changes)
• upstream = OUR repository (where you pull our updates)

---

Step 7: Install Dependencies

Before running the code, install all required packages:

npm install

This takes 2-5 minutes. It downloads ~1000 packages (React, Next.js, Prisma, Stripe, etc.).

What's happening?

• npm reads package.json
• Downloads all dependencies to node_modules/
• Creates package-lock.json (locks versions)

Ignore warnings (yellow text) - only errors (red text) matter.

---

Step 8: Set Up Environment Variables

8.1 Copy the Example File

cp .env.example .env

Windows Command Prompt:

copy .env.example .env

8.2 Edit .env File

In VS Code:

1. Click .env in the sidebar
2. You'll see lots of variables like DATABASE_URL=...

Fill in these REQUIRED values:

# Your License Key (from purchase email)
BOILERPLATE_LICENSE_KEY="BP-XXXX-YYYY-ZZZZ"

# Database (we'll set up next)
DATABASE_URL="postgresql://user:password@localhost:5432/mydb"

# Auth Secret (generate with command below)
NEXTAUTH_SECRET="paste-generated-secret-here"
NEXTAUTH_URL="http://localhost:3000"

# Admin Email (your email)
SUPER_ADMIN_EMAIL="[email protected]"

# Stripe (get from dashboard.stripe.com - test mode for now)
STRIPE_SECRET_KEY="sk_test_..."
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY="pk_test_..."
STRIPE_WEBHOOK_SECRET="whsec_..."

# SendGrid (optional for local dev, get from sendgrid.com)
SENDGRID_API_KEY="SG...."
EMAIL_FROM="[email protected]"

8.3 Generate Secrets

In your terminal:

# Generate NEXTAUTH_SECRET
openssl rand -base64 32

# Copy the output and paste into .env

Don't have OpenSSL? Use this online: https://generate-secret.vercel.app/32

---

Step 9: Set Up Database (PostgreSQL)

See our full guide: Complete Setup Guide

Quick version:

Local Database (Easiest for Development)

Option A: Install PostgreSQL

• Mac: brew install postgresql
• Windows: Download from https://www.postgresql.org/download/windows/
• Linux: sudo apt install postgresql

Option B: Use Docker (if you know Docker)

docker run --name my-postgres -e POSTGRES_PASSWORD=mypassword -p 5432:5432 -d postgres

Create database:

psql -U postgres  # Connect (password: postgres or what you set)
CREATE DATABASE mydb;
\q  # Quit

Update .env:

DATABASE_URL="postgresql://postgres:mypassword@localhost:5432/mydb"

---

Step 10: Initialize Database Schema

# Generate Prisma Client (TypeScript types)
npx prisma generate

# Push schema to database (creates tables)
npx prisma db push

What this does:

• Creates 80+ database tables (User, Payment, Project, etc.)
• Sets up relationships
• Indexes for performance

Output:

✓ Generated Prisma Client
✓ Applied database changes

---

Step 11: Run Your SaaS Locally! 🎉

npm run dev

Wait for:

▲ Next.js 16.1.6
✓ Ready in 2s
○ Local:   http://localhost:3000

Open browser: http://localhost:3000

You should see: Your SaaS landing page! 🚀

---

Step 12: Create Your Admin Account

1. Visit: http://localhost:3000/signup
2. Enter your email (the one you set as SUPER_ADMIN_EMAIL)
3. Create password
4. Check email for verification (if SendGrid configured)
5. Log in at: http://localhost:3000/admin

You're now a Super Admin! 👨‍💼

---

Step 13: Customize Your SaaS

13.1 Change Branding

Logo:

• Replace /public/logo.png with your logo
• Size: 200x50px (transparent background recommended)

Colors:

• Edit src/app/globals.css
• Find --brand: ... and change to your brand color

Site Name:

• Edit src/app/layout.tsx
• Change title and description

13.2 Customize Landing Page

Files to edit:

• src/components/public/Hero.tsx - Main hero section
• src/components/public/Features.tsx - Features grid
• src/components/public/PricingTable.tsx - Pricing plans
• src/app/(public)/page.tsx - Homepage layout

Example: Change Hero Title

Open src/components/public/Hero.tsx:

// Find this:
<h1>AI-Powered SEO Platform</h1>

// Replace with:
<h1>Your Awesome SaaS Name</h1>

Save, and the page refreshes automatically! (Hot reload)

13.3 Update Pricing Plans

See: Stripe Setup Guide

---

Step 14: Work in Your IDE Like a Pro

Using VS Code Features:

1. Search Entire Codebase:

• Press Ctrl+Shift+F (Windows) or Cmd+Shift+F (Mac)
• Type keyword (e.g., "stripe" or "email")
• See all files mentioning it

2. Go to File Quickly:

• Press Ctrl+P (Windows) or Cmd+P (Mac)
• Type filename (e.g., "Hero.tsx")
• Press Enter to open

3. Terminal Inside VS Code:

• View → Terminal (or Ctrl+\)
• Run commands without leaving editor

4. Git Integration:

• Source Control tab (left sidebar)
• See changed files
• Commit with message
• Push to GitHub

Using Claude Code (AI Assistant):

If you have Claude Code installed:

# In your project folder
claude-code

# Ask it to do tasks:
# "Change the hero title to 'My SaaS Platform'"
# "Add a new feature section to the homepage"
# "Update the pricing to $49/month"

Claude Code will:

• Read your codebase
• Make the changes
• Explain what it did

---

Step 15: Save Your Changes

Commit to Git:

# See what changed
git status

# Add all changes
git add .

# Commit with message
git commit -m "Customize branding and landing page"

# Push to YOUR repository
git push origin main

Now your changes are backed up on GitHub!

---

Step 16: Get Updates From Us (Future)

When we push updates (new features, bug fixes), here's how to get them:

# Fetch our latest changes
git fetch upstream

# See what changed
git log upstream/main

# Merge our updates into your code
git merge upstream/main

# If conflicts, Git will tell you - resolve them in VS Code
# Then:
git add .
git commit -m "Merge updates from upstream"
git push origin main

Alternatively, cherry-pick specific commits:

# View our commit history
git log upstream/main --oneline

# Pick a specific commit (e.g., a bug fix)
git cherry-pick <commit-hash>

We'll email you when major updates are available.

---

Step 17: Deploy to Production

See our full deployment guides:

• AWS Lightsail + Plesk
• Vercel Deployment (coming soon)

Quick Vercel Deploy:

# Install Vercel CLI
npm install -g vercel

# Deploy
vercel

# Follow prompts
# Set environment variables in Vercel dashboard

Your SaaS is live in 5 minutes! 🚀

---

🎓 Learning Resources

For Beginners:

Learn Git:

• https://learngitbranching.js.org (interactive)
• https://git-scm.com/book/en/v2 (official book)

Learn Next.js:

• https://nextjs.org/learn (official tutorial)
• https://www.youtube.com/watch?v=Sklc_fQBmcs (Vercel's crash course)

Learn TypeScript:

• https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html

Learn Prisma:

• https://www.prisma.io/docs/getting-started/quickstart

For Advanced Users:

Architecture Deep Dives:

• Database Schema Explained
• API Routes Guide
• Authentication Flow

---

🐛 Common Issues

"Permission denied (publickey)" when cloning

Fix:

1. Make sure you accepted the GitHub invitation
2. Use HTTPS URL (not SSH): https://github.com/jveritas/aistartupseo-boilerplate.git
3. Or set up SSH keys: https://docs.github.com/en/authentication/connecting-to-github-with-ssh

"npm install" fails

Fix:

# Clear cache
npm cache clean --force

# Delete old files
rm -rf node_modules package-lock.json

# Reinstall
npm install

"Prisma Client not generated"

Fix:

npx prisma generate

Port 3000 already in use

Fix:

# Find what's using port 3000
lsof -ti:3000  # Mac/Linux
netstat -ano | findstr :3000  # Windows

# Kill it
kill -9 <PID>  # Mac/Linux
taskkill /PID <PID> /F  # Windows

# Or use different port:
PORT=3001 npm run dev

---

🆘 Get Help

Stuck? We're here to help!

1. Check Documentation: https://aistartupseo.com/docs/vibe-code-boilerplate
2. Email Support: [email protected] (include license key)
3. Submit Ticket: https://aistartupseo.com/dashboard/support

When asking for help, include:

• What you were trying to do
• Error message (screenshot or copy-paste)
• Your setup (Windows/Mac/Linux, Node version)
• License key

Response time: 24-48 hours (business days)

---

✅ Next Steps

Now that you have everything set up:

1. ✅ Read: Customization Guide
2. ✅ Configure: Stripe Setup
3. ✅ Deploy: Production Deployment
4. ✅ Learn: Database Schema

---

🎉 You're All Set!

Congratulations! You now have:

• ✅ Full boilerplate code on your machine
• ✅ Running locally at http://localhost:3000
• ✅ Your own private GitHub repository
• ✅ Ability to get our updates
• ✅ Ready to customize and deploy

Welcome to the AI Startup SEO community! 🚀

Happy building!