Tech Stack

​

Overview

​

Core Framework

​

TanStack Start (React 19)

• Server-side rendering (SSR) for fast initial loads
• File-based routing via TanStack Router
• Streaming SSR for progressive page rendering
• Automatic code splitting and tree shaking

// app.config.ts
import { defineConfig } from "@tanstack/react-start/config";

export default defineConfig({
  server: {
    preset: "vercel",
  },
});

​

React 19

• React Compiler: Automatic memoization (via babel-plugin-react-compiler)
• Concurrent rendering: Better responsiveness under load
• Improved Suspense: Better async data handling

// vite.config.ts - React Compiler enabled
react({
  babel: {
    plugins: ["babel-plugin-react-compiler"],
  },
})

​

Backend Framework

​

Hono

• Express-like API with better TypeScript support
• Built-in CORS, logger, and SSE streaming
• Zero dependencies, runs on Bun/Node/Deno

// api/src/index.ts
import { Hono } from "hono";
import { cors } from "hono/cors";
import { logger } from "hono/logger";
import { streamSSE } from "hono/streaming";

const app = new Hono();
app.use("*", logger());
app.use("*", cors({ /* ... */ }));

​

Bun Runtime

• 3-5x faster npm install via Bun’s package manager
• Hot reload for API server: bun --bun run --hot api/src/index.ts
• Native TypeScript support without transpilation

// package.json scripts
{
  "dev:api": "bun --bun run --hot api/src/index.ts",
  "build:api": "bun build api/src/index.ts --outdir api/dist --target bun",
  "start:api": "bun run api/src/index.ts"
}

​

Data Layer

​

oRPC

• Full-stack type safety: Procedure inputs/outputs inferred
• Zod validation: Runtime schema validation
• TanStack Query integration: Auto-generate queryOptions()
• OpenAPI generation: Auto-generate REST docs

// Backend: Define procedure
import { os } from "@orpc/server";

export const getPositions = os
  .input(z.object({ modelId: z.string().optional() }))
  .output(z.array(positionSchema))
  .handler(async ({ input }) => {
    return await fetchPositions(input.modelId);
  });

// Frontend: Use procedure
import { useQuery } from "@tanstack/react-query";
import { orpc } from "@/server/orpc/client";

const { data } = useQuery(
  orpc.trading.getPositions.queryOptions({ input: {} })
);

​

TanStack Query

• Automatic caching: Reduces redundant API calls
• Background refetching: Keeps data fresh
• Optimistic updates: Instant UI feedback
• Devtools: Inspect cache, queries, and mutations

• Positions: 15s staleTime (fast updates)
• Models: 5min staleTime (rarely changes)
• Portfolio history: 30s staleTime (moderate updates)

​

PostgreSQL + Drizzle ORM

• Schema-first: TypeScript schemas generate migrations
• Quoted identifiers: Capitalized table names ("Models", "Orders")
• Relational queries: Type-safe joins and relations

// src/db/schema.ts
export const orders = pgTable("Orders", {
  id: text("id").primaryKey().$defaultFn(() => crypto.randomUUID()),
  modelId: text("modelId").notNull().references(() => models.id),
  symbol: text("symbol").notNull(),
  side: orderSideEnum("side").notNull(),
  quantity: numeric("quantity", { precision: 18, scale: 8 }).notNull(),
  status: orderStatusEnum("status").notNull().default("OPEN"),
  // ...
});

bun run db:generate   # Generate SQL from schema
bun run db:migrate    # Apply migrations
bun run db:studio     # Launch Drizzle Studio GUI

​

AI & Trading Integrations

​

AI SDK

• Streaming: Token-by-token response streaming
• Tool calling: Structured function execution
• Provider fallbacks: Switch between Claude, GPT-4, Gemini, Mistral
• Token counting: Track usage and costs

// src/server/features/trading/agent/tradeAgentFactory.ts
import { generateText } from "ai";
import { createAnthropic } from "@ai-sdk/anthropic";

const anthropic = createAnthropic({ apiKey: env.ANTHROPIC_API_KEY });

const result = await generateText({
  model: anthropic("claude-4-sonnet-20250514"),
  system: SYSTEM_PROMPT,
  messages,
  tools: { createPosition, closePosition, updateExitPlan },
  maxSteps: 5,
});

• Anthropic Claude (primary): claude-4-sonnet, claude-3.5-sonnet
• Google Gemini: gemini-2.5-flash, gemini-2.5-pro
• OpenAI: gpt-4.5-turbo, gpt-4o
• Mistral: mistral-large-2, ministral-8b
• NVIDIA NIM: meta/llama-4-nemotron-instruct (via @ai-sdk/openai-compatible)
• OpenRouter: Aggregated access to 150+ models (via @openrouter/ai-sdk-provider)
• Aihubmix: Additional proxy provider (via @aihubmix/ai-sdk-provider)

​

Lighter SDK

• Generated TypeScript SDK for zkLighter DEX
• Order book data, order placement, account management
• Real-time market data for BTC, ETH, SOL perpetuals

// src/server/integrations/lighter/client.ts
import { createLighterClient } from "@reservoir0x/lighter-ts-sdk";

export const lighterClient = createLighterClient({
  baseUrl: env.LIGHTER_BASE_URL,
  apiKey: getApiKey(),
});

export const orderApi = lighterClient.order;
export const accountApi = lighterClient.account;

​

Styling & UI

​

Tailwind CSS v4

• Vite plugin: First-class Vite integration
• JIT compiler: Generate classes on-demand
• CSS variables: Better dark mode support

