Master reference · Keep this open

Build it
right.

Everything you need to set up, structure, and ship the DJ Platform — step by step, from zero to deployed.

Next.js 14 Supabase Stripe TypeScript Vercel Tailwind CSS Resend
Step-by-step

Environment setup

Do these in order, once, on your first machine. Takes about 2 hours total. Click each step to expand the full instructions.

01
Install Node.js and VS Code
~15 min · Do this first
Start here ▾

Node.js runs JavaScript outside the browser — Next.js needs it. VS Code is your code editor. Install both on every machine you'll code on.

↗
Download Node.js LTS from: nodejs.org
// Pick "LTS" (Long Term Support) — not the latest version
↗
Download VS Code from: code.visualstudio.com
$
node --version
// Should print v20.x.x or higher. Run this in Terminal (Mac) or PowerShell (Windows)
$
npm --version
// Should print 10.x.x or higher

VS Code extensions to install (search in the Extensions sidebar):

+
ESLint
// Catches code errors as you type
+
Prettier - Code formatter
// Auto-formats your code on save
+
Tailwind CSS IntelliSense
// Autocomplete for Tailwind classes
+
GitLens
// See git history inline in your files
02
Create GitHub account + repo
~20 min · Your sync layer across machines
Free ▾

GitHub stores your code in the cloud and syncs it across all your machines. Every machine pulls from the same repo — this is how you work on Windows at home and Mac on the road seamlessly.

↗
Create account at: github.com
$
git config --global user.name "Your Name"
// Run once per machine
$
git config --global user.email "you@email.com"
// Use the same email as your GitHub account

Then on GitHub.com: click New repository → name it dj-platform → Private → Create.

$
cd dj-platform
git init
git remote add origin https://github.com/YOURUSERNAME/dj-platform.git
git add .
git commit -m "feat: initial project structure"
git push -u origin main
// Run these in the dj-platform folder you downloaded
03
Create Supabase project
~20 min · Your database + auth
Free tier ▾

Supabase is your backend — it handles your database (PostgreSQL), user authentication, and file storage. The free tier handles everything you need for Phase 1 and 2.

↗
Create project at: supabase.com
// Sign up → New Project → name it "dj-platform" → choose a region close to you

After creating the project, run the database migration:

↗
In Supabase dashboard → SQL Editor → paste contents of packages/db/migrations/001_initial.sql → Run
// This creates all your tables and seeds Aspen as the first market

Get your API keys (Settings → API in the Supabase dashboard):

key
NEXT_PUBLIC_SUPABASE_URL
// Your project URL — safe to use in browser
key
NEXT_PUBLIC_SUPABASE_ANON_KEY
// Anon/public key — safe to use in browser
key
SUPABASE_SERVICE_ROLE_KEY
// Secret — only use in server-side code, never in the browser
⚠Paste these keys into apps/web/.env.local (copy from .env.local.example first). Never commit this file to GitHub.
04
Install dependencies + run dev server
~10 min · First time your app runs
Terminal ▾

npm install downloads all the packages your app needs (Next.js, Supabase client, etc.) into a node_modules folder. You do this once per machine.

$
cd apps/web
// Navigate into the web app folder
$
npm install
// Downloads all dependencies — takes 1-2 minutes first time
$
npm run dev
// Starts local development server at localhost:3000

Open localhost:3000 in your browser — you should see "DJ Platform" on screen. That's your app running locally.

💡Leave this terminal window running while you work. Every time you save a file, the browser updates automatically. Open a second terminal for git commands.
05
Set up Stripe (test mode)
~20 min · Payments infrastructure
Free to test ▾

Stripe handles all payment processing. Use test mode during development — you can use fake card numbers and nothing real gets charged.

↗
Create account at: stripe.com
// Stay in test mode (toggle in the Stripe dashboard top-right)
↗
Stripe Dashboard → Products → Create product → "Artist Profile" → $20/month recurring
// Copy the Price ID (starts with price_) — you'll need it in your checkout code
$
npm install -g stripe
stripe listen --forward-to localhost:3000/api/webhooks
// Stripe CLI — forwards webhook events to your local machine during development
💡Test card number: 4242 4242 4242 4242 · Any future expiry · Any CVC. Always works in test mode.
06
Set up Resend (email)
~10 min · Transactional email
Free tier ▾

Resend sends emails from your app — booking notifications, welcome emails, etc. Free tier is 100 emails/day, which is plenty for Phase 1.

↗
Create account at: resend.com
↗
API Keys → Create API Key → copy it into .env.local as RESEND_API_KEY

