33 |
35 |
21 |
22 |
23 | Welcome back
24 | Sign in to your account to continue
25 |
26 |
27 |
40 |
41 |
42 |
43 | );
44 | }
--------------------------------------------------------------------------------
/apps/user-application/src/components/default-catch-boundary.tsx:
--------------------------------------------------------------------------------
1 | import { Link, rootRouteId, useMatch, useRouter } from "@tanstack/react-router";
2 | import type { ErrorComponentProps } from "@tanstack/react-router";
3 | import {
4 | AlertTriangle,
5 | RefreshCw,
6 | ArrowLeft,
7 | Home,
8 | ChevronDown,
9 | Bug,
10 | Mail,
11 | } from "lucide-react";
12 | import { Button } from "@/components/ui/button";
13 | import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
14 | import { Alert, AlertDescription } from "@/components/ui/alert";
15 | import {
16 | Collapsible,
17 | CollapsibleContent,
18 | CollapsibleTrigger,
19 | } from "@/components/ui/collapsible";
20 | import { useState } from "react";
21 |
22 | export function DefaultCatchBoundary({ error }: ErrorComponentProps) {
23 | const router = useRouter();
24 | const isRoot = useMatch({
25 | strict: false,
26 | select: (state) => state.id === rootRouteId,
27 | });
28 | const [showDetails, setShowDetails] = useState(false);
29 |
30 | console.error(error);
31 |
32 | // Format error details for display
33 | const errorMessage = error?.message || "An unexpected error occurred";
34 | const errorStack = error?.stack || "";
35 | const hasStack = errorStack.length > 0;
36 |
37 | const handleReportError = () => {
38 | const subject = encodeURIComponent("Error Report");
39 | const body = encodeURIComponent(
40 | `An error occurred in the application:\n\nError: ${errorMessage}\n\nStack Trace:\n${errorStack}\n\nPlease describe what you were doing when this error occurred:`,
41 | );
42 | window.location.href = `mailto:support@example.com?subject=${subject}&body=${body}`;
43 | };
44 |
45 | return (
46 |
47 |
48 |
49 |
61 |
62 |
63 | {/* Error Alert */}
64 |
65 |
67 | {errorMessage}
68 |
69 |
70 |
71 | {/* Action Buttons */}
72 |
103 |
104 |
115 |
116 |
117 |
126 |
127 | )}
128 |
129 | {/* Help Section */}
130 |
147 |
148 |
149 | );
150 | }
151 |
--------------------------------------------------------------------------------
/apps/user-application/src/components/demo/index.ts:
--------------------------------------------------------------------------------
1 | export { MiddlewareDemo } from './middleware-demo'
--------------------------------------------------------------------------------
/apps/user-application/src/components/landing/claude-code-section.tsx:
--------------------------------------------------------------------------------
1 | import { Badge } from "@/components/ui/badge";
2 | import { Sparkles } from "lucide-react";
3 |
4 | export function ClaudeCodeSection() {
5 | return (
6 |
50 |
60 |
51 |
53 |
54 | Something went wrong
55 |
59 | 56 | We encountered an unexpected error. Please try again. 57 |
58 |
73 |
80 |
81 | {isRoot ? (
82 |
88 | ) : (
89 |
97 | )}
98 |
99 |
100 | {/* Error Details (Collapsible) */}
101 | {hasStack && (
102 |
118 |
125 | 119 | Error Stack Trace: 120 |
121 |
122 | {errorStack}
123 |
124 |
131 |
146 |
132 |
145 |
133 | If this error persists, please report it to our support team.
134 |
135 |
144 |
11 |
43 |
12 |
13 |
16 |
23 |
24 | 17 | Setup Powered by Claude Code 18 |
19 |20 | Let Claude Code agents help you set up this project 21 |
22 |
25 |
42 |
26 | 
31 |
32 |
33 |
31 |
34 |
41 | 35 | Just say this to Claude Code: 36 |
37 |
38 | Help me setup this project
39 |
40 |
9 |
109 |
10 |
22 |
23 |
11 |
20 |
21 |
24 |
25 | 9 Modules • 11 Hours • 58 Video Lessons
26 |
27 |
28 |
108 | 29 | Full-Stack SaaS Development on Cloudflare Workers 30 |
31 | 32 |33 | Build blazing-fast, globally distributed applications with sub-50ms 34 | response times. Master the Cloudflare ecosystem through 35 | project-based learning. 36 |
37 | 38 |
39 |
95 |
96 |
40 |
64 |
65 | What You'll Build
41 |
42 |
63 |
43 |
48 |
49 |
54 |
55 |
58 |
59 |
62 |
66 |
94 | 67 | Technologies Covered 68 |
69 |
70 |
93 |
71 |
76 |
77 |
82 |
83 |
88 |
89 |
92 |
97 |
106 |
107 |
101 | {/* Template Features Section */}
102 |
176 |
103 |
110 |
111 | 104 | Production-Ready SaaS Template 105 |
106 |107 | Pre-configured with authentication, database, and payments - ready to deploy 108 |
109 |
112 | {templateFeatures.map((feature) => {
113 | return (
114 |
115 |
116 | {feature.title}
129 |
130 |
131 |
132 | {feature.description}
133 |
134 |
135 |
136 | )
137 | })}
138 |
139 |
140 | {/* Core Technologies Section */}
141 |
117 |
125 | {feature.badge}
126 |
127 |
128 |
118 | 
123 |
124 |
142 |
149 |
150 | 143 | Built with Modern Technologies 144 |
145 |146 | A carefully curated stack of the best tools and libraries for React development 147 |
148 |
151 | {features.map((feature) => {
152 | const IconComponent = feature.icon
153 | return (
154 |
155 |
156 | {feature.title}
165 |
166 |
167 |
168 | {feature.description}
169 |
170 |
171 |
172 | )
173 | })}
174 |
175 |
157 |
161 | {feature.badge}
162 |
163 |
164 |
158 |
160 |
10 |
58 |
59 | {/* Background gradient */}
60 |
11 |
12 |
15 |
16 |
19 |
20 |
23 |
24 |
25 | 26 | Modern SaaS 27 | Starter Kit 28 |
29 | 30 |31 | Ship your SaaS faster with pre-configured authentication, database, 32 | and payments. Built on TanStack Start with React 19, TypeScript, and 33 | edge-ready infrastructure. Everything you need to launch your next 34 | project. 35 |
36 | 37 |
38 |
39 |
43 |
44 |
45 |
56 |
57 |
61 |
68 |
69 |
37 |
45 |
46 |
56 |
57 | {/* Right side - Notifications and user menu */}
58 |
47 |
55 |
59 |
63 |
64 |
65 |
77 |
78 |
79 |
44 |
61 |
93 |
94 |
95 |
116 |
117 | {/* Mobile Sidebar Overlay */}
118 |
45 | {!isCollapsed && (
46 |
59 |
60 | 47 | Dashboard 48 |
49 | )} 50 | 58 |
96 |
115 |
102 |
114 |
103 | U
104 |
105 | {!isCollapsed && (
106 |
107 | User
108 |
109 | user@example.com
110 |
111 |
112 | )}
113 |
119 | {/* Mobile implementation can be added here with a sheet/drawer */}
120 |
121 |
122 | );
123 | }
--------------------------------------------------------------------------------
/apps/user-application/src/components/navigation/index.ts:
--------------------------------------------------------------------------------
1 | export { NavigationBar } from './navigation-bar'
--------------------------------------------------------------------------------
/apps/user-application/src/components/not-found.tsx:
--------------------------------------------------------------------------------
1 | import { Link } from "@tanstack/react-router";
2 | import { ArrowLeft, Home, Search, FileQuestion } from "lucide-react";
3 | import { Button } from "@/components/ui/button";
4 | import { Card, CardContent } from "@/components/ui/card";
5 |
6 | export function NotFound({ children }: { children?: any }) {
7 | return (
8 |
9 |
10 |
11 |
60 |
61 |
62 | );
63 | }
64 |
--------------------------------------------------------------------------------
/apps/user-application/src/components/payments/polar/index.ts:
--------------------------------------------------------------------------------
1 | export { PricingCard } from "./pricing-card";
2 | export { PricingGrid } from "./pricing-grid";
3 | export { useCheckout } from "./use-checkout";
--------------------------------------------------------------------------------
/apps/user-application/src/components/payments/polar/pricing-card.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Card,
3 | CardContent,
4 | CardDescription,
5 | CardHeader,
6 | CardTitle,
7 | } from "@/components/ui/card";
8 | import { Button } from "@/components/ui/button";
9 | import { Badge } from "@/components/ui/badge";
10 | import { Check } from "lucide-react";
11 | import { Price, Product, Subscription } from "./types";
12 |
13 | interface PricingCardProps {
14 | product: Product;
15 | subscription: Subscription;
16 | onCheckout: (productId: string) => void;
17 | isCheckoutPending: boolean;
18 | }
19 |
20 | export function PricingCard({
21 | product,
22 | subscription,
23 | onCheckout,
24 | isCheckoutPending,
25 | }: PricingCardProps) {
26 | const price = product.prices[0];
27 |
28 | const formatPrice = (price: Price) => {
29 | if (!price) {
30 | return "Price unavailable";
31 | }
32 | if (price.type !== "recurring") {
33 | return "Currency not specified";
34 | }
35 |
36 | if (price.amountType === "fixed" && price.priceAmount) {
37 | return new Intl.NumberFormat("en-US", {
38 | style: "currency",
39 | currency: price.priceCurrency.toUpperCase(),
40 | }).format(price.priceAmount / 100);
41 | }
42 |
43 | if (price.amountType === "custom") {
44 | const min = price.minimumAmount ? price.minimumAmount / 100 : 0;
45 | const max = price.maximumAmount ? price.maximumAmount / 100 : null;
46 | const formatter = new Intl.NumberFormat("en-US", {
47 | style: "currency",
48 | currency: price.priceCurrency.toUpperCase(),
49 | });
50 |
51 | if (max) {
52 | return `${formatter.format(min)} - ${formatter.format(max)}`;
53 | }
54 | return `From ${formatter.format(min)}`;
55 | }
56 |
57 | return "Custom pricing";
58 | };
59 |
60 | const getFeatures = (metadata: Record
12 | {/* Icon */}
13 |
59 |
14 |
16 |
17 | {/* Heading */}
18 |
19 |
30 |
31 | {/* Actions */}
32 | 20 | Page Not Found 21 |
22 |
23 | {children || (
24 |
29 | 25 | The page you're looking for doesn't exist or has been moved. 26 |
27 | )} 28 |
33 |
41 |
47 |
48 |
49 | {/* Help text */}
50 |
51 |
58 |
52 |
57 |
73 |
85 | );
86 | } else {
87 | return (
88 |
74 |
75 | Current Plan
76 |
77 |
81 |
84 | 78 | Status: {subscription.status} 79 |
80 |
89 |
96 | );
97 | }
98 | }
99 |
100 | return (
101 |
109 | );
110 | };
111 |
112 | return (
113 | 90 | Manage your subscription in the portal 91 |
92 | 95 |
116 | {product.name}
117 | {product.isRecurring && (
118 | {product.recurringInterval}
119 | )}
120 |
121 | {product.description && (
122 |
128 |
135 |
136 | {features.length > 0 && (
137 | {formatPrice(price)}
129 | {price.type === "recurring" && (
130 |
131 | per {price.recurringInterval}
132 |
133 | )}
134 |
138 | {features.map((feature, index) => (
139 |
145 | )}
146 |
147 | {renderButton()}
148 |
140 |
143 | ))}
144 |
27 | {sortedProducts.map((product) => (
28 |
37 | );
38 | }
39 |
--------------------------------------------------------------------------------
/apps/user-application/src/components/payments/polar/types.ts:
--------------------------------------------------------------------------------
1 | import { getProducts, collectSubscription } from "@/core/functions/payments";
2 |
3 | export type Products = Awaited
120 | {themeOptions.map((option) => {
121 | const Icon = option.icon;
122 | const isSelected = theme === option.value;
123 |
124 | return (
125 | handleThemeSelect(option.value)}
128 | className={`
129 | flex items-center gap-3 px-3 py-2.5 cursor-pointer
130 | transition-all duration-200 ease-in-out
131 | hover:bg-accent/80 focus:bg-accent/80
132 | rounded-md group
133 | ${isSelected ? 'bg-accent/60 text-accent-foreground' : ''}
134 | `}
135 | >
136 |
162 | );
163 | })}
164 |
165 |
166 | {resolvedTheme && (
167 |
137 |
145 |
146 |
147 |
151 | {option.label}
152 |
153 |
154 | {option.description}
155 |
156 |
157 |
158 | {isSelected && (
159 |
168 |
176 | )}
177 |
169 |
173 | Currently using {resolvedTheme} theme
174 |
175 | Hello "/_auth/app/"!
9 | }
10 |
--------------------------------------------------------------------------------
/apps/user-application/src/routes/_auth/app/polar/checkout.success.tsx:
--------------------------------------------------------------------------------
1 | import { collectSubscription, validPayment } from "@/core/functions/payments";
2 | import { useQuery } from "@tanstack/react-query";
3 | import { createFileRoute } from "@tanstack/react-router";
4 | import { z } from "zod";
5 | import { Button } from "@/components/ui/button";
6 | import { CheckCircle2, Loader2, AlertCircle } from "lucide-react";
7 |
8 | const searchSchema = z.object({
9 | checkout_id: z.string(),
10 | });
11 |
12 | export const Route = createFileRoute("/_auth/app/polar/checkout/success")({
13 | component: RouteComponent,
14 | validateSearch: (search) => searchSchema.parse(search),
15 | beforeLoad: async ({ search }) => {
16 | return search;
17 | },
18 | loader: async (input) => {
19 | const isValid = await validPayment({
20 | data: input.context.checkout_id,
21 | });
22 | return {
23 | isValid,
24 | checkoutId: input.context.checkout_id,
25 | };
26 | },
27 | errorComponent: ({ error }) => {
28 | return (
29 |
30 |
49 | );
50 | },
51 | });
52 |
53 | function RouteComponent() {
54 | const loaderData = Route.useLoaderData();
55 | const nav = Route.useNavigate();
56 |
57 | const { data, isLoading, isFetching, error } = useQuery({
58 | queryKey: [loaderData.checkoutId],
59 | queryFn: collectSubscription,
60 | refetchInterval: (query) => {
61 | if (!query.state.data) {
62 | return 2000;
63 | }
64 | return false;
65 | },
66 | });
67 |
68 | const getStatus = () => {
69 | if (error) return "error";
70 | if (data) return "success";
71 | if (isFetching || isLoading) return "processing";
72 | return "processing";
73 | };
74 |
75 | const status = getStatus();
76 |
77 | const getStatusIcon = () => {
78 | switch (status) {
79 | case "success":
80 | return
31 |
48 |
32 |
34 |
35 |
36 |
41 |
42 | Payment Error
37 |38 | An error occurred while processing your payment. 39 |
40 |
43 |
47 | 44 | {error.message} 45 |
46 |
114 |
166 | );
167 | }
168 |
--------------------------------------------------------------------------------
/apps/user-application/src/routes/_auth/app/polar/portal.tsx:
--------------------------------------------------------------------------------
1 | import { createFileRoute } from "@tanstack/react-router";
2 | import { protectedRequestMiddleware } from "@/core/middleware/auth";
3 | import { Polar } from "@polar-sh/sdk";
4 | import { env } from "cloudflare:workers";
5 |
6 | export const Route = createFileRoute("/_auth/app/polar/portal")({
7 | server: {
8 | middleware: [protectedRequestMiddleware],
9 | handlers: {
10 | GET: async (ctx) => {
11 | const polar = new Polar({
12 | accessToken: env.POLAR_SECRET,
13 | server: "sandbox",
14 | });
15 | const customerSession = await polar.customerSessions.create({
16 | externalCustomerId: ctx.context.userId,
17 | });
18 | return new Response(null, {
19 | status: 302,
20 | headers: {
21 | Location: customerSession.customerPortalUrl,
22 | },
23 | });
24 | },
25 | },
26 | },
27 | });
28 |
--------------------------------------------------------------------------------
/apps/user-application/src/routes/_auth/app/polar/subscriptions.tsx:
--------------------------------------------------------------------------------
1 | import { getProducts, collectSubscription } from "@/core/functions/payments";
2 | import { createFileRoute } from "@tanstack/react-router";
3 | import { useSuspenseQuery } from "@tanstack/react-query";
4 | import { PricingGrid, useCheckout } from "@/components/payments/polar";
5 |
6 | export const Route = createFileRoute("/_auth/app/polar/subscriptions")({
7 | component: RouteComponent,
8 | loader: async ({ context }) => {
9 | await Promise.all([
10 | context.queryClient.prefetchQuery({
11 | queryKey: ["products"],
12 | queryFn: getProducts,
13 | }),
14 | context.queryClient.prefetchQuery({
15 | queryKey: ["subscription"],
16 | queryFn: collectSubscription,
17 | }),
18 | ]);
19 | },
20 | });
21 |
22 | function RouteComponent() {
23 | const { data: products } = useSuspenseQuery({
24 | queryKey: ["products"],
25 | queryFn: getProducts,
26 | refetchOnWindowFocus: true,
27 | });
28 |
29 | const { data: subscription } = useSuspenseQuery({
30 | queryKey: ["subscription"],
31 | queryFn: collectSubscription,
32 | refetchOnWindowFocus: true,
33 | });
34 |
35 | const { redirectToCheckout, isCheckoutPending } = useCheckout();
36 |
37 | return (
38 |
115 |
165 | {getStatusIcon()}
116 |
117 |
118 |
123 |
124 | {title}
119 |120 | {description} 121 |
122 |
125 | {status === "success" && (
126 |
133 | )}
134 |
135 | {status === "error" && (
136 |
155 |
156 |
137 |
145 |
152 |
153 | )}
154 |
157 |
164 | 158 | Transaction ID:{" "} 159 | 160 | {loaderData.checkoutId.slice(-8)} 161 | 162 |
163 |
39 |
53 | );
54 | }
55 |
--------------------------------------------------------------------------------
/apps/user-application/src/routes/_auth/route.tsx:
--------------------------------------------------------------------------------
1 | import { createFileRoute, Outlet } from "@tanstack/react-router";
2 | import { Sidebar } from "@/components/layout/sidebar";
3 | import { Header } from "@/components/layout/header";
4 | import { GoogleLogin } from "@/components/auth/google-login";
5 | import { authClient } from "@/lib/auth-client";
6 | import { useState } from "react";
7 |
8 | export const Route = createFileRoute("/_auth")({
9 | component: RouteComponent,
10 | });
11 |
12 | function RouteComponent() {
13 | const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
14 | const session = authClient.useSession();
15 |
16 | return (
17 | <>
18 | {session.isPending ? (
19 |
40 |
45 |
46 | Choose Your Plan
41 |42 | Select the perfect plan for your needs 43 |
44 |
20 |
21 |
22 | ) : session.data ? (
23 |
24 |
38 | ) : (
39 |
27 | setIsMobileMenuOpen(!isMobileMenuOpen)}
29 | />
30 |
31 |
32 |
36 |
37 |
65 |
87 | );
88 | }
89 |
90 | function RouteComponent() {
91 | const { markdown: content } = Route.useLoaderData();
92 |
93 | return (
94 |
66 |
67 | {language}
68 |
69 |
82 |
83 |
84 | {children}
85 |
86 |
95 |
153 | );
154 | }
155 |
--------------------------------------------------------------------------------
/apps/user-application/src/routes/_static/route.tsx:
--------------------------------------------------------------------------------
1 | import { NavigationBar } from "@/components/navigation";
2 | import { createFileRoute, Outlet } from "@tanstack/react-router";
3 |
4 | export const Route = createFileRoute("/_static")({
5 | component: RouteComponent,
6 | });
7 |
8 | function RouteComponent() {
9 | return (
10 |
96 | (
101 | {children}
128 | ),
129 | code: ({ className, children, ...props }: any) =>
130 | !className || !className.includes("language-") ? (
131 |
, 146 | hr: () =>
, 147 | }} 148 | > 149 | {content} 150 |
151 |
152 | {children}
102 | ), 103 | h2: ({ children }) => ( 104 |{children}
105 | ), 106 | h3: ({ children }) => ( 107 |{children}
108 | ), 109 | p: ({ children }) =>{children}
, 110 | a: ({ href, children }) => ( 111 | 117 | {children} 118 | 119 | ), 120 | ul: ({ children }) => ( 121 |- {children}
- {children}
132 | {children}
133 |
134 | ) : (
135 |
136 | {children}
137 |
138 | ),
139 | pre: CodeBlock,
140 | blockquote: ({ children }) => (
141 | 142 | {children} 143 |144 | ), 145 | br: () =>
, 146 | hr: () =>
, 147 | }} 148 | > 149 | {content} 150 |
11 |
13 |
15 |
16 | );
17 | }
18 |
--------------------------------------------------------------------------------
/apps/user-application/src/routes/api/auth.$.tsx:
--------------------------------------------------------------------------------
1 | import { createFileRoute } from "@tanstack/react-router";
2 | import { getAuth } from "@repo/data-ops/auth/server";
3 |
4 | export const Route = createFileRoute("/api/auth/$")({
5 | server: {
6 | handlers: {
7 | GET: ({ request }) => {
8 | const auth = getAuth();
9 | return auth.handler(request);
10 | },
11 | POST: ({ request }) => {
12 | const auth = getAuth();
13 | return auth.handler(request);
14 | },
15 | },
16 | },
17 | });
18 |
--------------------------------------------------------------------------------
/apps/user-application/src/routes/index.tsx:
--------------------------------------------------------------------------------
1 | import { createFileRoute } from "@tanstack/react-router";
2 | import { NavigationBar } from "@/components/navigation";
3 | import { HeroSection } from "@/components/landing/hero-section";
4 | import { FeaturesSection } from "@/components/landing/features-section";
5 | import { ClaudeCodeSection } from "@/components/landing/claude-code-section";
6 | import { CoursePromoSection } from "@/components/landing/course-promo-section";
7 | import { Footer } from "@/components/landing/footer";
8 | import { MiddlewareDemo } from "@/components/demo";
9 |
10 | export const Route = createFileRoute("/")({
11 | component: LandingPage,
12 | });
13 |
14 | function LandingPage() {
15 | return (
16 |
17 |
19 |
25 |
26 |
27 | );
28 | }
29 |
--------------------------------------------------------------------------------
/apps/user-application/src/server.ts:
--------------------------------------------------------------------------------
1 | // DO NOT DELETE THIS FILE!!!
2 | // This file is a good smoke test to make sure the custom server entry is working
3 | import { setAuth } from "@repo/data-ops/auth/server";
4 | import { initDatabase } from "@repo/data-ops/database/setup";
5 | import handler from "@tanstack/react-start/server-entry";
6 | import { env } from "cloudflare:workers";
7 |
8 | console.log("[server-entry]: using custom server entry in 'src/server.ts'");
9 |
10 | export default {
11 | fetch(request: Request) {
12 | const db = initDatabase({
13 | host: env.DATABASE_HOST,
14 | username: env.DATABASE_USERNAME,
15 | password: env.DATABASE_PASSWORD,
16 | });
17 |
18 | setAuth({
19 | secret: env.BETTER_AUTH_SECRET,
20 | socialProviders: {
21 | google: {
22 | clientId: env.GOOGLE_CLIENT_ID,
23 | clientSecret: env.GOOGLE_CLIENT_SECRET,
24 | },
25 | },
26 | adapter: {
27 | drizzleDb: db,
28 | provider: "mysql",
29 | },
30 | });
31 | return handler.fetch(request, {
32 | context: {
33 | fromFetch: true,
34 | },
35 | });
36 | },
37 | };
38 |
--------------------------------------------------------------------------------
/apps/user-application/src/start.tsx:
--------------------------------------------------------------------------------
1 | import { createStart } from "@tanstack/react-start";
2 |
3 | declare module "@tanstack/react-start" {
4 | interface Register {
5 | server: {
6 | requestContext: {
7 | fromFetch: boolean;
8 | };
9 | };
10 | }
11 | }
12 |
13 | export const startInstance = createStart(() => {
14 | return {
15 | defaultSsr: true,
16 | };
17 | });
18 |
19 | startInstance.createMiddleware().server(({ next }) => {
20 | return next({
21 | context: {
22 | fromStartInstanceMw: true,
23 | },
24 | });
25 | });
26 |
--------------------------------------------------------------------------------
/apps/user-application/src/styles.css:
--------------------------------------------------------------------------------
1 | @import "tailwindcss";
2 |
3 | @import "tw-animate-css";
4 |
5 | :root {
6 | --background: oklch(1 0 0);
7 | --foreground: oklch(0.141 0.005 285.823);
8 | --card: oklch(1 0 0);
9 | --card-foreground: oklch(0.141 0.005 285.823);
10 | --popover: oklch(1 0 0);
11 | --popover-foreground: oklch(0.141 0.005 285.823);
12 | --primary: oklch(0.21 0.006 285.885);
13 | --primary-foreground: oklch(0.985 0 0);
14 | --secondary: oklch(0.967 0.001 286.375);
15 | --secondary-foreground: oklch(0.21 0.006 285.885);
16 | --muted: oklch(0.967 0.001 286.375);
17 | --muted-foreground: oklch(0.552 0.016 285.938);
18 | --accent: oklch(0.967 0.001 286.375);
19 | --accent-foreground: oklch(0.21 0.006 285.885);
20 | --destructive: oklch(0.577 0.245 27.325);
21 | --destructive-foreground: oklch(0.577 0.245 27.325);
22 | --border: oklch(0.92 0.004 286.32);
23 | --input: oklch(0.92 0.004 286.32);
24 | --ring: oklch(0.871 0.006 286.286);
25 | --chart-1: oklch(0.646 0.222 41.116);
26 | --chart-2: oklch(0.6 0.118 184.704);
27 | --chart-3: oklch(0.398 0.07 227.392);
28 | --chart-4: oklch(0.828 0.189 84.429);
29 | --chart-5: oklch(0.769 0.188 70.08);
30 | --radius: 0.625rem;
31 | --sidebar: oklch(0.985 0 0);
32 | --sidebar-foreground: oklch(0.141 0.005 285.823);
33 | --sidebar-primary: oklch(0.21 0.006 285.885);
34 | --sidebar-primary-foreground: oklch(0.985 0 0);
35 | --sidebar-accent: oklch(0.967 0.001 286.375);
36 | --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
37 | --sidebar-border: oklch(0.92 0.004 286.32);
38 | --sidebar-ring: oklch(0.871 0.006 286.286);
39 | }
40 |
41 | .dark {
42 | --background: oklch(0.141 0.005 285.823);
43 | --foreground: oklch(0.985 0 0);
44 | --card: oklch(0.141 0.005 285.823);
45 | --card-foreground: oklch(0.985 0 0);
46 | --popover: oklch(0.141 0.005 285.823);
47 | --popover-foreground: oklch(0.985 0 0);
48 | --primary: oklch(0.985 0 0);
49 | --primary-foreground: oklch(0.21 0.006 285.885);
50 | --secondary: oklch(0.274 0.006 286.033);
51 | --secondary-foreground: oklch(0.985 0 0);
52 | --muted: oklch(0.274 0.006 286.033);
53 | --muted-foreground: oklch(0.705 0.015 286.067);
54 | --accent: oklch(0.274 0.006 286.033);
55 | --accent-foreground: oklch(0.985 0 0);
56 | --destructive: oklch(0.396 0.141 25.723);
57 | --destructive-foreground: oklch(0.637 0.237 25.331);
58 | --border: oklch(0.274 0.006 286.033);
59 | --input: oklch(0.274 0.006 286.033);
60 | --ring: oklch(0.442 0.017 285.786);
61 | --chart-1: oklch(0.488 0.243 264.376);
62 | --chart-2: oklch(0.696 0.17 162.48);
63 | --chart-3: oklch(0.769 0.188 70.08);
64 | --chart-4: oklch(0.627 0.265 303.9);
65 | --chart-5: oklch(0.645 0.246 16.439);
66 | --sidebar: oklch(0.21 0.006 285.885);
67 | --sidebar-foreground: oklch(0.985 0 0);
68 | --sidebar-primary: oklch(0.488 0.243 264.376);
69 | --sidebar-primary-foreground: oklch(0.985 0 0);
70 | --sidebar-accent: oklch(0.274 0.006 286.033);
71 | --sidebar-accent-foreground: oklch(0.985 0 0);
72 | --sidebar-border: oklch(0.274 0.006 286.033);
73 | --sidebar-ring: oklch(0.442 0.017 285.786);
74 | }
75 |
76 | @theme inline {
77 | --color-background: var(--background);
78 | --color-foreground: var(--foreground);
79 | --color-card: var(--card);
80 | --color-card-foreground: var(--card-foreground);
81 | --color-popover: var(--popover);
82 | --color-popover-foreground: var(--popover-foreground);
83 | --color-primary: var(--primary);
84 | --color-primary-foreground: var(--primary-foreground);
85 | --color-secondary: var(--secondary);
86 | --color-secondary-foreground: var(--secondary-foreground);
87 | --color-muted: var(--muted);
88 | --color-muted-foreground: var(--muted-foreground);
89 | --color-accent: var(--accent);
90 | --color-accent-foreground: var(--accent-foreground);
91 | --color-destructive: var(--destructive);
92 | --color-destructive-foreground: var(--destructive-foreground);
93 | --color-border: var(--border);
94 | --color-input: var(--input);
95 | --color-ring: var(--ring);
96 | --color-chart-1: var(--chart-1);
97 | --color-chart-2: var(--chart-2);
98 | --color-chart-3: var(--chart-3);
99 | --color-chart-4: var(--chart-4);
100 | --color-chart-5: var(--chart-5);
101 | --radius-sm: calc(var(--radius) - 4px);
102 | --radius-md: calc(var(--radius) - 2px);
103 | --radius-lg: var(--radius);
104 | --radius-xl: calc(var(--radius) + 4px);
105 | --color-sidebar: var(--sidebar);
106 | --color-sidebar-foreground: var(--sidebar-foreground);
107 | --color-sidebar-primary: var(--sidebar-primary);
108 | --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
109 | --color-sidebar-accent: var(--sidebar-accent);
110 | --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
111 | --color-sidebar-border: var(--sidebar-border);
112 | --color-sidebar-ring: var(--sidebar-ring);
113 | }
114 |
115 | @layer base {
116 | * {
117 | @apply border-border outline-ring/50;
118 | }
119 | body {
120 | @apply bg-background text-foreground;
121 | }
122 | }
123 |
--------------------------------------------------------------------------------
/apps/user-application/src/utils/seo.ts:
--------------------------------------------------------------------------------
1 | export const seo = ({
2 | title,
3 | description,
4 | keywords,
5 | image,
6 | }: {
7 | title: string;
8 | description?: string;
9 | image?: string;
10 | keywords?: string;
11 | }) => {
12 | const tags = [
13 | { title },
14 | { name: "description", content: description },
15 | { name: "keywords", content: keywords },
16 | { name: "twitter:title", content: title },
17 | { name: "twitter:description", content: description },
18 | { name: "twitter:creator", content: "@tannerlinsley" },
19 | { name: "twitter:site", content: "@tannerlinsley" },
20 | { name: "og:type", content: "website" },
21 | { name: "og:title", content: title },
22 | { name: "og:description", content: description },
23 | ...(image
24 | ? [
25 | { name: "twitter:image", content: image },
26 | { name: "twitter:card", content: "summary_large_image" },
27 | { name: "og:image", content: image },
28 | ]
29 | : []),
30 | ];
31 |
32 | return tags;
33 | };
34 |
--------------------------------------------------------------------------------
/apps/user-application/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "include": ["**/*.ts", "**/*.tsx"],
3 | "compilerOptions": {
4 | "noUncheckedIndexedAccess": true,
5 | "target": "ES2022",
6 | "jsx": "react-jsx",
7 | "module": "ESNext",
8 | "lib": ["ES2022", "DOM", "DOM.Iterable"],
9 | "types": ["vite/client"],
10 |
11 | /* Bundler mode */
12 | "moduleResolution": "bundler",
13 | "allowImportingTsExtensions": true,
14 | "verbatimModuleSyntax": false,
15 | "noEmit": true,
16 |
17 | /* Linting */
18 | "skipLibCheck": true,
19 | "strict": true,
20 | "noUnusedLocals": true,
21 | "noUnusedParameters": true,
22 | "noFallthroughCasesInSwitch": true,
23 | "noUncheckedSideEffectImports": true,
24 | "baseUrl": ".",
25 | "paths": {
26 | "@/*": ["./src/*"]
27 | }
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/apps/user-application/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "vite";
2 | import { tanstackStart } from "@tanstack/react-start/plugin/vite";
3 | import viteReact from "@vitejs/plugin-react";
4 | import viteTsConfigPaths from "vite-tsconfig-paths";
5 | import tailwindcss from "@tailwindcss/vite";
6 | import { cloudflare } from "@cloudflare/vite-plugin";
7 |
8 | const config = defineConfig({
9 | plugins: [
10 | // this is the plugin that enables path aliases
11 | viteTsConfigPaths({
12 | projects: ["./tsconfig.json"],
13 | }),
14 | tailwindcss(),
15 | tanstackStart({
16 | srcDirectory: "src",
17 | start: { entry: "./start.tsx" },
18 | server: { entry: "./server.ts" },
19 | }),
20 | viteReact(),
21 | cloudflare({
22 | viteEnvironment: {
23 | name: "ssr",
24 | },
25 | }),
26 | ],
27 | });
28 |
29 | export default config;
30 |
--------------------------------------------------------------------------------
/apps/user-application/wrangler.jsonc:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "node_modules/wrangler/config-schema.json",
3 | "name": "tanstack-start-app",
4 | "compatibility_date": "2025-09-02",
5 | "compatibility_flags": ["nodejs_compat"],
6 | "main": "./src/server.ts",
7 | "vars": {
8 | "MY_VAR": "Hello from Cloudflare",
9 | },
10 | }
11 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "saas-kit",
3 | "version": "1.0.0",
4 | "description": "",
5 | "scripts": {
6 | "setup": "pnpm i && pnpm run build:data-ops",
7 | "build:data-ops": "pnpm run --filter data-ops build",
8 | "dev:user-application": "pnpm run --filter user-application dev",
9 | "deploy:user-application": "pnpm run build:data-ops && pnpm run --filter user-application deploy",
10 | "dev:data-service": "pnpm run --filter data-service dev",
11 | "deploy:data-service": "pnpm run build:data-ops && pnpm run --filter data-service deploy"
12 | },
13 | "keywords": [],
14 | "author": "",
15 | "license": "ISC",
16 | "packageManager": "pnpm@10.14.0",
17 | "devDependencies": {
18 | "@types/node": "^22.18.12",
19 | "typescript": "^5.9.3"
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/packages/data-ops/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | dist/
3 | config/test.sqlite
4 |
--------------------------------------------------------------------------------
/packages/data-ops/config/auth.ts:
--------------------------------------------------------------------------------
1 | // packages/data-ops/config/auth.ts
2 | import { createBetterAuth } from "../src/auth/setup";
3 | import { initDatabase } from "../src/database/setup";
4 | import { drizzleAdapter } from "better-auth/adapters/drizzle";
5 |
6 | export const auth = createBetterAuth({
7 | database: drizzleAdapter(
8 | initDatabase({
9 | password: process.env.DATABASE_PASSWORD!,
10 | host: process.env.DATABASE_HOST!,
11 | username: process.env.DATABASE_USERNAME!,
12 | }),
13 | {
14 | provider: "mysql",
15 | },
16 | ),
17 | });
18 |
--------------------------------------------------------------------------------
/packages/data-ops/drizzle.config.ts:
--------------------------------------------------------------------------------
1 | // packages/data-ops/drizzle.config.ts
2 | import type { Config } from "drizzle-kit";
3 | const config: Config = {
4 | out: "./src/drizzle",
5 | schema: ["./src/drizzle/auth-schema.ts"],
6 | dialect: "mysql",
7 | dbCredentials: {
8 | url: `mysql://${process.env.DATABASE_USERNAME}:${process.env.DATABASE_PASSWORD}@${process.env.DATABASE_HOST}`,
9 | },
10 | tablesFilter: ["!auth_*"],
11 | };
12 |
13 | export default config satisfies Config;
14 |
--------------------------------------------------------------------------------
/packages/data-ops/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@repo/data-ops",
3 | "version": "1.0.0",
4 | "description": "Manage auth, database, schemas, and queries",
5 | "exports": {
6 | "./auth/*": {
7 | "default": "./dist/auth/*.js",
8 | "types": "./dist/auth/*.d.ts"
9 | },
10 | "./database/*": {
11 | "default": "./dist/database/*.js",
12 | "types": "./dist/database/*.d.ts"
13 | },
14 | "./zod-schema/*": {
15 | "default": "./dist/zod-schema/*.js",
16 | "types": "./dist/zod-schema/*.d.ts"
17 | },
18 | "./queries/*": {
19 | "default": "./dist/queries/*.js",
20 | "types": "./dist/queries/*.d.ts"
21 | }
22 | },
23 | "scripts": {
24 | "build": "tsc -p tsconfig.json --outDir ./dist && tsc-alias",
25 | "better-auth:generate": "mkdir -p src/drizzle && npx @better-auth/cli@latest generate --config ./config/auth.ts --output ./src/drizzle/auth-schema.ts",
26 | "drizzle:generate": "drizzle-kit generate --config drizzle.config.ts",
27 | "drizzle:migrate": "drizzle-kit migrate --config drizzle.config.ts",
28 | "drizzle:pull": "drizzle-kit pull --config drizzle.config.ts"
29 | },
30 | "keywords": [],
31 | "author": "",
32 | "license": "ISC",
33 | "packageManager": "pnpm@10.14.0",
34 | "dependencies": {
35 | "@neondatabase/serverless": "^1.0.1",
36 | "@planetscale/database": "^1.19.0",
37 | "@polar-sh/better-auth": "^1.1.0",
38 | "@polar-sh/sdk": "^0.34.13",
39 | "better-auth": "^1.3.7",
40 | "better-sqlite3": "^12.2.0",
41 | "drizzle-orm": "^0.44.5",
42 | "zod": "^4.1.0"
43 | },
44 | "devDependencies": {
45 | "@cloudflare/workers-types": "^4.20250823.0",
46 | "@types/better-sqlite3": "^7.6.13",
47 | "better-sqlite#": "link:@types/better-sqlite#",
48 | "drizzle-kit": "^0.31.4",
49 | "mysql2": "^3.14.3",
50 | "postgres": "^3.4.7",
51 | "tsc-alias": "^1.8.16",
52 | "typescript": "^5.9.2"
53 | }
54 | }
55 |
--------------------------------------------------------------------------------
/packages/data-ops/src/auth/server.ts:
--------------------------------------------------------------------------------
1 | import { createBetterAuth } from "@/auth/setup";
2 | import { getDb } from "@/database/setup";
3 | import {
4 | auth_account,
5 | auth_session,
6 | auth_verification,
7 | auth_user,
8 | } from "@/drizzle/auth-schema";
9 | import { drizzleAdapter } from "better-auth/adapters/drizzle";
10 |
11 | let betterAuth: ReturnType