Speed-First Tech Stack: Building Fast with Cloud Services in 2026

# Speed-First Tech Stack

frontend:
  # Deploy and forget
  hosting: "Vercel"           # Frontend hosting + Edge
  # or: "Netlify"             # Alternative with forms/split testing
  # or: "Cloudflare Pages"   # Free tier, fast global CDN
  
  framework: "Next.js 14"     # React framework with SSR
  styling: "Tailwind CSS"    # Utility-first CSS
  state: "Zustand"            # Simple state management
  forms: "React Hook Form"    # Performant forms
  ui: "shadcn/ui"            # Accessible components

backend:
  # Database - Supabase (PostgreSQL + Realtime)
  database: "Supabase"        # PostgreSQL, Auth, Realtime, Edge Functions
  # Alternative: "Neon"       # Serverless PostgreSQL
  # Alternative: "PlanetScale" # MySQL-compatible serverless
  
  # Backend API
  api: "Supabase Edge Functions"  # Deno/TypeScript serverless
  # or: "Next.js API Routes"      # Full-stack Next.js
  # or: "Cloudflare Workers"      # Edge compute
  # or: "AWS Lambda + API Gateway" # Enterprise serverless
  
  # Authentication
  auth: "Supabase Auth"       # Built-in auth
  # Alternative: "Clerk"       # React-focused auth
  # Alternative: "Auth0"       # Enterprise-grade

storage:
  # File Storage
  s3: "Supabase Storage"      # S3-compatible
  # or: "Cloudflare R2"        # Zero egress fees
  # or: "AWS S3"               # Most mature
  
  # CDN
  cdn: "Vercel Edge Network"  # Built-in
  # or: "Cloudflare"           # Free tier excellent

email:
  # Transactional
  transactional: "Resend"     # Developer-friendly
  # Alternative: "Postmark"   # High deliverability
  # Alternative: "SendGrid"   # Full-featured
  
  # Marketing
  marketing: "ConvertKit"     # Creator-focused
  # Alternative: "Loops"      # Modern alternative

monitoring:
  # Error Tracking
  errors: "Sentry"            # 5K errors/mo free
  
  # Analytics
  analytics: "PostHog"        # Product analytics free tier
  # Alternative: "Google Analytics 4" # Free
  
  # Logging
  logging: "Logtail"          # Modern logging

payments:
  # Payments
  payments: "Stripe"          # Industry standard
  # Alternative: "Paddle"     # Global, tax handling

deployment:
  # CI/CD
  ci: "GitHub Actions"        # Free for open source
  # or: "Vercel"              # Automatic deploys
  
  # Container Registry
  registry: "GitHub Container Registry" # Free private
  # or: "Docker Hub"          # Free tier

infrastructure:
  # DNS + Security
  dns: "Cloudflare"           # Free tier excellent
  # or: "Route 53"            # AWS native
  
  # Secrets
  secrets: "Vercel"           # Built-in env vars
  # or: "HashiCorp Vault"     # Enterprise

# Deploy Next.js app in seconds
npm create vercel@latest my-app
cd my-app
# Automatic deployment, preview URLs, custom domains

// next.config.js - Production optimizations
/** @type {import('next').NextConfig} */
const nextConfig = {
  // Enable React strict mode for better DX
  reactStrictMode: true,
  
  // Image optimization
  images: {
    domains: ['your-bucket.supabase.co'],
    formats: ['image/avif', 'image/webp'],
  },
  
  // Enable experimental features
  experimental: {
    optimizeCss: true,
  },
  
  // Compression
  compress: true,
  
  // Headers for security
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          { key: 'X-Frame-Options', value: 'DENY' },
          { key: 'X-Content-Type-Options', value: 'nosniff' },
          { key: 'Referrer-Policy', value: 'origin-when-cross-origin' },
        ],
      },
    ];
  },
};

module.exports = nextConfig;

// Supabase Edge Function
Deno.serve(async (req) => {
  const supabase = createClient(
    Deno.env.get('SUPABASE_URL')!,
    Deno.env.get('SUPABASE_SERVICE_ROLE_KEY')!
  );
  
  // Your business logic
  const { data, error } = await supabase
    .from('users')
    .select('*')
    .limit(10);
  
  if (error) {
    return new Response(JSON.stringify({ error: error.message }), {
      status: 400,
      headers: { 'Content-Type': 'application/json' },
    });
  }
  
  return new Response(JSON.stringify({ data }), {
    headers: { 'Content-Type': 'application/json' },
  });
});

-- Database functions (PostgreSQL)
-- Edge Functions can call these directly

-- Example: Create a protected function
CREATE OR REPLACE FUNCTION get_user_data(user_id UUID)
RETURNS TABLE (
  id UUID,
  email TEXT,
  created_at TIMESTAMPTZ
)
LANGUAGE plpgsql
SECURITY DEFINER
AS $$
BEGIN
  RETURN QUERY
  SELECT u.id, u.email, u.created_at
  FROM users u
  WHERE u.id = user_id;
