Tanstack Start
Background grid pattern

What is TanStack App?

Learn about TanStack App - a production-ready full-stack React starter template with authentication, organization management, and more.

Support Team

Written by Support Team

What is TanStack App?

TanStack App is a modern, production-ready full-stack React starter template designed to accelerate your development workflow. It combines the power of TanStack Start, the beauty of HeroUI, and the comprehensive features of Better-Auth to provide everything you need to launch your next SaaS application.

Instead of spending weeks setting up authentication, database schemas, UI components, and deployment configurations, TanStack App provides a battle-tested foundation that lets you focus on building your unique features.

Why Choose TanStack App?

Production-Ready from Day One

  • Complete Authentication System: Email/password, social login (Google, GitHub), magic links, 2FA, and passkey support
  • Organization & Team Management: Multi-tenant architecture with role-based access control
  • Subscription & Billing: Integrated Stripe payment processing with multiple plan tiers
  • Security Built-in: CAPTCHA protection, rate limiting, CORS configuration, and secure session management

Modern Technology Stack

  • TanStack Start: Full-stack React framework with SSR, streaming, and server functions
  • HeroUI: Beautiful, accessible UI components built on React Aria
  • Better-Auth: Comprehensive authentication framework with extensive plugin ecosystem
  • TypeScript: End-to-end type safety from database to frontend
  • Prisma: Type-safe ORM for database interactions
  • PostgreSQL: Robust, scalable relational database

Developer Experience

  • Monorepo Structure: Well-organized workspace with shared packages
  • Type-Safe APIs: Full type safety across frontend and backend
  • Hot Module Replacement: Instant feedback during development
  • Automated Tooling: Pre-commit hooks, code formatting, and linting
  • Deployment Ready: Optimized for Vercel and Netlify

Key Features

🔐 Authentication & Security

  • Email/password authentication with verification
  • Social sign-on (Google, GitHub, and more)
  • Passwordless magic link authentication
  • Two-factor authentication (2FA)
  • Passkey/WebAuthn support
  • Multi-session management
  • Secure password reset flow
  • CAPTCHA protection against bots

🏢 Organization Management

  • Create and manage multiple organizations
  • Team-based collaboration
  • Role-based permissions (Owner, Admin, Member)
  • Email invitation system
  • Member management
  • Organization settings and customization

💳 Payments & Subscriptions

  • Stripe integration for payment processing
  • Multiple subscription tiers (Free, Pro, Business, Enterprise)
  • Annual and monthly billing options
  • Upgrade/downgrade flows
  • Payment method management
  • Automated webhook handling

📧 Email System

  • Beautiful, responsive email templates
  • Email verification
  • Password reset emails
  • Magic link emails
  • Organization invitations
  • Two-factor authentication codes
  • Built with React Email

🎨 UI & Design

  • HeroUI component library
  • Fully responsive design
  • Dark mode support
  • Accessibility-first approach
  • Customizable theming
  • Modern, professional design

📦 File Management

  • Avatar upload and management
  • Cloudflare R2 integration
  • File validation (type and size)
  • Drag and drop support
  • Image preview

Who Is It For?

TanStack App is perfect for:

  • Startup Founders: Launch your SaaS MVP quickly with a solid foundation
  • Indie Developers: Build and ship products without reinventing the wheel
  • Development Agencies: Accelerate client projects with a professional starting point
  • Enterprise Teams: Start internal tools with best practices built-in
  • Learning: Study a well-architected full-stack application

Getting Started

Getting started with TanStack App is straightforward:

  1. Clone the repository

    git clone git@github.com:xiaoyu2er/hero-tanstack-app.git
cd hero-tanstack-app

  2. Install dependencies

    pnpm install

  3. Set up environment variables

    cp .env.example .env
# Edit .env with your configuration

  4. Initialize and start the database

    pnpm db:init
pnpm db:start

  5. Run migrations

    pnpm db:generate
pnpm db:migrate

  6. Start development

    pnpm dev

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

What's Included?

Applications

  • Main App (apps/app/): Full-featured application with authentication, dashboard, and settings
  • Marketing Site (apps/www/): Public-facing website with documentation and blog

Shared Packages

  • @hero/auth: Authentication configuration and client
  • @hero/emails: React Email templates
  • @hero/lib: Shared utilities and helpers
  • @hero/prisma: Database schema and client
  • @hero/server: Server-side API logic (oRPC)
  • @hero/ui: Shared UI components

Support & Resources

  • Documentation: Comprehensive setup and development guides
  • Live Demo: hero.tanstack.app
  • GitHub: Repository
  • Blog: In-depth articles and updates

Current Status

TanStack App is currently in Alpha status. We're actively developing and improving the template based on real-world usage and community feedback. The core features are stable and production-ready, but we're continuously adding new features and enhancements.

Ready to build something amazing? TanStack App provides the foundation - you bring the innovation! 🚀

Did this answer your question?