Everything you need to set up, customize, and deploy SiteBolt.
git clone <your-repo-url> sitebolt cd sitebolt npm install
1. Create a new project at supabase.com 2. Go to SQL Editor and run both schema files: - supabase-schema.sql (core tables, RLS, triggers) - supabase-schema-v2.sql (payments, emails, webhooks) 3. Copy your project URL and keys from Settings > API
1. Create a Stripe account at stripe.com 2. Create 2 products with monthly prices (Pro & Unlimited) 3. Copy the Price IDs (price_xxx) 4. Create a webhook endpoint: URL: https://yourdomain.com/api/stripe/webhook Events: customer.subscription.*, invoice.* 5. Copy the webhook signing secret (whsec_xxx)
cp .env.example .env.local # Fill in all required variables (see table below)
npm run dev # Open http://localhost:3000
npm i -g vercel vercel link vercel env pull # or add env vars in Vercel dashboard vercel --prod
Copy .env.example to .env.local and fill in your values. On Vercel, add these in the project settings under Environment Variables.
NEXT_PUBLIC_SUPABASE_URLYour Supabase project URL. Found in Project Settings > API.
NEXT_PUBLIC_SUPABASE_ANON_KEYSupabase anon/public key for client-side auth. Found in Project Settings > API.
SUPABASE_SERVICE_ROLE_KEYSupabase service role key for server-side admin operations. Never expose to the client.
STRIPE_SECRET_KEYStripe API secret key (use test key for development). Found in Stripe Dashboard > Developers > API keys.
STRIPE_WEBHOOK_SECRETSigning secret for Stripe webhook endpoint verification. Generated when you create a webhook endpoint.
STRIPE_PRO_PRICE_IDStripe Price ID for the Pro plan subscription. Create in Stripe > Products.
STRIPE_UNLIMITED_PRICE_IDStripe Price ID for the Unlimited plan subscription.
NEXT_PUBLIC_STRIPE_PRO_PRICE_IDSame Pro price ID, exposed to client for upgrade buttons.
NEXT_PUBLIC_STRIPE_UNLIMITED_PRICE_IDSame Unlimited price ID, exposed to client for upgrade buttons.
NEXT_PUBLIC_APP_URLYour app's base URL (e.g., https://yourdomain.com). Used for redirects, invitation links, and Stripe callbacks.
RESEND_API_KEYResend API key for transactional emails. If not set, emails are logged to console instead of sent.
EMAIL_FROMSender address for emails. Defaults to "SiteBolt <noreply@yourdomain.com>".
EMAIL_REPLY_TOReply-to address for emails. Defaults to "support@yourdomain.com".
| Layer | Technology |
|---|---|
| Framework | Next.js 16 (App Router, Turbopack) |
| Styling | Tailwind CSS 4 + shadcn/ui |
| Auth | Supabase Auth |
| Database | Supabase (PostgreSQL) |
| Payments | Stripe |
| Resend | |
| Deployment | Vercel |
| Language | TypeScript |
Run both SQL files in your Supabase SQL Editor in order. The schema includes tables, RLS policies, triggers, and indexes.
sb_usersUser profiles (extends Supabase Auth). Auto-created on signup via trigger.
sb_organizationsMulti-tenant workspaces with plan, usage limits, Stripe customer, payment status.
sb_organization_membersMaps users to orgs with roles (owner/admin/member).
sb_invitationsPending team invites with 7-day expiring tokens.
sb_api_keysSHA-256 hashed API keys with last-used tracking.
usage_logPer-action token usage for billing metering.
sb_email_logsSent email tracking with status and metadata.
sb_webhook_failuresFailed webhook processing for debugging.
sb_processed_eventsIdempotency tracking for Stripe webhooks.
sb_admin_actionsAudit log for all admin operations.
handle_new_user() trigger.increment_org_usage() prevents race conditions on concurrent credit deductions.processed_events table prevents duplicate Stripe event processing.| Path | Description |
|---|---|
| src/app/ | Next.js App Router pages and API routes |
| src/app/auth/ | Login, signup, reset password, email verification, OAuth callback |
| src/app/api/stripe/ | Checkout, portal, webhooks, cancel, reactivate, trial |
| src/app/api/org/ | Members, invitations, API keys |
| src/app/api/admin/ | User management, org management, admin actions |
| src/app/builder/ | Visual site builder with live preview |
| src/app/dashboard/ | User dashboard with site management |
| src/app/settings/ | Org settings, team management, API keys |
| src/app/admin/ | Admin panel for user/org management |
| src/lib/templates.ts | Template engine — 6 visual styles, 17+ section renderers, HTML generation |
| src/lib/presets.ts | 6 industry presets (Storefront, Portfolio, SaaS, Restaurant, Agency, Blog) |
| src/lib/stripe.ts | Stripe client (lazy-loaded), checkout/portal session helpers |
| src/lib/supabase.ts | Supabase client factories (browser + server), plan limits |
| src/lib/email.ts | Email templates and Resend integration |
| src/lib/webhooks.ts | Webhook idempotency and failure logging |
| src/middleware.ts | Session refresh, email verification gate |
| supabase-schema.sql | Core database schema (users, orgs, members, API keys, RLS) |
| supabase-schema-v2.sql | Extended schema (payments, emails, webhooks, dunning) |
Update the Logo component in src/components/logo.tsx. Change "SiteBolt" text in layout.tsx metadata and nav.tsx. Update email templates in src/lib/email.ts.
Edit PLAN_LIMITS and PLAN_PRICES in src/lib/supabase.ts. Create matching Stripe products/prices and update the price ID env vars.
Add a new generator function in src/lib/templates.ts following the pattern of existing templates (meridian, obsidian, etc). Register it in TEMPLATE_META and the generateHTML dispatcher.
Add the section renderer in the sharedSections() function in templates.ts. Register it in SECTION_META. Add a toggle and editor in builder/page.tsx.
Add a new entry in src/lib/presets.ts with the full BuilderState configuration. Add a card for it on the landing page.
Edit CSS variables in src/app/globals.css. The :root block controls the light theme colors, glass-card effects, and gradient definitions.