feat(samples): add TypeScript backend using Grid TypeScript SDK

[pengying]

Add TypeScript backend sample for Grid API

Add a TypeScript (Express) backend implementation that mirrors the existing Kotlin sample with the same API contract. This implementation:

• Uses the @lightsparkdev/grid TypeScript SDK to interact with the Grid API
• Provides the same API endpoints for customers, external accounts, quotes, and sandbox operations
• Streams webhook events to the frontend via Server-Sent Events (SSE)
• Serves the shared React frontend from the /public directory
• Includes comprehensive documentation and setup instructions

The implementation uses modern ES modules, the tsx runtime for TypeScript execution, and proper error handling throughout.

Co-Authored-By: Claude Opus 4.6 noreply@anthropic.com

[pengying]

Warning

This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
Learn more

• fix(samples): filter out heartbeat messages from webhook stream UI #198
• feat(samples): add TypeScript backend using Grid TypeScript SDK #197 👈 (View in Graphite)
• feat: adding kotlin sample #192
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

[greptile-apps]

Greptile Overview

Greptile Summary

This PR adds a TypeScript backend sample that mirrors the Kotlin implementation using the Grid TypeScript SDK. The implementation provides Express-based REST endpoints for customer creation, external account linking, quote management, and sandbox operations, along with webhook streaming via Server-Sent Events.

• Added complete TypeScript/Express backend with Grid SDK integration
• Implements identical API contract as Kotlin backend for frontend compatibility
• Includes comprehensive documentation and environment configuration
• Streams webhook events to frontend via SSE with replay buffer
• Uses modern ES modules and tsx runtime for TypeScript execution

Minor issues found:

• Incorrect wildcard route syntax on index.ts:86 (uses /{*path} instead of Express's *)
• TypeScript config uses moduleResolution: "bundler" instead of "node16" for Node.js runtime

Confidence Score: 4/5

• Safe to merge after fixing the wildcard route syntax error
• The implementation is well-structured and follows good practices, but contains a syntax error in the Express wildcard route that will prevent the frontend from loading correctly. The moduleResolution config is suboptimal but won't cause runtime failures with tsx.
• samples/typescript/src/index.ts requires immediate attention to fix the route pattern on line 86

Important Files Changed

Filename	Overview
samples/typescript/src/gridClient.ts	Initializes Grid SDK client with API credentials
samples/typescript/src/index.ts	Express server setup with API routes and SSE streaming; contains wildcard route syntax error on line 86
samples/typescript/src/routes/customers.ts	Customer creation endpoint using Grid SDK
samples/typescript/src/routes/quotes.ts	Quote creation and execution endpoints using Grid SDK
samples/typescript/src/routes/webhooks.ts	Webhook receiver endpoint with TODO for signature verification
samples/typescript/tsconfig.json	TypeScript configuration with bundler moduleResolution (consider using node16 for Node.js)

Sequence Diagram

sequenceDiagram
    participant Browser
    participant Express as Express Backend
    participant SDK as Grid TypeScript SDK
    participant API as Grid API
    
    Note over Browser,API: Payout Flow
    
    Browser->>Express: POST /api/customers
    Express->>SDK: gridClient.customers.create()
    SDK->>API: POST /customers
    API-->>SDK: Customer response
    SDK-->>Express: Customer object
    Express-->>Browser: 201 Created
    
    Browser->>Express: POST /api/customers/:id/external-accounts
    Express->>SDK: gridClient.customers.externalAccounts.create()
    SDK->>API: POST /customers/:id/external-accounts
    API-->>SDK: ExternalAccount response
    SDK-->>Express: ExternalAccount object
    Express-->>Browser: 201 Created
    
    Browser->>Express: POST /api/quotes
    Express->>SDK: gridClient.quotes.create()
    SDK->>API: POST /quotes
    API-->>SDK: Quote response
    SDK-->>Express: Quote object
    Express-->>Browser: 201 Created
    
    Browser->>Express: POST /api/quotes/:id/execute
    Express->>SDK: gridClient.quotes.execute()
    SDK->>API: POST /quotes/:id/execute
    API-->>SDK: Quote execution response
    SDK-->>Express: Updated quote
    Express-->>Browser: 200 OK
    
    Browser->>Express: POST /api/sandbox/send-funds
    Express->>SDK: gridClient.sandbox.sendFunds()
    SDK->>API: POST /sandbox/send
    API-->>SDK: Transaction response
    SDK-->>Express: Transaction object
    Express-->>Browser: 200 OK
    
    Note over Browser,API: Webhook Streaming
    
    API->>Express: POST /api/webhooks (webhook event)
    Express->>Express: webhookStream.addEvent()
    Express-->>API: 200 OK
    
    Browser->>Express: GET /api/sse (EventSource)
    Express-->>Browser: SSE: connected
    Express-->>Browser: SSE: replay buffered events
    Express->>Browser: SSE: stream new webhook events

Loading

_{Last reviewed commit: f0dbb39}

[greptile-apps]

_{17 files reviewed, 2 comments}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

moduleResolution: "bundler" is intended for bundlers like Vite/esbuild. For Node.js with tsx, use "node" or "node16":

Suggested change

	"moduleResolution": "bundler",
	"moduleResolution": "node16",

Prompt To Fix With AI

This is a comment left during a code review.
Path: samples/typescript/tsconfig.json
Line: 5:5

Comment:
`moduleResolution: "bundler"` is intended for bundlers like Vite/esbuild. For Node.js with `tsx`, use `"node"` or `"node16"`:

```suggestion
    "moduleResolution": "node16",
```

How can I resolve this? If you propose a fix, please make it concise.