Complete Beginner's Guide to Building a Waitlist Website

Introduction

Welcome! This tutorial will teach you how to create a professional waitlist website from scratch. A waitlist website allows people to sign up with their email to get early access to your product or service.

Tools We'll Use

1. Claude Code: An AI assistant that helps you write code
2. GitHub: A platform to store and manage your code
3. Firebase: Google's platform for hosting websites and storing data
4. Visual Studio Code: A free code editor (optional but recommended)

Prerequisites and Setup

Required Accounts

1. GitHub Account: For storing your code
2. Google Account: For Firebase (you probably already have one)
3. Claude Account: For using Claude Code

Part 1: Setting Up Your Development Environment

Step 1.1: Install Node.js (Required for Claude Code)

Claude Code requires Node.js version 18 or higher.

1. Open Terminal:
   • Press Command + Space
   • Type "Terminal" and press Enter
2. Install Homebrew if you don't have it:

   /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

   
   
   
   
   
3. Install Node.js:

   brew install node

   
   
   
   
   
4. Verify installation:

   node --version

   
   
   
   
   

   You should see version 18 or higher (e.g., v18.17.0)

Step 1.2: Install Claude Code

Claude Code is a command-line tool that lets you interact with Claude AI to write code.

1. In Terminal, install Claude Code globally:

   npm install -g @anthropic-ai/claude-code

   
   
   
   
   

   Note: Do NOT use sudo with this command

2. Verify installation:

   claude doctor

   
   
   
   
   

   This checks that everything is set up correctly

Step 1.3: Set Up Authentication

Claude Code will authenticate automatically when you first run it. You have several options:

1. Option 1: Anthropic Console (Recommended)
   • When you run claude for the first time, it will open your browser
   • Log in to your Claude account
   • Authorize Claude Code to access your account
2. Option 2: Claude App
   • Requires Claude Pro or Claude Max plan
   • Use the Claude app for authentication

Step 1.4: Install a Code Editor (Optional but Recommended)

Visual Studio Code is a free, user-friendly code editor.

1. Visit https://code.visualstudio.com/
2. Download the macOS version
3. Install it following the default options

Part 2: Creating Your GitHub Account and Repository

Step 2.1: Create a GitHub Account

1. Visit https://github.com
2. Click "Sign up"
3. Enter your email, create a password, and choose a username
4. Verify your email address

Step 2.2: Create Your First Repository

A repository (or "repo") is like a folder for your project.

1. Once logged in, click the green "New" button or the "+" icon
2. Repository settings:
   • Repository name: my-waitlist-website (or choose your own)
   • Description: "A waitlist website for my awesome product"
   • Select "Public"
   • Check "Add a README file"
   • Click "Create repository"

Step 2.3: Clone Your Repository Locally

"Cloning" means downloading your repository to your computer.

