Tanstack Start
Product Updates

Introducing TanStack App - A Production-Ready Full-Stack React Starter

A comprehensive full-stack React starter template combining TanStack Start, HeroUI, and Better-Auth for a production-ready development experience with powerful integrations.

Introducing TanStack App - A Production-Ready Full-Stack React Starter

Introducing TanStack App

We're excited to introduce TanStack App - a modern, production-ready full-stack React starter template that combines the best-in-class technologies to accelerate your development workflow. Built on TanStack Start, styled with HeroUI, and powered by Better-Auth, this template provides everything you need to launch your next SaaS application.

Why TanStack App?

Building a modern full-stack application from scratch involves countless decisions and weeks of configuration. TanStack App eliminates this complexity by providing a battle-tested foundation with:

  • Production-ready authentication with social providers, magic links, and 2FA
  • Beautiful, accessible UI components out of the box
  • Type-safe full-stack development from database to frontend
  • Scalable architecture with monorepo structure
  • Ready-to-deploy configuration for Vercel and Netlify

🏗️ Technical Architecture

Modern Tech Stack

TanStack App is built on a carefully selected stack that prioritizes developer experience, type safety, and performance:

Frontend Framework

  • TanStack Start - A full-stack React framework with server-side rendering (SSR), streaming, server functions, and API routes
  • TanStack Router - Type-safe routing with built-in data loading and caching
  • React 19 - Latest React features with concurrent rendering support

UI & Styling

  • HeroUI - Beautiful, accessible, and customizable React UI components built on React Aria
  • Tailwind CSS - Utility-first CSS framework for rapid UI development
  • Lucide Icons - Beautiful, consistent icon library

Authentication & Authorization

  • Better-Auth - Comprehensive authentication framework with extensive features:
    • Email/password authentication with verification
    • Social sign-on (Google, GitHub, and more)
    • Magic link authentication
    • Two-factor authentication (2FA)
    • Passkey/WebAuthn support
    • Organization and team management
    • Role-based access control (RBAC)

Database & ORM

  • PostgreSQL - Robust, scalable relational database
  • Prisma - Type-safe ORM with excellent developer experience
  • Supabase - Optional local development with Docker

Payments & Subscriptions

  • Stripe Integration - Full subscription management with Better-Auth Stripe plugin
  • Plan Management - Support for multiple subscription tiers
  • Webhook Handling - Automated subscription lifecycle management

Development Tools

  • TypeScript - End-to-end type safety
  • Biome - Fast linter and formatter (ESLint + Prettier replacement)
  • Turbo - High-performance build system
  • pnpm - Fast, disk-efficient package manager
  • Commitlint - Conventional commit message enforcement

🚀 Production-Ready Features

1. Complete Authentication System

TanStack App includes a fully-featured authentication system that covers all common scenarios:

  • Email/Password Authentication: Secure password hashing with bcrypt and configurable password requirements
  • Email Verification: Automated email verification flow with beautiful React Email templates
  • Social Authentication: Pre-configured Google and GitHub OAuth (easily extensible)
  • Magic Link: Passwordless authentication via email links
  • Two-Factor Authentication: OTP-based 2FA for enhanced security
  • Passkey Support: Modern WebAuthn/Passkey authentication
  • Session Management: Multi-session support with device tracking
  • Password Reset: Secure password recovery flow

2. Organization & Team Management

Built-in multi-tenancy support for B2B SaaS applications:

  • Organization Creation: Users can create and manage multiple organizations
  • Team Invitations: Email-based invitation system with role assignments
  • Role-Based Access Control: Owner, Admin, and Member roles with granular permissions
  • Team Management: Support for multiple teams within organizations
  • Member Management: Add, remove, and manage team members with different permissions

3. Subscription & Billing

Integrated Stripe subscription management:

  • Multiple Plan Tiers: Free, Pro, Business, and Enterprise plans
  • Annual/Monthly Billing: Flexible billing periods with automatic discounts
  • Organization Subscriptions: Subscriptions attached to organizations
  • Upgrade/Downgrade Flow: Seamless plan changes with prorated billing
  • Payment Method Management: Stripe-powered card management
  • Webhook Integration: Automated subscription lifecycle handling

4. Beautiful Email Templates

Professional, responsive email templates built with React Email:

  • Email verification
  • Password reset
  • Magic link authentication
  • Organization invitations
  • Two-factor authentication codes
  • Account deletion confirmation

5. File Storage & Management

Integrated file handling for avatars and uploads:

  • Cloudflare R2: Cost-effective S3-compatible object storage
  • Avatar Upload: User profile picture management
  • File Validation: Type and size restrictions
  • Drag & Drop: Modern file upload UI
  • Preview Support: Image preview before upload

6. Security Features

Enterprise-grade security built-in:

  • CAPTCHA Protection: Cloudflare Turnstile integration to prevent bot attacks
  • Rate Limiting: API rate limiting to prevent abuse
  • CORS Configuration: Secure cross-origin resource sharing
  • CSRF Protection: Token-based CSRF prevention
  • Secure Cookies: HttpOnly, Secure, and SameSite cookie attributes
  • Cross-Subdomain Sessions: Support for SSO across subdomains

7. Developer Experience

Optimized for productivity:

  • Type Safety: End-to-end TypeScript from database to UI
  • Hot Module Replacement: Instant feedback during development
  • Code Generation: Automatic Prisma client and route tree generation
  • Monorepo Structure: Organized workspace with shared packages
  • Pre-commit Hooks: Automated code formatting and linting
  • Conventional Commits: Standardized commit messages

