Examples

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/amanvarshney01/create-better-t-stack/llms.txt

Use this file to discover all available pages before exploring further.

​

Overview

​

Available examples

​

Todo app

• Database operations with your chosen ORM
• Type-safe API calls with tRPC or oRPC
• Form handling and validation
• Optimistic updates
• Error handling
• UI components with shadcn/ui (if applicable)

• Backend API routes for todo operations
• Frontend UI with create/edit/delete functionality
• Database schema and migrations
• Type-safe client-server communication

Web:
- apps/web/src/routes/todo/ (TanStack Router)
- apps/web/src/app/todo/ (Next.js)
- apps/web/src/routes/todo/ (SvelteKit)
- etc.

Server:
- apps/server/src/routes/todo/ (Hono/Express/Fastify/Elysia)

Database:
- packages/db/src/schema/todo.ts (schema)

​

AI chat app

• Streaming responses from AI models
• Real-time UI updates
• Message history management
• Error handling and retry logic
• Integration with AI providers (OpenAI, Anthropic, etc.)

• Backend endpoint for AI streaming
• Frontend chat UI with message bubbles
• Streaming response handling
• Loading states and animations

Web:
- apps/web/src/routes/ai/ (TanStack Router)
- apps/web/src/app/ai/ (Next.js)
- apps/web/app/(drawer)/ai.tsx (React Native)
- etc.

Server:
- apps/server/src/routes/ai/ (server-based backends)
- apps/web/src/app/api/ai/ (Next.js API routes)
- packages/backend/convex/agent.ts (Convex)

​

Adding examples to your project

​

During project creation

npm create better-t-stack@latest my-app \
  --frontend tanstack-router \
  --backend hono \
  --database sqlite \
  --orm drizzle \
  --examples todo ai

​

Via interactive prompts

? Include example apps? › - Space to select. Return to submit
  ○ Todo (CRUD example)
  ○ AI (AI chat example)

​

After project creation

1. Create a new project with examples included
2. Copy the relevant files to your existing project
3. Adjust imports and paths as needed

​

Example requirements

​

Todo app requirements

• Database (any: SQLite, PostgreSQL, MySQL, MongoDB)
• ORM (any: Drizzle, Prisma, Mongoose)
• Backend (any except None)

• API layer (tRPC or oRPC) for type-safe communication

​

AI app requirements

• Backend (any except None)

# OpenAI
OPENAI_API_KEY=sk-...

# Anthropic
ANTHROPIC_API_KEY=sk-ant-...

# Or other providers

​

Stack-specific implementations

​

Frontend implementations

apps/web/src/routes/
  todo/
    index.tsx (list view)
    $todoId.tsx (detail view)
  ai/
    index.tsx (chat interface)

apps/web/src/app/
  todo/
    page.tsx (list view)
    [todoId]/page.tsx (detail view)
  ai/
    page.tsx (chat interface)
  api/
    ai/route.ts (API route for AI)

apps/native/app/
  (drawer)/
    todo.tsx (todo list)
    ai.tsx (chat interface)

​

Backend implementations

// apps/server/src/routes/todo/index.ts
import { Hono } from "hono";
import { db } from "@my-app/db";
import { todos } from "@my-app/db/schema";

const app = new Hono()
  .get("/", async (c) => {
    const allTodos = await db.select().from(todos);
    return c.json(allTodos);
  })
  .post("/", async (c) => {
    const body = await c.req.json();
    const [todo] = await db.insert(todos).values(body).returning();
    return c.json(todo, 201);
  });

export default app;

// packages/backend/convex/todos.ts
import { query, mutation } from "./_generated/server";
import { v } from "convex/values";

export const list = query({
  handler: async (ctx) => {
    return await ctx.db.query("todos").collect();
  },
});

export const create = mutation({
  args: { text: v.string() },
  handler: async (ctx, { text }) => {
    return await ctx.db.insert("todos", { text, completed: false });
  },
});

// apps/web/src/app/api/todos/route.ts
import { db } from "@my-app/db";
import { todos } from "@my-app/db/schema";
import { NextResponse } from "next/server";

export async function GET() {
  const allTodos = await db.select().from(todos);
  return NextResponse.json(allTodos);
}

export async function POST(request: Request) {
  const body = await request.json();
  const [todo] = await db.insert(todos).values(body).returning();
  return NextResponse.json(todo, { status: 201 });
}

​

ORM-specific code

// packages/db/src/schema/todo.ts
import { sqliteTable, text, integer } from "drizzle-orm/sqlite-core";

export const todos = sqliteTable("todos", {
  id: integer("id").primaryKey({ autoIncrement: true }),
  text: text("text").notNull(),
  completed: integer("completed", { mode: "boolean" }).notNull().default(false),
  createdAt: integer("created_at", { mode: "timestamp" }).notNull().$defaultFn(() => new Date()),
});

// packages/db/prisma/schema.prisma
model Todo {
  id        Int      @id @default(autoincrement())
  text      String
  completed Boolean  @default(false)
  createdAt DateTime @default(now())
}

// packages/db/src/models/todo.ts
import mongoose from "mongoose";

const todoSchema = new mongoose.Schema({
  text: { type: String, required: true },
  completed: { type: Boolean, default: false },
  createdAt: { type: Date, default: Date.now },
});

export const Todo = mongoose.model("Todo", todoSchema);

​

Using examples

​

Running the examples

bun install  # or npm install, pnpm install

bun run db:push  # Apply schema to database

# apps/server/.env
OPENAI_API_KEY=sk-...

bun run dev

​

Learning from examples

• RESTful routes (GET, POST, PUT, DELETE)
• Request validation
• Error handling
• Response formatting

• Schema definitions
• Migrations
• Queries and mutations
• Relationships (if applicable)

• Data fetching
• Form handling
• Optimistic updates
• Loading states
• Error boundaries

• Shared types between client and server
• Zod validation schemas
• tRPC or oRPC procedures

​

Customizing examples

1. Use as templates - Copy example patterns for new features
2. Extend functionality - Add fields, features, or endpoints
3. Remove if not needed - Delete example code once you’ve learned from it

​

Source code

packages/template-generator/templates/examples/
  todo/
    frontend/  (frontend-specific UI)
    server/    (server-specific routes)
    native/    (React Native screens)
  ai/
    frontend/  (chat UI)
    server/    (streaming endpoints)
    native/    (React Native chat)

​

Next steps