tyler
6ab52a2499
Backend & Auth: - Add @clerk/nextjs for production authentication - Create src/proxy.ts with clerkMiddleware() for route protection - Implement multi-tenant auth with role-based access control - Add Clerk components (Show, UserButton, SignInButton, SignUpButton) Billing & Payments: - Full Stripe integration (subscriptions, add-ons, customer portal) - Plan tiers: Starter 9/mo, Farm 49/mo, Enterprise 99/mo - Webhook handling for subscription events - createSubscription(), createAddonSubscription(), createCustomerPortalSession() API & Security: - Rate limiting with @upstash/ratelimit (100 req/min API, 20 req/min checkout) - Zod validation schemas for all endpoints (orders, products, campaigns, etc.) - Security headers (CSP, HSTS, X-Frame-Options) - API routes: /api/v1/ with validated, rate-limited endpoints Monitoring: - Sentry error tracking with performance monitoring - PostHog analytics for feature usage, funnels, cohorts - User activity logging and breadcrumb tracking Admin Features: - Analytics dashboard with revenue charts, customer growth, conversion funnel - Onboarding flow with 6-step interactive tour - Referral system with share tracking and reward redemption - Changelog feed with in-app notifications PWA & SEO: - Web app manifest with icons and shortcuts - Service worker for offline support and caching - Full SEO metadata, OpenGraph, Twitter cards - Structured data (JSON-LD) for organization and products Database: - Add referral_codes, changelogs, onboarding_progress tables - Add user_activity_logs, api_keys, notification_preferences - Comprehensive RLS policies for all new tables - Seed data for demo brands and products
2.2 KiB
2.2 KiB
Route Commerce - Production Setup Guide
Quick Start
# Install dependencies
npm install
# Copy environment variables
cp .env.example .env.local
# Start development server
npm run dev
Configuration
1. Clerk Authentication
- Sign up at Clerk
- Create a new application
- Copy keys to
.env.local:NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_xxx CLERK_SECRET_KEY=sk_test_xxx - Configure middleware in
src/proxy.ts
2. Stripe Payments
- Create Stripe account
- Create products and prices in Stripe Dashboard
- Update
.env.localwith:STRIPE_SECRET_KEY=sk_test_xxx NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_xxx STRIPE_WEBHOOK_SECRET=whsec_xxx
3. Supabase Database
- Create project at Supabase
- Run migrations:
npm run migrate - Update
.env.localwith:NEXT_PUBLIC_SUPABASE_URL=https://xxx.supabase.co NEXT_PUBLIC_SUPABASE_ANON_KEY=xxx SUPABASE_SERVICE_ROLE_KEY=xxx
4. Optional Services
Sentry (Error Monitoring)
SENTRY_DSN=https://xxx@sentry.io/xxx
PostHog (Analytics)
NEXT_PUBLIC_POSTHOG_API_KEY=phc_xxx
Deployment
Vercel
- Connect repository to Vercel
- Add all environment variables
- Deploy
Other Platforms
Ensure environment variables are set before deployment.
Key Files
src/proxy.ts- Clerk middlewaresrc/lib/stripe-billing.ts- Stripe integrationsrc/lib/analytics.ts- PostHog analyticssrc/lib/sentry.ts- Sentry error trackingsrc/components/admin/AnalyticsDashboard.tsx- Admin dashboardsrc/components/onboarding/OnboardingFlow.tsx- User onboardingsrc/components/referral/ReferralSystem.tsx- Referral trackingsrc/components/changelog/ChangelogFeed.tsx- Product updatessupabase/migrations/- Database schema
Scripts
npm run dev # Start development server
npm run build # Production build
npm run lint # Run ESLint
npm run migrate # Run database migrations
Documentation
- Full documentation: CLAUDE.md
- Launch checklist: LAUNCH_CHECKLIST.md