Back to blog

ColoringStore is moving to TanStack Start

Why the new ColoringStore app shell uses TanStack Start, Vite, TanStack Router, Paraglide, and the upstream SaaS modules.

May 20, 2026ColoringStore TeamColoringStore Team

ColoringStore is moving from a legacy Next.js App Router codebase into a TanStack Start application shell. The product remains the same: printable AI coloring pages from prompts, photos, sketches, worksheets, stickers, and personalized names. The runtime foundation changes so routing, server handlers, i18n, auth, credits, billing, storage, and admin settings live in one TanStack-oriented structure.

What changed

  • src/routes/ now owns TanStack file routes and API handlers.
  • src/components/coloring/ contains the product UI for generation, galleries, online coloring, and user libraries.
  • src/modules/coloring/ contains shared generation and gallery services.
  • messages/ is the active Paraglide message source for English and Chinese.
  • Legacy folders such as app/, root components/, models/, and services/ remain as source material while each flow is ported.

Why TanStack Start

The upstream stack gives ColoringStore a cleaner split between product code and SaaS plumbing. TanStack Router handles file-based routes, TanStack Query handles client data state, and server routes keep API logic close to the route tree. The upstream auth, payment, credits, RBAC, storage, and admin modules stay available without forcing the coloring UI to look like a generic SaaS template.

Database safety

The migration keeps Drizzle schema files as source mappings so TypeScript and services understand the active tables. Applying schema changes to a real database is separate work and must stay explicit. Framework migration checks should not push, migrate, or generate database changes automatically.

Current focus

The first migration pass establishes the TanStack shell, product routes, generation endpoints, gallery endpoints, user collection routes, and ColoringStore branding. Runtime verification and route-tree regeneration are still separate follow-up steps once the app is allowed to run validation commands.