TSStarter leverages TanStack Start, Router, Query, and Form to build a modern, type-safe, and production-ready TypeScript application
TSStarter is built on the powerful TanStack ecosystem - Start, Router, Query, and Form - to provide a comprehensive full-stack TypeScript solution that delivers exceptional developer experience and production-ready features.
TanStack Router provides the foundation for our routing system with file-based routing, type safety, and excellent developer experience.
TSStarter uses TanStack Router's file-based routing system where each file in the src/routes/
directory automatically becomes a route. This provides:
Protected routes are implemented using TanStack Router's beforeLoad
function, ensuring users are authenticated before accessing sensitive pages:
// Example: Protected dashboard route
export const Route = createFileRoute("/dashboard")({
beforeLoad: async ({ context }) => {
const session = await context.auth.getSession();
if (!session) {
throw redirect({ to: "/login" });
}
},
component: DashboardPage,
});
Dynamic routes like /blog/$
and /docs/$
provide type-safe access to content collections, with automatic 404 handling for missing content:
// Type-safe dynamic route with content validation
export const Route = createFileRoute("/blog/$")({
validateSearch: (search: Record<string, unknown>) => {
return z.object({
slug: z.string(),
}).parse(search);
},
loaderDeps: ({ search: { slug } }) => ({ slug }),
loader: async ({ deps: { slug } }) => {
const post = await getBlogPost(slug);
if (!post) throw notFound();
return post;
},
});
TanStack Query handles all our data fetching, caching, and real-time updates with excellent TypeScript support.
TSStarter implements real-time data fetching using TanStack Query with oRPC:
All data mutations use TanStack Query's mutation system with:
// Example: Task creation with optimistic updates
const createTaskMutation = useMutation({
mutationFn: createTask,
onMutate: async (newTask) => {
// Cancel outgoing refetches
await queryClient.cancelQueries({ queryKey: ["tasks"] });
// Snapshot previous value
const previousTasks = queryClient.getQueryData(["tasks"]);
// Optimistically update
queryClient.setQueryData(["tasks"], (old) => [...old, newTask]);
return { previousTasks };
},
onError: (err, newTask, context) => {
// Rollback on error
queryClient.setQueryData(["tasks"], context.previousTasks);
},
onSettled: () => {
// Always refetch after error or success
queryClient.invalidateQueries({ queryKey: ["tasks"] });
},
});
TanStack Query is fully integrated with SSR through setupRouterSsrQueryIntegration
, providing:
// Frontend: TanStack Query + oRPC integration
const { data: tasks } = useQuery({
queryKey: ["tasks"],
queryFn: () => orpc.tasks.getAll(), // oRPC type-safe call
staleTime: 0, // Always fresh for real-time updates
});
// Real-time updates via TanStack Query + oRPC SSE
const { data: eventGenerator } = useQuery({
queryKey: ["realtime-tasks"],
queryFn: () => client.realtimeTasks(), // oRPC SSE stream
refetchInterval: false, // Disable polling - use SSE instead
staleTime: Infinity, // Keep data fresh since it's real-time
});
TanStack Form provides excellent form handling with Zod validation and type safety.
All forms in TSStarter use TanStack Form with:
// Example: Type-safe form with validation
const form = useForm({
defaultValues: {
title: "",
description: "",
priority: "medium",
},
validators: {
title: (value) => {
if (!value) return "Title is required";
if (value.length < 3) return "Title must be at least 3 characters";
},
description: (value) => {
if (value && value.length > 500) return "Description too long";
},
},
});
Forms handle complex scenarios like:
TanStack Start provides the full-stack capabilities that tie everything together.
TSStarter uses Content Collections for build-time content processing combined with Server-Side Rendering:
Content Collections process MDX files at build time and generate type-safe JavaScript:
// content-collections.ts - Type-safe content schemas
const blog = defineCollection({
name: "blog",
directory: "content/blog",
include: "**/*.mdx",
schema: z.object({
title: z.string(),
description: z.string().optional(),
author: z.string().optional(),
date: z.string().optional(),
tags: z.array(z.string()).optional(),
readingTime: z.string().optional(),
}),
});
Blog and documentation routes use SSR with dynamic content loading:
// src/routes/blog/$.tsx - SSR blog post rendering
export const Route = createFileRoute("/blog/$")({
loader: async ({ params }) => {
const path = params._splat;
const blog = allBlogs.find((b) => b._meta.path === path);
if (!blog) throw notFound();
return {
content: blog.content, // MDX content processed at build time
meta: {
title: blog.title,
description: blog.description,
author: blog.author,
publishedAt: blog.date,
tags: blog.tags,
},
};
},
});
API routes are implemented using TanStack Start's createServerFileRoute
:
TSStarter implements a complete payment processing system using Polar's webhook API:
// src/routes/api/polar.webhook.ts - Complete payment processing
export const ServerRoute = createServerFileRoute("/api/polar/webhook").methods({
POST: handleWebhook,
});
async function handleOrderPaid(order: PolarOrder): Promise<Response> {
// Find or create user from Polar customer data
const user = await findOrCreateUser(order.customer);
// Create purchase record in database
await createPurchaseRecord(order, user.id, plan);
// Update user access permissions
await updateUserAccess(user.id, plan);
// Send thank you email
await sendThankYouEmail(order);
// Invite to GitHub repository
await sendGitHubInvite(user);
}
Key Features:
TanStack Library | Features Implemented | Usage |
---|---|---|
TanStack Router | File-based routing, Type-safe routes, SSR integration, Protected routes | All routing, navigation, and page structure |
TanStack Query | Data fetching, Caching, Mutations, Real-time updates, SSR integration | All API calls, state management, and real-time features |
TanStack Form | Type-safe forms, Validation, Field management, Form state | All user input forms, task creation, sharing, etc. |
TanStack Start | Full-stack framework, SSR, API routes, Isomorphic functions | Server-side rendering, API endpoints, full-stack integration |
Content Collections | MDX support, Blog system, Documentation, Type-safe content | Blog posts, documentation pages, content management |
The TanStack ecosystem in TSStarter provides a modern, type-safe, and performant foundation for building full-stack TypeScript applications. Each library is carefully integrated to work together seamlessly, providing an excellent developer experience and production-ready features.
Whether you're building a simple blog, a complex SaaS application, or an enterprise system, TSStarter with TanStack gives you the tools and patterns you need to succeed.
TSStarter - Premium TypeScript Starter for Modern Web Applications.