Add linearlarge example app for syncModes

examples/react/linearlarge/.env.example

@@ -0,0 +1,13 @@
+# Database
+DATABASE_URL=postgresql://postgres:postgres@localhost:5432/linearlite
+
+# ElectricSQL
+ELECTRIC_URL=http://localhost:3000/v1/shape
+ELECTRIC_API_URL=http://localhost:3000
+
+# Auth
+BETTER_AUTH_SECRET=your-secret-key-here-change-in-production
+BETTER_AUTH_URL=http://localhost:3001
+
+# Mode
+NODE_ENV=development

examples/react/linearlarge/.gitignore

@@ -0,0 +1,26 @@
+# Dependencies
+node_modules/
+pnpm-lock.yaml
+
+# Build outputs
+dist/
+.output/
+.vinxi/
+
+# Environment
+.env
+.env.local
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Misc
+*.log
+.cache/

examples/react/linearlarge/.prettierrc

@@ -0,0 +1,5 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "es5"
+}

examples/react/linearlarge/README.md

@@ -0,0 +1,88 @@
+# LinearLite - TanStack Start + TanStack DB Example
+
+A modern issue tracker demonstrating the power of TanStack Start and TanStack DB. This example ports the original [LinearLite](https://github.com/electric-sql/electric/tree/main/examples/linearlite) from Electric SQL + PGlite to use TanStack's ecosystem.
+
+## Features
+
+- **Dual Sync Modes**: Toggle between Query (polling) and Electric (real-time) modes
+- **Full CRUD**: Create, read, update, and delete issues and comments
+- **Kanban Board**: Drag-and-drop interface with fractional indexing
+- **Rich Text Editing**: TipTap editor with markdown support
+- **Real-time Updates**: Automatic UI updates with TanStack DB's reactive queries
+- **Optimistic UI**: Instant feedback with automatic rollback on errors
+- **User Isolation**: See only your own data plus demo content
+- **Authentication**: Better Auth integration
+- **Offline-First**: Works offline in Electric mode
+
+## Getting Started
+
+### Prerequisites
+
+- Node.js 18+
+- pnpm
+- PostgreSQL (via Docker or local install)
+
+### Installation
+
+```bash
+# Install dependencies
+pnpm install
+
+# Start PostgreSQL
+docker compose up -d
+
+# Generate database schema
+pnpm db:push
+
+# Seed demo data
+pnpm db:seed
+
+# Start development server
+pnpm dev
+```
+
+Visit http://localhost:3000
+
+## Project Structure
+
+```
+src/
+├── components/       # React components
+├── db/              # Database schema and connection
+├── hooks/           # Custom React hooks
+├── lib/             # Utilities and configurations
+│   ├── collections/ # TanStack DB collections
+│   ├── auth.ts      # Better Auth setup
+│   └── mode-context.tsx # Mode switcher
+├── routes/          # TanStack Router routes
+├── server/          # Server functions
+│   └── functions/   # CRUD operations
+└── styles/          # Global styles
+```
+
+## Tech Stack
+
+- **Framework**: [TanStack Start](https://tanstack.com/start)
+- **Data Store**: [TanStack DB](https://tanstack.com/db)
+- **Database**: PostgreSQL with Drizzle ORM
+- **Authentication**: Better Auth
+- **Real-time Sync**: ElectricSQL (optional)
+- **UI Components**: Custom with Tailwind CSS
+- **Editor**: TipTap
+- **Drag & Drop**: @dnd-kit
+
+## Scripts
+
+- `pnpm dev` - Start development server
+- `pnpm build` - Build for production
+- `pnpm db:push` - Push schema to database
+- `pnpm db:seed` - Seed demo data
+- `pnpm lint` - Lint code
+- `pnpm format` - Format code
+
+## Learn More
+
+- [TanStack Start Documentation](https://tanstack.com/start)
+- [TanStack DB Documentation](https://tanstack.com/db)
+- [Original LinearLite](https://github.com/electric-sql/electric/tree/main/examples/linearlite)
+- [Porting Plan](../../LINEARLITE_TANSTACK_PORT_PLAN.md)

examples/react/linearlarge/docker-compose.yaml

@@ -0,0 +1,36 @@
+services:
+  postgres:
+    image: postgres:17-alpine
+    restart: always
+    environment:
+      POSTGRES_USER: postgres
+      POSTGRES_PASSWORD: postgres
+      POSTGRES_DB: linearlite
+    ports:
+      - '5432:5432'
+    volumes:
+      - postgres_data:/var/lib/postgresql/data
+    command:
+      - -c
+      - listen_addresses=*
+      - -c
+      - wal_level=logical
+    healthcheck:
+      test: ['CMD-SHELL', 'pg_isready -U postgres']
+      interval: 5s
+      timeout: 5s
+      retries: 5
+
+  electric:
+    image: electricsql/electric:latest
+    environment:
+      DATABASE_URL: postgresql://postgres:postgres@postgres:5432/linearlite?sslmode=disable
+      ELECTRIC_INSECURE: true
+    ports:
+      - '3001:3000'
+    depends_on:
+      postgres:
+        condition: service_healthy
+
+volumes:
+  postgres_data:

examples/react/linearlarge/drizzle.config.ts

@@ -0,0 +1,13 @@
+import type { Config } from 'drizzle-kit'
+import * as dotenv from 'dotenv'
+
+dotenv.config()
+
+export default {
+  schema: './src/db/schema.ts',
+  out: './src/db/migrations',
+  dialect: 'postgresql',
+  dbCredentials: {
+    url: process.env.DATABASE_URL!,
+  },
+} satisfies Config

examples/react/linearlarge/eslint.config.mjs

@@ -0,0 +1,73 @@
+import js from "@eslint/js"
+import tsParser from "@typescript-eslint/parser"
+import tsPlugin from "@typescript-eslint/eslint-plugin"
+import reactPlugin from "eslint-plugin-react"
+import prettierPlugin from "eslint-plugin-prettier"
+import prettierConfig from "eslint-config-prettier"
+import globals from "globals"
+import { includeIgnoreFile } from "@eslint/compat"
+import { fileURLToPath } from "url"
+
+const gitignorePath = fileURLToPath(new URL(".gitignore", import.meta.url))
+
+export default [
+  includeIgnoreFile(gitignorePath, "Imported .gitignore patterns"),
+  {
+    ignores: [
+      "*.config.js",
+      "*.config.ts",
+      "*.config.mjs",
+      "drizzle.config.ts",
+      "vite.config.ts",
+      "eslint.config.mjs",
+    ],
+  },
+  {
+    files: ["src/**/*.{js,jsx,ts,tsx,mjs}"],
+    languageOptions: {
+      ecmaVersion: 2022,
+      sourceType: `module`,
+      parser: tsParser,
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+      globals: {
+        ...globals.browser,
+        ...globals.es2021,
+        ...globals.node,
+      },
+    },
+    settings: {
+      react: {
+        version: `detect`,
+      },
+    },
+    plugins: {
+      "@typescript-eslint": tsPlugin,
+      react: reactPlugin,
+      prettier: prettierPlugin,
+    },
+    rules: {
+      ...js.configs.recommended.rules,
+      ...tsPlugin.configs.recommended.rules,
+      ...reactPlugin.configs.recommended.rules,
+      ...prettierConfig.rules,
+      "prettier/prettier": `error`,
+      "react/react-in-jsx-scope": `off`,
+      "react/jsx-uses-react": `off`,
+      "no-undef": `off`,
+      "@typescript-eslint/no-undef": "off",
+      "@typescript-eslint/no-unused-vars": [
+        `error`,
+        {
+          argsIgnorePattern: `^_`,
+          varsIgnorePattern: `^_`,
+          destructuredArrayIgnorePattern: `^_`,
+          caughtErrorsIgnorePattern: `^_`,
+        },
+      ],
+    },
+  },
+]

examples/react/linearlarge/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>LinearLite - TanStack Start + TanStack DB</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

examples/react/linearlarge/package.json

@@ -0,0 +1,97 @@
+{
+  "name": "tanstack-start-db-linearlite-example",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "docker compose up -d && vite dev",
+    "start": "node server.mjs",
+    "build": "vite build",
+    "db:generate": "drizzle-kit generate",
+    "db:migrate": "drizzle-kit migrate",
+    "db:push": "drizzle-kit push",
+    "db:seed": "tsx src/db/seed.ts",
+    "serve": "node server.mjs",
+    "test": "vitest run",
+    "lint:check": "eslint .",
+    "lint": "eslint . --fix",
+    "format": "prettier --write .",
+    "format:check": "prettier --check ."
+  },
+  "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^9.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@electric-sql/client": "^1.1.3",
+    "@firefox-devtools/react-contextmenu": "^5.2.3",
+    "@tailwindcss/vite": "^4.1.16",
+    "@tanstack/electric-db-collection": "^0.1.7",
+    "@tanstack/pacer-lite": "^0.1.0",
+    "@tanstack/query-core": "^5.90.7",
+    "@tanstack/query-db-collection": "^0.2.32",
+    "@tanstack/react-db": "https://pkg.pr.new/@tanstack/react-db@763",
+    "@tanstack/react-router": "^1.134.12",
+    "@tanstack/react-router-devtools": "^1.134.12",
+    "@tanstack/react-router-with-query": "^1.130.17",
+    "@tanstack/react-start": "^1.134.12",
+    "@tanstack/react-virtual": "^3.13.12",
+    "@tanstack/router-plugin": "^1.134.12",
+    "@tiptap/extension-table": "^2.27.1",
+    "@tiptap/extension-table-cell": "^2.27.1",
+    "@tiptap/extension-table-header": "^2.27.1",
+    "@tiptap/extension-table-row": "^2.27.1",
+    "@tiptap/react": "^2.27.1",
+    "@tiptap/starter-kit": "^2.27.1",
+    "better-auth": "^1.3.34",
+    "classnames": "^2.5.1",
+    "clsx": "^2.1.1",
+    "dayjs": "^1.11.19",
+    "dotenv": "^17.2.3",
+    "drizzle-orm": "^0.44.7",
+    "drizzle-zod": "^0.8.3",
+    "fractional-indexing": "^3.2.0",
+    "lucide-react": "^0.469.0",
+    "pg": "^8.16.3",
+    "react": "^19.2.0",
+    "react-aria-components": "^1.13.0",
+    "react-dom": "^19.2.0",
+    "react-icons": "^5.5.0",
+    "tailwind-merge": "^3.0.1",
+    "tailwindcss": "^4.1.16",
+    "tiptap-markdown": "^0.9.0",
+    "vite": "^6.3.5",
+    "vite-tsconfig-paths": "^5.1.4",
+    "zod": "^4.1.12"
+  },
+  "devDependencies": {
+    "@eslint/compat": "^1.4.1",
+    "@eslint/js": "^9.39.1",
+    "@tanstack/start-vite-plugin": "^1.91.1",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/react": "^16.3.0",
+    "@types/node": "^22.19.0",
+    "@types/pg": "^8.15.6",
+    "@types/react": "^19.2.6",
+    "@types/react-dom": "^19.2.2",
+    "@typescript-eslint/eslint-plugin": "^8.47.0",
+    "@typescript-eslint/parser": "^8.47.0",
+    "@vitejs/plugin-react": "^5.1.0",
+    "autoprefixer": "^10.4.21",
+    "concurrently": "^9.2.1",
+    "drizzle-kit": "^0.31.6",
+    "eslint": "^9.39.1",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.4",
+    "eslint-plugin-react": "^7.37.5",
+    "globals": "^16.5.0",
+    "jsdom": "^27.1.0",
+    "postcss": "^8.4.49",
+    "prettier": "^3.6.2",
+    "serve": "^14.2.5",
+    "tsx": "^4.20.6",
+    "typescript": "^5.9.2",
+    "vite": "^6.4.1",
+    "vite-plugin-svgr": "^4.5.0",
+    "vitest": "^3.2.4",
+    "web-vitals": "^5.1.0"
+  }
+}