Putting It Together

Over the last few modules you met a service for each piece of the puzzle. Now we wire one service from each module into a real app. Clerk handles authentication, Supabase is the database, R2 does file storage, Resend sends email, Stripe takes payments, and PostHog runs analytics. The alternatives you also covered (Better Auth, Convex, SendGrid, Amazon SES, Postmark and Whop) fill the same slots, so you can swap any of them in.

A Real-World Example: SaaS App#

Picture this. You're building a subscription app where people create and share documents. Here's how every service plugs in.

The User Journey#

Step 1. User Discovers Your App#

Somebody finds your app through a Google search and lands on your homepage.

Service used. PostHog tracks this page view and where they came from.

Step 2. User Signs Up#

They click "Start Free Trial" and create an account.

Services used.

• Clerk handles the signup form and account creation
• PostHog tracks the "signup completed" event
• Resend sends a welcome email

Step 3. User Creates Content#

They make their first document and upload an image to it.

Services used.

• Supabase stores the document data (title, content, metadata)
• Cloudflare R2 stores the uploaded image
• The image URL from R2 gets saved in Supabase with the document

Step 4. User Upgrades to Paid#

A week later, they decide to subscribe to the Pro plan.

Services used.

• Stripe handles the payment checkout
• A Stripe webhook tells your app the payment went through
• Your app updates the user's plan in Supabase
• Resend sends a payment confirmation email
• PostHog tracks the "subscription started" event

Step 5. Ongoing Usage#

The user keeps coming back to the app every day.

Services used.

• Clerk keeps them logged in (session management)
• Supabase stores all their documents
• R2 holds all their uploaded files
• PostHog tracks which features they use
• Stripe charges them monthly
• Resend sends their monthly receipt

How Data Flows Between Services#

Here's a diagram of how it all connects.

                    +--------+
                    |  User  |
                    +---+----+
                        |
                        v
   +-------+      +----------+      +---------+
   | Clerk |<---->|   Your   |<---->|Supabase |
   | Auth  |      |   App    |      |Database |
   +-------+      +----+-----+      +---------+
                       |
         +------+------+------+------+
         |      |             |      |
         v      v             v      v
      +----+ +------+    +-------+ +------+
      | R2 | |Stripe|    |PostHog| |Resend|
      +----+ +------+    +-------+ +------+
      Files  Payments    Analytics  Email

Your app is the hub in the middle. It talks to each service whenever it needs to. The lines show your app sending requests out to each service, and each service sends back the data your app asked for.

Connecting User IDs#

Here's one pattern that matters a LOT. You need to connect the same person across every service.

When someone signs up with Clerk, they get a Clerk user ID (like user_abc123). You'll store that ID in a few places.

• Supabase. To tie their documents to their account
• Stripe. To tie their subscription to their account
• PostHog. To follow their whole journey

That way, when Stripe says "user xyz paid," you can look them up in your database and update their subscription status.

I've got a Google Ads client running a $5.69 ROAS on non-branded traffic, and that number is tied to their ticketing system. Connecting the dots between systems is what makes a number like that worth trusting.

// Example: Handling a Stripe payment webhook (runs on your server)
// supabase, resend and posthog are clients you set up earlier.
// posthog here is the server library (posthog-node), not the browser one.
async function handlePayment(stripeCustomerId) {
  // Find the user in your database by their Stripe ID
  const { data: user } = await supabase
    .from('users')
    .select('*')
    .eq('stripe_customer_id', stripeCustomerId)
    .single()
 
  if (!user) return // no matching user, nothing to update
 
  // Update their subscription status
  await supabase
    .from('users')
    .update({ plan: 'pro', subscribed_at: new Date() })
    .eq('id', user.id)
 
  // Send confirmation email
  await resend.emails.send({
    from: 'Your App <[email protected]>',
    to: user.email,
    subject: 'Welcome to Pro!',
    html: '<p>Thanks for subscribing!</p>'
  })
 
  // Track the event
  posthog.capture({
    distinctId: user.clerk_id,
    event: 'subscription_started',
    properties: { plan: 'pro' }
  })
}

Choosing What You Need#

You don't have to use every one of these services. Start with what you actually need.

Minimum Viable Product (MVP)#

Just getting started? You might only need two.

• Clerk - Users need to log in
• Supabase - You need somewhere to keep your data

That's it! Add more services as your needs grow.

Adding Payments#

When you're ready to make money...

• Add Stripe for payment processing
• Maybe add Resend for receipts

Scaling Up#

As you grow...

• Add R2 if users upload files
• Add PostHog to understand behavior
• Level up your email with more Resend templates

Cost Considerations#

Good news. All of these services have free tiers that work for getting started. Free tiers change a lot though, so treat this table as a snapshot from October 2026 and check each service's pricing page before you plan around it.

You could build and launch a real app for $0/month until you've got a real crowd of users.

A Sample Tech Stack#

Here's a full tech stack for a modern web app.

This is a production-ready stack that real companies use. And you've already learned about every piece of it!

Review: What We Learned#

Let's run back through the services from the last few modules.

Step 1. Clerk - Authentication#

Handles signup, login, passwords, and sessions. You never have to store passwords yourself.

Step 2. Supabase - Database#

Stores your app's data with real-time updates. Great for apps that need data to sync instantly.

Step 3. Cloudflare R2 - File Storage#

Stores images, videos, and documents. Fast, affordable, and ZERO egress fees.

Step 4. Resend - Email#

Sends transactional emails like welcome messages, password resets and receipts. Simple API, great deliverability.

Step 5. PostHog - Analytics#

Tracks what people do in your app. Page views, clicks, funnels, and session recordings.

Step 6. Stripe - Payments#

Processes credit cards and subscriptions. Handles security, fraud, and compliance for you.

The Developer Services Mindset#

The big lesson from these modules... you don't have to build everything yourself.

Smart developers do a few things.

• Use services for common problems
• Put their energy into what makes their app different
• Stand on the shoulders of giants

Each of these services is built by a team that obsesses over one job, whether that's authentication, payments or email delivery. They've already solved problems you'll never have to think about (thank goodness).

TL;DR#

• Developer services work together to power real applications
• Your app coordinates the services and connects user IDs across them
• Start with just what you need (often just auth and database)
• Add more services as you grow
• Free tiers let you build without spending money
• Focus on what makes your app unique, let services handle the rest

What's Next?#

Congrats! You've finished the whole run of service modules, and you now understand the building blocks behind modern apps.

In the next module you'll learn how apps talk to each other through APIs, the glue that connects every service you just met...