Test it works:

$
curl -X POST https://api.resend.com/emails \
  -H "Authorization: Bearer YOUR_RESEND_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"from":"test@resend.dev","to":"you@email.com","subject":"Test","html":"<p>It works</p>"}'
// Should send you an email. Replace YOUR_RESEND_API_KEY and you@email.com
⚠In development, send to your own email only. Set up a custom domain in Resend before going to production so emails don't land in spam.
07
Deploy to Vercel
~15 min · Your app goes live
Free tier ▾

Vercel hosts your Next.js app. Connect it to your GitHub repo and every push to main automatically deploys. You get a real URL instantly.

↗
Create account at: vercel.com → Import Git Repository → select dj-platform
↗
Set Root Directory to: apps/web
// Important — your Next.js app is inside apps/web, not the root
↗
Add all your .env.local keys in Vercel → Project Settings → Environment Variables
// Every key from .env.local needs to be added here for production to work
↗
Click Deploy → your app is live at yourproject.vercel.app
💡After this, every git push origin main automatically redeploys. You never manually upload files.
How it fits together

Architecture overview

Every layer, what it does, and how data flows through the system.

Browser / Phone
React UI · yourplatform.com
↓
Next.js App
Pages · Components · API Routes
↓      ↓      ↓
Supabase
Database + Auth + Storage
·
Stripe
Payments + Subscriptions
·
Resend
Transactional Email
↑ deploy
Vercel
Hosting + Edge Network
←
GitHub
git push → auto-deploy

Your project folder structure — unzip the starter and this is what you have:

dj-platform/
apps/
web/← your Next.js app — most work happens here
app/← pages and API routes (Next.js App Router)
[username]/← public artist profile pages
api/booking/← handles booking form submissions
api/checkout/← creates Stripe checkout sessions
api/webhooks/← receives Stripe payment events
layout.tsx← wraps every page (nav, fonts, providers)
page.tsx← landing page (yourplatform.com)
components/← reusable UI pieces
ui/← Button, Input, Modal, Card
layout/← Nav, Footer, Sidebar
features/artist/← ArtistCard, ArtistProfile
features/booking/← BookingForm, BookingModal
lib/← utility functions and service clients
supabase/← client.ts (browser) + server.ts (server)
stripe/← Stripe client initialization
utils/← cn(), formatDate(), slugify()
types/index.ts← Artist, Venue, BookingRequest interfaces
.env.local← SECRET — never commit this file
packages/
db/← shared DB types + SQL migrations
api/← shared business logic (used by web + future mobile)
Cross-machine workflow

Working across 3 machines

Windows at home, MacBook Pro on the road, Dell for work. Here's the exact process for each.

🪟
Windows (home)
Your primary dev machine. Do the full setup here first.
  • 1Install Node.js, VS Code, Git (gitforwindows.org)
  • 2Use PowerShell or Windows Terminal for all commands
  • 3Clone repo: git clone https://github.com/YOU/dj-platform.git
  • 4Copy .env.local.example → .env.local, fill in keys
  • 5cd apps/web → npm install → npm run dev
🍎
MacBook Pro (travel)
Pull the latest code and you're working where you left off.
  • 1Install Node.js (nodejs.org) and VS Code
  • 2Git is pre-installed on Mac — just configure name + email
  • 3Clone repo same as Windows
  • 4Copy .env.local keys (keep them in 1Password or Notes — not GitHub)
  • 5Every session start: git pull origin main
💼
Dell (work laptop)
Quick sessions between meetings. Same setup as Windows.
  • 1Same Windows setup as home machine
  • 2If IT restricts installs, use VS Code Portable edition
  • 3Clone repo, same .env.local setup
  • 4Always push before leaving: git push origin your-branch
  • 5Never leave uncommitted work — WIP commits are fine
Golden rule for every machine switch
Before you leave a machine:
$
git add .
git commit -m "wip: what you were doing"
git push origin your-branch
When you sit down on a new machine:
$
git pull origin main
# or
git pull origin your-branch
Every coding session

The daily workflow

Copy this into the DevOS app as your permanent session routine.

Start
$ git pull origin main
$ npm run dev
→ Open DevOS, read last notes
→ Set one session goal
→ Paste Claude context
During
→ Build one small thing
→ Test it in the browser
$ git commit -m "feat: thing"
→ Repeat
→ New ideas → Tasks tab
End
$ git add .
$ git commit -m "done: summary"
$ git push origin branch
→ Write 2 sentences in Notes
→ Close VS Code