The tech stack of TanStarter
The technologies behind TanStarter and why we picked them.
Starting a SaaS project from scratch means picking a framework, a database, an auth library, a payment integration, a CSS approach, and a hosting platform before you write any actual product code. TanStarter ships with all of these already wired together. Here's what's inside and why.
Quick reference
| # | Layer | Technology |
|---|---|---|
| 1 | Framework | TanStack Start |
| 2 | Database | Cloudflare D1 + Drizzle ORM |
| 3 | Storage | Cloudflare R2 |
| 4 | Cache | Cloudflare KV |
| 5 | Deployment | Cloudflare Workers |
| 6 | AI | Cloudflare Workers AI + TanStack AI |
| 7 | Cloudflare Email Service / Resend | |
| 8 | Authentication | Better Auth |
| 9 | Payments | Stripe / Creem / Waffo |
| 10 | Newsletter | Resend / Beehiiv |
| 11 | Localization | Paraglide + Inlang |
| 12 | UI | Tailwind CSS + Shadcn UI + Base UI |
1. TanStack Start
The framework is TanStack Start, a full-stack React framework. You get file-based routing via TanStack Router and server-state management via TanStack Query. Everything is TypeScript-first, so route params, loader data, and server function inputs are all type-checked.
2. Database: Cloudflare D1 + Drizzle ORM
The database is Cloudflare D1, a serverless SQLite database that runs at the edge. Drizzle ORM sits on top, giving you type-safe queries, schema migrations, and a visual studio for browsing your tables. No database server to manage.
3. Storage: Cloudflare R2
File storage uses Cloudflare R2. Users can upload files, and each file can be set to public or private access. Files are accessed through Wrangler bindings, so there are no S3 API keys to manage.
4. Cache: Cloudflare KV
mkfast Template includes Cloudflare KV as an optional cache layer for read-heavy server data.
Use it for low-risk data such as newsletter status checks, public lists, and repeated third-party API responses. Payments, auth, quotas, and other critical state still belong in D1 or the service that owns that state.
5. Deployment: Cloudflare Workers
The app deploys to Cloudflare Workers. The compiled template is around 2 MB, so it fits on the free plan. Run pnpm deploy and you're live.
6. AI: Cloudflare Workers AI + TanStack AI
TanStarter ships with a full AI playground powered by TanStack AI, Cloudflare Workers AI, and fal.ai adapters.
- Cloudflare Workers AI — Run AI models at the edge via REST API, including text processing (BART summarization, M2M100 translation), chat (Llama 3.1), and image generation (Flux, SDXL, DreamShaper).
- TanStack AI — Provides a unified adapter layer across AI providers. Swap between Cloudflare Workers AI and fal.ai without changing your application code.
- fal.ai — Additional image generation (Gemini, Flux, GPT Image 2) and image editing (Gemini 2.5 Flash) capabilities via @tanstack/ai fal adapter.
7. Email: Cloudflare Email Service + Resend
Email is handled by two providers. Cloudflare Email Service (Routing Rules) forwards inbound emails to your app without exposing personal addresses — useful for support aliases like support@yourdomain.com. Resend handles outbound transactional emails (welcome emails, password resets, etc.) via React Email templates, making it easy to build beautiful emails without wrestling with HTML.
Both integrate through a provider interface in src/mail/, so you can swap or combine them based on your needs.
8. Authentication: Better Auth
Authentication uses Better Auth. Out of the box you get email/password login, Google OAuth, password reset, account deletion, two roles (admin and user), and middleware for protecting routes. It works without any extra configuration.
9. Payments: Stripe / Creem / Waffo
Payments run through Stripe, Creem, or Waffo. One-time purchases, recurring subscriptions, free trials, the customer portal, webhook handling, and pricing UI components are all included. The payment module is built on a provider interface, so swapping to a different provider later is straightforward.
10. Newsletter: Resend / Beehiiv
Newsletter subscriptions are handled by Resend or Beehiiv. Both providers offer API-driven email campaigns with audience management and analytics.
11. Localization: Paraglide + Inlang
Localization is powered by Paraglide and Inlang. The default project ships with English and Chinese, with translated UI messages stored in project.inlang/messages/.
Routes are locale-aware through Paraglide middleware, so Chinese pages use the /zh prefix while the base locale keeps clean default URLs. Blog posts, legal pages, and changelog entries can be localized with locale suffixes like .zh.md, and the content loader resolves each localized document to the same slug.
SEO is localized too: page metadata, <html lang>, Open Graph locale tags, canonical URLs, sitemap entries, and hreflang alternates are generated from the active locale. Payment checkout and billing portal flows also receive the current locale where the provider supports it.
12. Tailwind CSS, Shadcn UI, and Base UI
Styling uses Tailwind CSS v4. UI components come from Shadcn UI (pre-styled, accessible) and Base UI (unstyled primitives for when you want full control). The landing page includes 12+ marketing blocks you can rearrange or remove.