1. On your repository page, click the green "Code" button
2. Copy the HTTPS URL (it looks like https://github.com/yourusername/my-waitlist-website.git)
3. Open Terminal
4. Navigate to your Desktop:

   cd ~/Desktop

   
   
   
   
   
5. Clone the repository:

   git clone https://github.com/yourusername/my-waitlist-website.git

   
   
   
   
   
6. Enter the project folder:

   cd my-waitlist-website

   
   
   
   
   

Part 3: Setting Up Firebase

Step 3.1: Create a Firebase Project

1. Visit https://firebase.google.com/
2. Click "Get started"
3. Sign in with your Google account
4. Click "Create a project"
5. Project settings:
   • Project name: "My Waitlist" (or your choice)
   • Accept the terms
   • Disable Google Analytics (not needed for this project)
   • Click "Create project"

Step 3.2: Set Up Firestore Database

Firestore is where we'll store the email addresses.

1. In your Firebase project, click "Firestore Database" in the left menu
2. Click "Create database"
3. Choose "Start in production mode"
4. Select your nearest location
5. Click "Enable"

Step 3.3: Set Up Firebase Hosting

1. In the left menu, click "Hosting"
2. Click "Get started"
3. Follow the setup steps (we'll complete these later)

Step 3.4: Get Your Firebase Configuration

1. Click the gear icon ⚙️ and select "Project settings"
2. Scroll down to "Your apps"
3. Click the "</>" (Web) icon
4. App nickname: "Waitlist Web App"
5. Check "Also set up Firebase Hosting"
6. Click "Register app"
7. Copy the configuration code that appears (we'll need this later)

It will look something like this:

const firebaseConfig = {
  apiKey: "AIza...",
  authDomain: "your-project.firebaseapp.com",
  projectId: "your-project",
  storageBucket: "your-project.appspot.com",
  messagingSenderId: "123456789",
  appId: "1:123456789:web:abcdef"
};

Step 3.5: Set Up Security Rules

1. Go to Firestore Database → Rules
2. Replace the existing rules with:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /waitlist/{document} {
      allow read: if false;
      allow create: if request.resource.data.email is string
        && request.resource.data.email.size() > 0
        && request.resource.data.timestamp is timestamp;
    }
  }
}

3. Click "Publish"

These rules ensure only valid email submissions can be added to your database.

Part 4: Building Your Waitlist Website with Claude Code

Now for the exciting part - let's build your website!

Step 4.1: Start Claude Code

1. Navigate to your project folder:

   cd ~/Desktop/my-waitlist-website

   
   
   
   
   
2. Start Claude Code:

   claude

   
   
   
   
   

   If this is your first time running Claude Code, it will open your browser for authentication.

Step 4.2: Create Your Website Files

Tell Claude Code exactly what you want. Here's a detailed prompt to use:

Create a modern, responsive waitlist website with the following requirements:

1. Create an index.html file with:
   - A hero section with a catchy headline "Something Amazing is Coming"
   - A subheadline explaining the product
   - An email input form with a submit button
   - Success and error message displays
   - Modern, clean design with CSS
   - Mobile responsive layout

2. Create a styles.css file with:
   - Modern color scheme (you choose)
   - Smooth animations
   - Professional typography
   - Mobile-first responsive design

3. Create a script.js file that:
   - Handles form submission
   - Validates email addresses
   - Connects to Firebase Firestore
   - Saves emails with timestamps
   - Shows success/error messages
   - Prevents duplicate submissions

4. Use this Firebase configuration:
   [PASTE YOUR FIREBASE CONFIG HERE]

Make it look professional and modern, like a real startup's landing page.

Step 4.3: Understanding the Generated Code

Claude Code will create three files. Let's understand what each does:

index.html

This is your website's structure:

• Contains all the text and elements users see
• Links to your CSS and JavaScript files
• Defines the form and layout

styles.css

This makes your website look good:

• Colors, fonts, and spacing
• Animations and hover effects
• Responsive design for mobile devices

script.js

This makes your website work:

• Handles what happens when someone submits their email
• Connects to Firebase
• Saves data and shows messages

Step 4.4: Customize Your Website

Now let's personalize your website. Tell Claude Code:

Please update the website with these customizations:
1. Change the headline to: [Your headline]
2. Change the subheadline to: [Your description]
3. Use these colors: [Your color preferences]
4. Change the button text to: [Your button text]
5. Update the success message to: [Your message]

Step 4.5: Test Your Website Locally

1. If you have VS Code installed, type:

   code .

   
   
   
   
   

   This opens your project in VS Code.

2. Install the "Live Server" extension in VS Code:
   • Click the Extensions icon (four squares)
   • Search for "Live Server"
   • Click Install
3. Right-click on index.html and select "Open with Live Server"
4. Your website will open in your browser!

Alternative without VS Code:

• In Finder, navigate to your project folder and double-click the index.html file

Part 5: Deploying Your Website

Step 5.1: Install Firebase Tools

Since you already installed Node.js for Claude Code, you can now install Firebase tools:

1. Install Firebase CLI:

   npm install -g firebase-tools

   
   
   
   
   

Step 5.2: Initialize Firebase in Your Project

1. In Terminal, make sure you're in your project folder
2. Login to Firebase:

   firebase login

   
   
   
   
   

   This will open a browser window. Log in with your Google account.

3. Initialize Firebase:

   firebase init

   
   
   
   
   
4. Follow these selections:
   • Use arrow keys to select "Hosting" and press Space, then Enter
   • Select "Use an existing project"
   • Choose your Firebase project
   • Public directory: Press Enter (accepts default "public")
   • Single-page app: Type "N" and press Enter
   • Set up automatic builds: Type "N" and press Enter

Step 5.3: Move Your Files

Firebase expects files in a "public" folder:

1. Create the public folder:

   mkdir public

   
   
   
   
   
2. Move your files:

   mv index.html public/

   mv styles.css public/

   mv script.js public/

Step 5.4: Deploy Your Website

1. Deploy to Firebase:

   firebase deploy

   
   
   
   
   
2. After deployment completes, you'll see:

   Hosting URL: https://your-project.web.app

3. Visit this URL - your website is live!

Step 5.5: Push Your Code to GitHub

Let's save your code to GitHub:

1. Add all files:

   git add .

   
   
   
   
   
2. Commit your changes:

   git commit -m "Initial waitlist website"

3. Push to GitHub:

   git push origin main

   
   
   
   
   

Your code is now backed up on GitHub!

Part 6: Managing Your Waitlist

Step 6.1: View Your Signups

1. Go to your Firebase Console
2. Navigate to Firestore Database
3. You'll see a "waitlist" collection
4. Click on it to view all email signups

Step 6.2: Export Your Email List

1. In Firestore, click the three dots menu
2. Select "Export collection"
3. Or manually copy emails for your email marketing tool

Step 6.3: Set Up Email Notifications (Optional)

To get notified when someone signs up:

1. In Firebase, go to Functions
2. This requires a paid plan, but you can use services like Zapier or Make.com to connect Firebase to your email

Troubleshooting Common Issues

"Firebase is not defined" Error

Solution: Make sure you included the Firebase scripts in your HTML:

<script src="https://www.gstatic.com/firebasejs/9.0.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.0.0/firebase-firestore-compat.js"></script>

"Permission Denied" Error

Solution: Check your Firestore security rules are correctly set up (see Step 3.5)

Website Not Updating After Deploy

Solution:

1. Clear your browser cache (Ctrl+F5 or Cmd+Shift+R)
2. Wait 5-10 minutes for changes to propagate

Can't See Emails in Database

Solution: Make sure your form is actually submitting by checking the browser console:

1. Right-click on your website
2. Select "Inspect" or "Developer Tools"
3. Click "Console" tab
4. Look for any red error messages

Next Steps

Congratulations! You've built and deployed your first website. Here are some ways to improve it:

1. Add More Features

• Add a countdown timer
• Include social media links
• Add an "About" section
• Create a multi-step form

2. Improve the Design

• Add custom fonts from Google Fonts
• Include images or illustrations
• Add animations with CSS or JavaScript
• Create a logo

3. Set Up Analytics

• Add Google Analytics to track visitors
• Set up conversion tracking
• Monitor your signup rate

4. Connect Email Marketing

• Set up Mailchimp or ConvertKit
• Create an automated welcome email
• Build an email sequence

5. Learn More

• HTML & CSS: https://www.w3schools.com/
• JavaScript: https://javascript.info/
• Firebase: https://firebase.google.com/docs

Getting Help

If you get stuck:

1. Copy the error message
2. Ask Claude: "I got this error: [paste error]. How do I fix it?"

Remember, every developer started as a beginner. Don't be afraid to experiment and make mistakes - that's how you learn!

Final Tips

1. Save Often: Commit your code to GitHub regularly
2. Test Everything: Always test your changes before deploying
3. Keep It Simple: Start with basic features, add complexity later