Quick Start

Get ZeroDrag running locally in minutes. This guide takes you from a cloned repository to a working application.

Installing Dependencies

Install all required packages using pnpm:

bash
pnpm install

This installs Next.js, Prisma, authentication libraries, payment providers, and all other dependencies.

Environment Variables

Copy the example environment file and fill in your values:

bash
cp .env.example .env

Required variables for basic functionality:

Database

DATABASE_URL="postgresql://..."

Get this from Supabase, Neon, or your PostgreSQL provider.

Authentication

AUTH_SECRET="..."NEXTAUTH_URL="http://localhost:3000"GOOGLE_CLIENT_ID="..."GOOGLE_CLIENT_SECRET="..."

Generate AUTH_SECRET with: openssl rand -base64 32

Email

RESEND_API_KEY="..."EMAIL_FROM="noreply@yourdomain.com"

Required for magic link authentication. Get API key from Resend Dashboard.

App Details

NEXT_PUBLIC_APP_URL="http://localhost:3000"NEXT_PUBLIC_APP_NAME="Your SaaS"

Public app URL for SEO and sitemap generation. App name for branding.

For complete documentation: See Environment Variables for all variables including payments, GitHub, optional AI providers, error tracking, and detailed setup instructions.

Database Setup

Set up your database schema and seed initial data:

bash
pnpm db:setup

This command:

  • Generates the Prisma client
  • Pushes the schema to your database
  • Seeds default plans and entitlements

Note: The seed script creates a Free plan and a Pro plan with default entitlements. You can modify these later in the database or seed script.

Running Locally

Start the development server:

bash
pnpm dev

Open http://localhost:3000 in your browser.

Verifying Everything Works

1. Authentication

Navigate to /auth and test both sign-in methods:

  • Google OAuth - Should redirect to Google and back
  • Magic Link - Should send an email with a verification link

2. Dashboard

After signing in, you should see the dashboard at /dashboard.

3. Database

Verify your user was created:

bash
pnpm db:studio

This opens Prisma Studio where you can view and edit your database.

Payment Setup (Optional)

All core features work after completing the steps above. Payments are optional but required for subscription billing. To enable payments:

Choose Payment Provider

Set PAYMENT_PROVIDER to stripe or razorpay in your .env file.

Stripe Variables

STRIPE_SECRET_KEY="..."STRIPE_PUBLISHABLE_KEY="..."STRIPE_WEBHOOK_SECRET="..."

Get these from Stripe Dashboard.

Razorpay Variables

RAZORPAY_KEY_ID="..."RAZORPAY_KEY_SECRET="..."RAZORPAY_WEBHOOK_SECRET="..."

Get these from Razorpay Dashboard.

For complete payment setup instructions including creating plans, configuring webhooks, and testing, see Payment Setup.

Note: You can skip this step for now and set up payments later. The application will work without payment configuration, but subscription features won't be available.

Common Setup Pitfalls

"AUTH_SECRET is required"

Make sure you've generated and added AUTH_SECRET to your .env file. It must be at least 32 characters.

"Invalid prisma.user.findUnique() invocation"

Your DATABASE_URL is incorrect or the database isn't accessible. Verify the connection string and ensure the database is running.

"Google OAuth redirect_uri mismatch"

In Google Cloud Console, ensure the authorized redirect URI exactly matches:http://localhost:3000/api/auth/callback/google

Magic links not sending

Verify your RESEND_API_KEY is correct and your Resend account is active. Check the server logs for email sending errors.

Node.js version issues

Ensure you're using Node.js 20 or above. Use nvm or fnm to manage Node versions if needed.

Next Steps

Now that your environment is running, explore the core systems: