Templates / typescript

TanStack Start + Convex Starter

TanStack Start, Convex, Better-Auth, Tailwind CSS, and shadcn/ui form a split app configuration where the frontend and backend are generated as separate primary parts. Better Fullstack can scaffold this exact compatibility-checked selection.

01 / selection

Stack at a glance

RoleTechnologyRepository descriptionScope
FrontendTanStack Start
Full-stack React framework powered by TanStack RouterPrimary frontend
BackendConvex
Reactive backend-as-a-servicePrimary backend
RuntimeNone
No specific runtimeProject-wide
DatabaseNone
Skip database integrationProject-wide
ORMNone
Skip ORM integrationProject-wide
APINone
No API layer (API routes disabled)Project-wide
AuthenticationBetter-Auth
The most comprehensive authentication framework for TypeScriptScoped to Convex
CSSTailwind CSS
Utility-first CSS frameworkScoped to TanStack Start
UI libraryshadcn/ui
Re-usable components built with Radix and TailwindScoped to TanStack Start

02 / architecture

How the pieces fit

  • The frontend and backend are separate primary stack parts.
  • Better-Auth is scoped to Convex.
  • Tailwind CSS is scoped to TanStack Start.
  • shadcn/ui is scoped to TanStack Start.
  • Tailwind CSS and shadcn/ui are selected together.

03 / output

What gets generated

The virtual generator produced 56 files across 16 directories. The output is a workspace.

Top-level entries

  • ./.gitignore
  • ./AGENTS.md
  • ./CLAUDE.md
  • ./README.md
  • ./apps
  • ./bunfig.toml
  • ./package.json
  • ./packages
  • ./tsconfig.json
  • ./turbo.json

Representative files

  • README.md
  • packages/backend/convex/README.md
  • apps/web/package.json
  • package.json
  • packages/backend/package.json
  • packages/config/package.json
  • packages/env/package.json
  • apps/web/.env

04 / create

Create command

This is the canonical Bun command generated for the selection.

bun create better-fullstack@latest my-app --ecosystem typescript --frontend tanstack-start --css-framework tailwind --ui-library shadcn-ui --shadcn-base radix --shadcn-style nova --shadcn-icon-library lucide --shadcn-color-theme neutral --shadcn-base-color neutral --shadcn-font inter --shadcn-radius default --backend convex --runtime none --api none --auth better-auth --payments none --email none --file-upload none --logging none --observability none --feature-flags none --integrations none --ecommerce none --realtime none --job-queue none --caching none --rate-limit none --bot-protection none --i18n none --search none --vector-db none --file-storage none --cms none --effect none --ai none --state-management none --forms react-hook-form --validation zod --testing vitest --animation none --web-mcp none --database none --orm none --db-setup none --package-manager bun --git --web-deploy none --server-deploy none --install --part workspaceRunner:universal:turborepo --examples none --ai-docs claude-md agents-md

05 / builder

Open in the builder

Open this exact selection →
fe-w
tanstack-start
rt
none
be
convex
db
none
orm
none
api
none

06 / checks

Compatibility notes

Compatibility checked against Better Fullstack types version 2.8.0.

The generated record has 0 graph issues and 0 disabled selected options. This is a compatibility check, not a claim that this exact scaffold received a runtime smoke verification.

  • Runtime is intentionally set to none.
  • Database is intentionally set to none.
  • ORM is intentionally set to none.
  • API is intentionally set to none.
  • The selected shadcn/ui setup is paired with Tailwind CSS.

07 / fit

When to choose this shape

Choose this shape when the browser frontend and API server should remain separate generated parts.

08 / next

Related stacks and guide

09 / faq

Questions

Is this combination supported?

It passes the repository's compatibility analysis, selected-option checks, stack graph validation, project schema parsing, and virtual generation. That result is described here as compatibility checked.

Does it generate one app or separate parts?

The frontend and backend are generated as separate primary parts. The actual generated output uses a workspace layout.

How can I customize the selection?

Open the generated builder link above. Its query parameters reproduce this selection, and the builder can change compatible options before generating a new command.

GitHub Sponsors