END;
$$;

-- Example: Trigger for activity logging
CREATE TABLE activity_log (
  id BIGSERIAL PRIMARY KEY,
  user_id UUID REFERENCES users(id),
  action TEXT NOT NULL,
  metadata JSONB,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

CREATE OR REPLACE FUNCTION log_activity()
RETURNS TRIGGER AS $$
BEGIN
  INSERT INTO activity_log (user_id, action, metadata)
  VALUES (
    NEW.id,
    TG_TABLE_NAME || '_' || TG_OP,
    to_jsonb(NEW)
  );
  RETURN NEW;
END;
$$ LANGUAGE plpgsql;

-- Complete SaaS schema
-- Run in Supabase SQL Editor

-- Users (extends Supabase auth.users)
CREATE TABLE public.profiles (
  id UUID REFERENCES auth.users(id) PRIMARY KEY,
  email TEXT UNIQUE NOT NULL,
  full_name TEXT,
  avatar_url TEXT,
  plan TEXT DEFAULT 'free' CHECK (plan IN ('free', 'pro', 'enterprise')),
  created_at TIMESTAMPTZ DEFAULT NOW(),
  updated_at TIMESTAMPTZ DEFAULT NOW()
);

-- Enable RLS
ALTER TABLE public.profiles ENABLE ROW LEVEL SECURITY;

-- Policies
CREATE POLICY "Users can view own profile"
  ON public.profiles FOR SELECT
  USING (auth.uid() = id);

CREATE POLICY "Users can update own profile"
  ON public.profiles FOR UPDATE
  USING (auth.uid() = id);

-- Example: Projects table
CREATE TABLE public.projects (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  user_id UUID REFERENCES public.profiles(id) ON DELETE CASCADE,
  name TEXT NOT NULL,
  description TEXT,
  status TEXT DEFAULT 'active',
  created_at TIMESTAMPTZ DEFAULT NOW(),
  updated_at TIMESTAMPTZ DEFAULT NOW()
);

-- RLS for projects
CREATE POLICY "Users can view own projects"
  ON public.projects FOR SELECT
  USING (auth.uid() = user_id);

CREATE POLICY "Users can create projects"
  ON public.projects FOR INSERT
  WITH CHECK (auth.uid() = user_id);

CREATE POLICY "Users can update own projects"
  ON public.projects FOR UPDATE
  USING (auth.uid() = user_id);

-- Indexes for performance
CREATE INDEX idx_projects_user_id ON public.projects(user_id);
CREATE INDEX idx_projects_status ON public.projects(status);

-- Realtime
ALTER PUBLICATION supabase_realtime ADD TABLE public.projects;

// Using Clerk for authentication
// https://clerk.com

// components/ClerkProvider.tsx
import { ClerkProvider } from '@clerk/nextjs';

export function ClerkProviderWrapper({ children }) {
  return (
    <ClerkProvider
      publishableKey={process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY}
    >
      {children}
    </ClerkProvider>
  );
}

// middleware.ts
import { authMiddleware } from '@clerk/nextjs';

export default authMiddleware({
  publicRoutes: ['/', '/api/webhooks(.*)'],
});

export const config = {
  matcher: ['/((?!.+\\.[\\w]+$|_next).*)', '/', '/(api|trpc)(.*)'],
};

// Supabase Realtime - Live updates
import { createClient } from '@supabase/supabase-js';

const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
);

// Subscribe to table changes
useEffect(() => {
  const channel = supabase
    .channel('projects')
    .on(
      'postgres_changes',
      {
        event: '*',
        schema: 'public',
        table: 'projects',
      },
      (payload) => {
        console.log('Change received!', payload);
        // Update UI
      }
    )
    .subscribe();

  return () => {
    supabase.removeChannel(channel);
  };
}, []);

// Supabase Storage
import { createClient } from '@supabase/supabase-js';

const supabase = createClient(SUPABASE_URL, SUPABASE_KEY);

// Upload file
async function uploadFile(file: File, userId: string) {
  const filePath = `${userId}/${Date.now()}_${file.name}`;
  
  const { data, error } = await supabase.storage
    .from('user-files')
    .upload(filePath, file, {
      cacheControl: '3600',
      upsert: false,
    });
  
  return data;
}

// Get public URL
function getFileUrl(path: string) {
  const { data } = supabase.storage
    .from('user-files')
    .getPublicUrl(path);
  
  return data.publicUrl;
}

// Stripe Checkout - Subscription payments
import Stripe from 'stripe';

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

// Create checkout session
export async function createCheckoutSession(
  userId: string,
  priceId: string,
  successUrl: string,
  cancelUrl: string
) {
  const session = await stripe.checkout.sessions.create({
    mode: 'subscription',
    payment_method_types: ['card'],
    line_items: [{ price: priceId, quantity: 1 }],
    success_url: successUrl,
    cancel_url: cancelUrl,
    client_reference_id: userId,
    subscription_data: {
      metadata: { userId },
    },
  });
  
  return session.url;
}

