// Generated by orrery. Edit the diagram spec and re-render instead of editing this file. import { type SVGProps, useId } from "react"; export default function ModernSaaSWebStack(props: SVGProps) { const uid = useId().replace(/[^A-Za-z0-9_-]/g, ""); return ( Modern SaaS web stack Modern SaaS web stack. 12 components in 7 groups. Connections: Web to Next.js app (app.example.com); Web to Cloudflare (API calls); Mobile app to Cloudflare (API calls); Cloudflare to API service (api.example.com); Next.js app to API service (server fetch); Web to Clerk (sign in); Mobile app to Clerk (sign in); API service to Neon (SQL); API service to Upstash (REST); API service to Stripe (checkout); API service to Resend (send email); API service to Stripe (webhooks via api.example.com); API service to Sentry (errors); Next.js app to Sentry (errors); Next.js app to PostHog (events). MODERN SAAS WEB STACK Next.js on Vercel serves the UI and Cloudflare fronts the API; Neon and Upstash hold the data while Clerk, Stripe and Resend handle auth, payments and email APP.EXAMPLE.COM APP.EXAMPLE.COM API CALLS API CALLS API.EXAMPLE.COM SERVER FETCH SERVER FETCH SIGN IN SIGN IN SQL SQL REST CHECKOUT SEND EMAIL WEBHOOKS VIA API.EXAMPLE.COM ERRORS ERRORS EVENTS EDGE FRONTEND BACKEND DATA IDENTITY THIRD-PARTY SERVICES OBSERVABILITY WEB Browser MOBILE APP iOS and Android CLOUDFLARE CDN and WAF for the API API SERVICE Node.js, verifies Clerk JWT NEXT.JS APP Hosted on Vercel NEON Serverless Postgres UPSTASH Redis cache STRIPE Payments and billing RESEND Transactional email CLERK Auth and sessions SENTRY Error tracking POSTHOG Analytics and replay SYNCHRONOUS REQUEST WEBHOOK ERRORS AND ANALYTICS ); }