---
title: "The Modern App Stack Explained: Auth, Data and Payments"
description: "How a modern SaaS fits together: frameworks, Clerk for authentication, Convex for reactive data and Stripe for payments. A clear map for builders."
type: "article"
locale: "en"
category: "Technik"
canonical: "https://agenticschool.dev/knowledge/modern-app-stack-explained"
datePublished: "2026-06-12"
dateModified: "2026-06-12"
---

# The Modern App Stack Explained: Auth, Data and Payments

- Category: Technik
- Reading time: 10 min
- Published: 2026-06-12
- Updated: 2026-06-12
- Keywords: app stack, Clerk, Convex, Stripe, SaaS, authentication
- Canonical URL: https://agenticschool.dev/knowledge/modern-app-stack-explained
- Locale: en

> How a modern SaaS fits together: frameworks, Clerk for authentication, Convex for reactive data and Stripe for payments. A clear map for builders.

A real product is more than a website. It needs users who can log in, data that persists and updates, and a way to take payment. The good news is that you no longer build these hard parts from scratch: dedicated services handle each one safely. This guide gives you the map - how the pieces fit, which service does what, and the order to assemble them - so you can build a production SaaS without reinventing the dangerous parts.

## How the pieces fit

A modern app splits into a fast, indexable marketing surface and the interactive app behind login. A framework like Next.js, Astro or TanStack provides structure, routing and rendering. On top of that you add three services: authentication, a database and payments. Keeping the marketing and app surfaces cleanly separated lets each be optimised for its job, which helps both performance and SEO.

## Authentication with Clerk

Storing passwords, managing sessions and resisting attacks correctly is a deep specialism, so you should not hand-roll it. Clerk handles sign-up, login, sessions and social login like Google OAuth, which removes a whole category of security risk. You integrate its components and let it manage identity, while your app manages everything else. Moving from development to production is a careful key swap rather than a rebuild.

## Reactive data with Convex

Convex stores your data and runs your backend logic as TypeScript functions. You declare a schema, read with queries and change with mutations, and the UI updates automatically when anything it depends on changes. Strong typing flows from the database into your components, removing a whole class of bugs. For real products, prefer soft deletes, which mark a row as deleted but keep it, so data can be recovered and history stays intact.

## Payments with Stripe

Stripe is the standard for taking payment, and it means you never touch raw card data. Checkout hosts a secure payment page, subscriptions handle recurring revenue, and webhooks tell your app what happened so it stays in sync with billing reality. A strict separation of test and production keys lets you build and verify everything without moving real money. The harder details, proration, coupons and embedded checkout, build on this foundation.

## Secrets tie it all together

Every service you add comes with secret keys, and leaking one can be catastrophic. Keep them out of code in env files that are always gitignored, use separate keys for development and production so a mistake in dev cannot touch live data, and encrypt sensitive data at rest. This discipline is the connective tissue of the whole stack, and it has to scale as each new integration arrives.

## Going live

Launch means switching every service from development to production keys and data, one at a time, verifying each before the next. Then make the live product discoverable by registering with Search Console and submitting a sitemap, and fast by treating Core Web Vitals as part of launch. A careful order prevents the classic launch-day failure where one missed key takes down logins or billing.

## FAQ

### Should I build my own authentication?

No. Password storage, sessions and attack resistance are a deep specialism that is easy to get dangerously wrong. A service like Clerk handles it for you and removes a whole category of security risk from your product.

### What makes Convex different from a normal database?

Convex is reactive: when data changes, every query that depends on it updates automatically and the UI follows, so you stop writing manual refetch logic. Your backend functions are typed TypeScript, which catches bugs early.

### Why use Stripe instead of handling cards myself?

Stripe Checkout hosts the payment form so card data never touches your servers, which dramatically reduces your compliance burden and risk. It also handles subscriptions, webhooks and billing edge cases for you.

### How should I handle secrets across environments?

Keep secrets in gitignored env files, use separate keys for development and production, and set production secrets as host environment variables. Encrypt sensitive data at rest. Never commit a key to your repository.