// Webhook handler
export async function handleWebhook(
  payload: string | Buffer,
  signature: string
) {
  const webhookSecret = process.env.STRIPE_WEBHOOK_SECRET!;
  let event: Stripe.Event;
  
  try {
    event = stripe.webhooks.constructEvent(payload, signature, webhookSecret);
  } catch (err) {
    throw new Error(`Webhook signature verification failed`);
  }
  
  // Handle events
  switch (event.type) {
    case 'customer.subscription.created':
      await handleSubscriptionCreated(event.data.object);
      break;
    case 'customer.subscription.updated':
      await handleSubscriptionUpdated(event.data.object);
      break;
    case 'customer.subscription.deleted':
      await handleSubscriptionDeleted(event.data.object);
      break;
  }
  
  return { received: true };
}

// Transactional emails with Resend
import { Resend } from 'resend';

const resend = new Resend(process.env.RESEND_API_KEY);

// Send welcome email
export async function sendWelcomeEmail(email: string, name: string) {
  return resend.emails.send({
    from: 'Acme <[email protected]>',
    to: email,
    subject: 'Welcome to Acme!',
    html: `
      <h1>Welcome ${name}!</h1>
      <p>Thanks for joining Acme. Let's get started...</p>
    `,
  });
}

// Send password reset
export async function sendPasswordReset(email: string, resetToken: string) {
  return resend.emails.send({
    from: 'Acme <[email protected]>',
    to: email,
    subject: 'Reset your password',
    html: `
      <p>Click here to reset your password:</p>
      <a href="https://acme.com/reset-password?token=${resetToken}">
        Reset Password
      </a>
    `,
  });
}

# Setup local development environment
# 1. Clone repo
git clone https://github.com/your-org/your-app.git
cd your-app

# 2. Install dependencies
npm install

# 3. Setup environment
cp .env.example .env.local
# Fill in your API keys

# 4. Start local Supabase
npx supabase start

# 5. Run migrations
npx supabase db push

# 6. Start dev server
npm run dev

# .env.local - Development
NEXT_PUBLIC_SUPABASE_URL=http://localhost:54321
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
SUPABASE_SERVICE_ROLE_KEY=your-service-role-key

# Clerk (optional)
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_xxx
CLERK_SECRET_KEY=sk_test_xxx

# Stripe
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_xxx
STRIPE_SECRET_KEY=sk_test_xxx
STRIPE_WEBHOOK_SECRET=whsec_xxx

# Resend
RESEND_API_KEY=re_xxx

# Sentry
NEXT_PUBLIC_SENTRY_DSN=https://[email protected]/xxx

# App
NEXT_PUBLIC_APP_URL=http://localhost:3000

# .github/workflows/deploy.yml
name: Deploy

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'

      - name: Install dependencies
        run: npm ci

      - name: Lint
        run: npm run lint

      - name: Type check
        run: npm run typecheck

      - name: Build
        run: npm run build
        env:
          NEXT_PUBLIC_SUPABASE_URL: ${{ secrets.SUPABASE_URL }}
          NEXT_PUBLIC_SUPABASE_ANON_KEY: ${{ secrets.SUPABASE_ANON_KEY }}

      - name: Deploy to Vercel
        uses: amondnet/vercel-action@v25
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
          vercel-args: '--prod'

      - name: Deploy Supabase
        uses: supabase/setup-cli@v1
        with:
          supabase-token: ${{ secrets.SUPABASE_TOKEN }}
        
      - name: Push DB changes
        run: npx supabase db push
        env:
          SUPABASE_DB_PASSWORD: ${{ secrets.SUPABASE_DB_PASSWORD }}

// Don't over-engineer from day one
// ✅ Simple: Single Supabase backend
const supabase = createClient(SUPABASE_URL, SUPABASE_KEY);

// ❌ Over-engineered: Microservices
// const auth = createAuthClient();
// const user = createUserClient();
// const billing = createBillingClient();

// Define types for all data
interface User {
  id: string;
  email: string;
  profile: Profile;
}

interface Profile {
  full_name: string;
  avatar_url: string;
  plan: 'free' | 'pro' | 'enterprise';
}

// Use throughout your app
async function getUser(): Promise<User> {
  const { data: { user } } = await supabase.auth.getUser();
  return user;
}

// Error tracking with Sentry
import * as Sentry from '@sentry/nextjs';

Sentry.init({
  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
  environment: process.env.NODE_ENV,
});

// Usage
try {
  await riskyOperation();
} catch (error) {
  Sentry.captureException(error);
  throw error;
}

// lib/config.ts
export const config = {
  supabase: {
    url: process.env.NEXT_PUBLIC_SUPABASE_URL!,
    anonKey: process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
  },
  stripe: {
    publishableKey: process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY!,
  },
  app: {
    url: process.env.NEXT_PUBLIC_APP_URL!,
  },
};