📦 Monorepo Structure

TanStack App uses a well-organized monorepo structure powered by Turbo:

hero-tanstack-app/
├── apps/
│   ├── app/           # Main application
│   └── www/           # Marketing website
├── packages/
│   ├── auth/          # Authentication logic
│   ├── emails/        # Email templates
│   ├── lib/           # Shared utilities
│   ├── prisma/        # Database schema & client
│   ├── server/        # Server-side logic (oRPC)
│   └── ui/            # Shared UI components

Application Structure (apps/app/)

The main application follows a feature-based organization:

  • Authentication: Complete auth UI (login, signup, password reset, 2FA)
  • Organization Management: Create, manage, and switch between organizations
  • Settings: User profile, organization settings, team management, billing
  • Onboarding: Guided setup for new users
  • Dashboard: Protected application routes

Shared Packages

  • @hero/auth: Authentication configuration and client setup
  • @hero/emails: React Email templates for all transactional emails
  • @hero/lib: Shared utilities (validation, email helpers, file handling)
  • @hero/prisma: Database schema, migrations, and Prisma client
  • @hero/server: Server-side API routes with oRPC for type-safe APIs
  • @hero/ui: Shared UI components and providers

🎨 UI & UX Excellence

HeroUI Components

TanStack App leverages HeroUI's extensive component library:

  • Form Components: Input, Select, Checkbox, Radio, Switch
  • Data Display: Table, Card, Badge, Avatar, Chip
  • Feedback: Alert, Toast, Modal, Spinner
  • Navigation: Navbar, Sidebar, Breadcrumbs, Tabs
  • Layout: Container, Divider, Spacer

Responsive Design

Fully responsive out of the box:

  • Mobile-first approach
  • Adaptive layouts for all screen sizes
  • Touch-friendly interactions
  • Optimized for both desktop and mobile experiences

Dark Mode Support

Native dark mode support:

  • System preference detection
  • Persistent theme selection
  • Smooth theme transitions
  • Consistent styling across all components

Accessibility

Built with accessibility in mind:

  • WCAG 2.1 compliant components
  • Keyboard navigation support
  • Screen reader friendly
  • Focus management
  • Semantic HTML

🛠️ Getting Started

Prerequisites

  • Node.js 20+
  • pnpm 10+
  • Docker (for local database)

Quick Start

# Clone the repository
git clone git@github.com:xiaoyu2er/hero-tanstack-app.git
cd hero-tanstack-app

# Install dependencies
pnpm install

# Copy environment variables
cp .env.example .env

# Initialize and start database
pnpm db:init
pnpm db:start

# Generate Prisma client and run migrations
pnpm db:generate
pnpm db:migrate

# Start development server
pnpm dev

Visit http://localhost:3000 to see your application running!

Environment Configuration

TanStack App uses a comprehensive environment configuration system. Key environment variables include:

  • Database: PostgreSQL connection strings
  • Authentication: OAuth client IDs and secrets (Google, GitHub)
  • Email: Resend API key for transactional emails
  • Storage: Cloudflare R2 credentials
  • Payments: Stripe API keys and webhook secrets
  • Security: Cloudflare Turnstile keys for CAPTCHA

All secrets are properly managed and never committed to version control.

🚢 Deployment

Vercel Deployment

TanStack App is optimized for Vercel:

# Build for Vercel
pnpm build:app:vercel

# Or deploy directly
vercel deploy

Netlify Deployment

Also supports Netlify with minimal configuration:

# Build for Netlify
pnpm build:app:netlify

# Deploy
netlify deploy --prod

Database Migrations

For production deployments:

# Run production migrations
pnpm prisma:migrate:prod

🎯 Use Cases

TanStack App is perfect for:

  • SaaS Applications: Multi-tenant applications with subscriptions
  • B2B Platforms: Organization-based applications with team collaboration
  • Internal Tools: Admin dashboards and management systems
  • MVPs: Rapid prototyping with production-quality foundation
  • Client Projects: Professional starting point for agency work

🔄 Continuous Updates

We're committed to keeping TanStack App up-to-date with:

  • Latest framework versions
  • Security patches
  • New feature integrations
  • Community feedback
  • Best practice improvements

🤝 Community & Support

  • Documentation: Comprehensive setup and development guides
  • GitHub Issues: Bug reports and feature requests
  • Discussions: Community Q&A and sharing
  • Examples: Real-world usage examples

🎉 What's Next?

We're continuously improving TanStack App. Upcoming features include:

  • API Key Management: User-generated API keys for external integrations
  • Audit Logs: Activity tracking and compliance features
  • Advanced Permissions: Fine-grained permission system
  • Webhooks: Outgoing webhooks for integrations
  • Multi-language Support: i18n internationalization
  • Advanced Analytics: Built-in analytics dashboard

🏁 Conclusion

TanStack App represents months of best practices, patterns, and production-ready code consolidated into a single, well-architected starter template. Whether you're building your next SaaS product, internal tool, or client project, TanStack App provides the solid foundation you need to move fast without compromising on quality.

Stop rebuilding the same authentication flows, organization management, and subscription handling for every project. Start with TanStack App and focus on building your unique features instead.

Ready to get started? Check out the live demo or clone the repository today!

Status: Alpha - We're actively improving TanStack App and welcome your feedback. Join us in building the best full-stack React starter template!