Getting Started with RankThis Template

This comprehensive guide will walk you through setting up the RankThis template from scratch, customizing it for your needs, and deploying it to production.

Prerequisites

Before you begin, make sure you have:

Node.js 18+ installed
pnpm package manager
A code editor (we recommend Cursor!)
Git for version control

Step 1: Project Setup

Clone and Install

# Clone the repository
git clone <your-repo-url>
cd RankThis

# Install dependencies
pnpm install

Environment Configuration

Create a .env file based on the example:

cp .env.example .env

Fill in your environment variables:

# Database
DATABASE_URL="postgresql://..."
PREVIEW_DATABASE_URL="postgresql://..."

# Authentication
NEXTAUTH_SECRET="your-secret-here"
GOOGLE_CLIENT_ID="your-google-client-id"
GOOGLE_CLIENT_SECRET="your-google-client-secret"

# Stripe
STRIPE_SECRET_KEY="sk_test_..."
STRIPE_PUBLISHABLE_KEY="pk_test_..."
STRIPE_WEBHOOK_SECRET="whsec_..."
STRIPE_PRICE_ID_MONTHLY="price_..."
STRIPE_PRICE_ID_YEARLY="price_..."

# Email (Optional)
RESEND_API_KEY="re_..."

Step 2: Database Setup

Local Development

# Start local database (optional)
./start-database.sh

# Generate Prisma client and run migrations
pnpm db:generate
pnpm db:push

Production Database

For production, we recommend using Neon for PostgreSQL:

Create a Neon account
Create a new project
Copy the connection string to your environment variables

Step 3: Authentication Setup

Google OAuth

Go to Google Cloud Console
Create a new project or select existing
Enable Google+ API
Create OAuth 2.0 credentials
Add your domain to authorized origins
Copy Client ID and Secret to your .env

Magic Link (Optional)

The template includes magic link authentication. Configure your email provider (Resend recommended) for production use.

Step 4: Stripe Configuration

Create Products and Prices

Go to Stripe Dashboard
Create products for your subscription tiers
Create prices for monthly and yearly billing
Copy the price IDs to your environment variables

Webhook Setup

# Install Stripe CLI
stripe listen --forward-to localhost:3000/api/webhooks/stripe

For production, configure webhooks in the Stripe dashboard pointing to your domain.

Step 5: Customization

Branding and Design

The template uses a well-structured design system. Customize it in tailwind.config.ts:

colors: {
  background: {
    primary: "#YOUR_BRAND_COLOR",
    card: "#FFFFFF",
  },
  foreground: {
    primary: "#1F2937",
    muted: "#6B7280",
  },
  primary: {
    DEFAULT: "#YOUR_PRIMARY_COLOR",
    foreground: "#FFFFFF",
  },
}

Content Customization

Update the homepage in src/app/page.tsx
Modify the navigation in src/app/layout.tsx
Customize the blog content in src/content/blog/

Feature Toggles

The template includes several features you can enable/disable:

Blog system (already configured)
Analytics (PostHog)
Email notifications
Subscription management

Step 6: Development

Start Development Server

pnpm dev

Visit http://localhost:3000 to see your application.

Using Cursor for Development

This template works excellently with Cursor AI. Check out our Cursor Guide for tips on rapid development.

Step 7: Testing

Run Quality Checks

# Type checking
pnpm typecheck

# Linting
pnpm lint

# Format code
pnpm format:write

Test Key Features

Authentication: Test sign-in with Google and magic link
Subscriptions: Test Stripe checkout flow
Blog: Verify MDX rendering and navigation
Responsive Design: Test on mobile and desktop

Step 8: Deployment

Vercel (Recommended)

Connect your GitHub repository to Vercel
Add environment variables in Vercel dashboard
Deploy automatically on push to main

Environment Variables for Production

Make sure to set all environment variables in your deployment platform:

Database URLs
Authentication secrets
Stripe keys
Email configuration

Database Migrations

The template includes GitHub Actions for safe database migrations:

Preview environment auto-migrates on push
Production requires manual confirmation
Includes backup verification

Common Issues and Solutions

Database Connection Issues

# Check if database is accessible
pnpm db:studio

# Reset database if needed
pnpm db:reset

Authentication Problems

Verify Google OAuth credentials
Check redirect URIs in Google Console
Ensure NEXTAUTH_SECRET is set

Stripe Integration Issues

Verify webhook endpoints
Check price IDs in environment variables
Test with Stripe CLI locally

Next Steps

Now that you have the template set up, consider:

Customizing the design to match your brand
Adding your own features using the existing patterns
Setting up monitoring with PostHog
Configuring email templates for better user experience
Adding more blog content to showcase your expertise

Resources

Ready to build something amazing? Start customizing the template and bring your SaaS idea to life! 🚀