// vite.config.ts
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [tailwindcss()],
});

​

shadcn/ui

• Copy-paste components: No runtime dependency
• Accessible: ARIA compliant via Radix UI
• Customizable: Styled with Tailwind classes

• Button, Dialog, Dropdown, Select, Tooltip
• Table, Tabs, Collapsible, ScrollArea
• Avatar, Badge, Separator, Progress

pnpx shadcn@latest add button dialog table

​

Utility Libraries

• class-variance-authority (0.7.1): Type-safe component variants
• clsx (2.1.1) + tailwind-merge (3.0.2): Merge Tailwind classes
• cva pattern: Standardized component API

import { cva } from "class-variance-authority";
import { cn } from "@/lib/utils";

const buttonVariants = cva("rounded-lg font-semibold", {
  variants: {
    variant: {
      default: "bg-primary text-white",
      outline: "border border-primary text-primary",
    },
    size: {
      sm: "px-3 py-1.5 text-sm",
      lg: "px-6 py-3 text-lg",
    },
  },
});

​

Icons & Animations

• Lucide React (0.553.0): Modern icon library (1400+ icons)
• GSAP (3.13.0): High-performance animations
• Framer Motion (via [email protected]): Declarative animations
• @number-flow/react (0.5.10): Animated number transitions

​

Visualization

​

Recharts

• Portfolio performance line charts
• Win rate bar charts
• P&L distribution histograms

import { LineChart, Line, XAxis, YAxis, Tooltip } from "recharts";

<LineChart data={portfolioHistory}>
  <XAxis dataKey="timestamp" />
  <YAxis />
  <Line dataKey="netPortfolio" stroke="#8884d8" />
  <Tooltip />
</LineChart>

​

React Three Fiber

• ShaderGradient component for hero section
• Hardware-accelerated animated gradients

​

State Management

​

TanStack Store

• Used for variant selector state (Apex, Trendsurfer, Contrarian, Sovereign)
• Alternative to Zustand or Jotai

import { Store } from "@tanstack/store";

export const variantStore = new Store({
  selectedVariant: "all" as VariantIdWithAll,
});

​

Real-Time Communication

​

Server-Sent Events (SSE)

• /api/events/positions - Position updates every 10s
• /api/events/trades - Trade execution feed
• /api/events/conversations - AI chat events
• /api/events/portfolio - Portfolio snapshots
• /api/events/workflow - Trading workflow events

// Frontend: Subscribe to events
const eventSource = new EventSource("/api/events/positions");
eventSource.onmessage = (event) => {
  const positions = JSON.parse(event.data);
  queryClient.setQueryData(["positions"], positions);
};

// Backend: Broadcast events
import { streamSSE } from "hono/streaming";

app.get("/api/events/positions", async (c) => {
  return streamSSE(c, async (stream) => {
    const unsubscribe = subscribeToPositionEvents((event) => {
      stream.writeSSE({ data: JSON.stringify(event.data) });
    });
    await new Promise(() => {}); // Keep alive
  });
});

​

Development Tools

​

Vite (Rolldown)

• 10x faster builds via Rust (compatible with Vite plugins)
• Drop-in replacement for Vite
• Used via npm override:

{
  "overrides": {
    "vite": "npm:rolldown-vite@latest"
  }
}

​

TypeScript

{
  "compilerOptions": {
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "exactOptionalPropertyTypes": true
  }
}

​

Biome

• 80-100x faster than ESLint
• Format + lint in single pass

• Indentation: Tabs
• Quotes: Double
• Line width: 80 characters

bun run lint      # Check for issues
bun run format    # Auto-fix formatting
bun run check     # Lint + type check

​

Vitest

• Same Vite config as main app
• Instant hot reload for tests
• Compatible with Jest API

bun run test      # Run all tests

​

TanStack Devtools

• @tanstack/react-query-devtools (5.84.2)
• @tanstack/react-router-devtools (1.132.0)
• @tanstack/devtools-vite (0.3.11)

• Query Devtools: Inspect cache, refetch queries, view staleness
• Router Devtools: View route tree, params, search state

​

Observability

​

Sentry

• Breadcrumbs: Trace user actions before errors
• Spans: Measure oRPC procedure performance
• Session replay: Reproduce bugs visually

import * as Sentry from "@sentry/react";

export const myProcedure = os.handler(async ({ input }) =>
  Sentry.startSpan({ name: "myProcedure" }, async () => {
    // Timed logic here
  })
);

​

Vercel Analytics

• Core Web Vitals (LCP, FID, CLS)
• Custom events (trades executed, positions opened)

​

Deployment

​

Vercel (Frontend)

• Edge network: Global CDN for fast initial loads
• Serverless functions: SSR on demand
• Preview deployments: Per-branch URLs

​

VPS (Backend)

• Schedulers (AI agents, price tracking)
• ExchangeSimulator singleton
• SSE event broadcasting

​

Environment Configuration

​

T3 Env

• Runtime validation via Zod
• Compile-time type inference
• Separate server/client variables

// src/env.ts
import { createEnv } from "@t3-oss/env-core";

export const env = createEnv({
  server: {
    DATABASE_URL: z.string().url(),
    PORT: z.coerce.number().default(8081),
  },
  clientPrefix: "VITE_",
  client: {
    VITE_API_URL: z.string().url().optional(),
  },
  runtimeEnv: { ...process.env, ...import.meta.env },
});

​

Summary

​

Next Steps

• Architecture Overview - System components and deployment
• Data Flow - Request/response flow and SSE streaming