ANALYTICS / LESSON 05

Putting It Together.

Building a complete application

Written by Andrew Lee JenkinsPublished Oct 5, 202611 min readFree lesson

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.

Example

                    +--------+
                    |  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

// 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 <hello@yourdomain.com>',
    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.

Service	Free Tier (as of October 2026)
Clerk	50,000 monthly retained users per app
Supabase	500 MB database, 1 GB file storage, 2 active projects (paused after a week of inactivity)
R2	10 GB storage per month, and no egress fees
Resend	3,000 emails per month, max 100 per day
PostHog	1 million events per month
Stripe	No monthly fee, you pay a fee on each transaction
Hosting	Railway Free includes $1 of monthly usage credit. Railway Hobby starts at $5 per month. Vercel Hobby is free for personal, noncommercial projects.

These free tiers can support a prototype, but a commercial app may need a paid hosting plan and a domain. Check current plan terms before planning a budget. Transaction fees can apply even without a monthly Stripe fee.

A Sample Tech Stack

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

Layer	Technology
Frontend	Next.js (React)
Styling	Tailwind CSS
Authentication	Clerk
Database	Supabase (or Railway + Prisma)
File Storage	Cloudflare R2
Email	Resend
Analytics	PostHog
Payments	Stripe
Hosting	Vercel or Railway

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...

Loading the lesson…

Loading activities…