Ship a Weekend MVP

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

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

Illustrative code, not executed in this review. Check current SDK documentation, authentication, input validation and error handling before use.

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

Illustrative code, not executed in this review. Check current SDK documentation, authentication, input validation and error handling before use.

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

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

Illustrative code, not executed in this review. Check current SDK documentation, authentication, input validation and error handling before use.

import { createBrowserClient } from '@supabase/ssr'

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

Illustrative code, not executed in this review. Check current SDK documentation, authentication, input validation and error handling before use.

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

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

Illustrative code, not executed in this review. Check current SDK documentation, authentication, input validation and error handling before use.

'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

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

Illustrative code, not executed in this review. Check current SDK documentation, authentication, input validation and error handling before use.

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

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

Illustrative code, not executed in this review. Check current SDK documentation, authentication, input validation and error handling before use.

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