Plan scope & set up the Next.js project with Cursor

~30 min

Define your MVP scope ruthlessly, then scaffold a Next.js project using Cursor to generate boilerplate fast.

1. Write down your one core feature - the single thing users will pay for. Cut everything else.
2. Open Cursor and create a new Next.js project with TypeScript and Tailwind CSS
3. Use Cursor's AI chat to scaffold your project structure: pages, components, and lib folders
4. Set up your environment variables file and install core dependencies
5. Create a basic landing page with a hero section and CTA - ship the marketing page first

npx create-next-app@latest my-mvp --typescript --tailwind --eslint --app --src-dir
cd my-mvp
npm install @supabase/supabase-js @supabase/ssr stripe

NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
STRIPE_SECRET_KEY=sk_test_...
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_...
NEXT_PUBLIC_URL=http://localhost:3000

Build the core feature with Supabase database

~2 hours

Create your Supabase project, design the database schema for your one core feature, and build the UI to interact with it.

1. Create a new Supabase project at supabase.com and copy your API credentials
2. Design your schema in Supabase's Table Editor - keep it minimal (1-3 tables max for an MVP)
3. Enable Row Level Security on all tables and add basic policies
4. Create a Supabase client helper in your project for browser-side queries
5. Build the core UI: a form to create data, a list to display it, and basic CRUD operations

import { createBrowserClient } from '@supabase/ssr'

export function createClient() {
  return createBrowserClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL! process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
  )
}

import { createClient } from '@/lib/supabase'

export default function Dashboard() {
  const supabase = createClient()

  async function loadItems() {
    const { data, error } = await supabase
      .from('items')
      .select('*')
      .order('created_at', { ascending: false })
    return data
  }

  // Build your UI around this data
}

Add authentication with Supabase Auth

~45 min

Add user signup and login so people can create accounts and access their own data.

1. Enable email/password auth in Supabase Dashboard → Authentication → Providers
2. Create a simple signup page with email and password fields
3. Create a login page that redirects to the dashboard on success
4. Add an auth callback route to handle email confirmations
5. Add middleware to protect the dashboard route - redirect unauthenticated users to login

'use client'
import { createClient } from '@/lib/supabase'
import { useState } from 'react'
import { useRouter } from 'next/navigation'

export default function Login() {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const router = useRouter()
  const supabase = createClient()

  async function handleLogin() {
    const { error } = await supabase.auth.signInWithPassword({
      email, password
    })
    if (!error) router.push('/dashboard')
  }

  return (
    <form onSubmit={(e) => { e.preventDefault(); handleLogin() }}>
      <input type="email" value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Email" />
      <input type="password" value={password}
        onChange={(e) => setPassword(e.target.value)}
        placeholder="Password" />
      <button type="submit">Log in</button>
    </form>
  )
}

Wire up Stripe payments

~1 hour

Add a payment flow so users can pay for your product. Use Stripe Checkout for the fastest integration.

1. Create a Stripe account and grab your test API keys from the Stripe Dashboard
2. Create a product and price in Stripe Dashboard (use a simple $X/month subscription or one-time price)
3. Build an API route that creates a Stripe Checkout session and redirects the user
4. Add a pricing section or upgrade button on your dashboard that triggers checkout
5. Test the full flow with Stripe's test card number: 4242 4242 4242 4242

import Stripe from 'stripe'
import { NextResponse } from 'next/server'

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!)

export async function POST(req: Request) {
  const { priceId, userId } = await req.json()

  const session = await stripe.checkout.sessions.create({
    mode: 'subscription',
    payment_method_types: ['card'],
    line_items: [{ price: priceId, quantity: 1 }],
    success_url: `${process.env.NEXT_PUBLIC_URL}/dashboard?upgraded=true`,
    cancel_url: `${process.env.NEXT_PUBLIC_URL}/pricing`,
    metadata: { userId }
  })

  return NextResponse.json({ url: session.url })
}

Deploy to Vercel & ship

~20 min

Push to GitHub, deploy to Vercel, and share your MVP with the world.

1. Initialize a git repo, commit your code, and push to GitHub
2. Go to vercel.com, import your repository, and add all environment variables
3. Deploy - Vercel auto-detects Next.js and handles the build
4. Test the full user flow on production: land → signup → use feature → pay
5. Share the link on Twitter, Reddit, Indie Hackers, or wherever your audience hangs out

git init
git add .
git commit -m "Ship MVP"
git remote add origin https://github.com/you/my-mvp.git
git push -u origin main

# Or deploy directly with Vercel CLI
npx vercel --prod