Uploaded February 2026 | Updated September 2026, 4 days ago
In this video, we're building a real-time multiplayer 64x64 pixel grid application! I’m using a powerful, modern stack: TanStack Start, Cloudflare Durable Objects, and Drizzle ORM, all tied together with the Cursor AI code editor.
TEMPLATE: github.com/jillesme/tanstack-drizzle-d1-durable-object-starter
RESULT: https://tanstack-pixel-grid.jillescf.workers.dev/grid/default
Watch as I use Cursor's agentic coding features to generate the core logic, explain the math behind converting a 1D Uint8Array into a 2D grid, and manage state using WebSockets.
I kept the hiccups and debugging in this video to give you a realistic look at what building and deploying apps actually looks like. We'll troubleshoot SQLite errors locally and fix Wrangler deployment issues live.
Create an account on Cloudflare today for free: dash.cloudflare.com/sign-up
Tools mentioned:
developers.cloudflare.com
developers.cloudflare.com/workers
developers.cloudflare.com/durable-objects
developers.cloudflare.com/workers/framework-guides/web-apps/tanstack-start
Chapters:
0:00 - Intro & Project Overview
0:31 - Scaffolding the TanStack + D1 Starter Template
1:23 - Exploring the Starter Code & Durable Object Counter
2:14 - Prompting Cursor AI (Agentic Coding)
3:54 - Reviewing the Generated Code & WebSockets
7:11 - Explaining Uint8Array & Xterm 8-bit Colors
8:00 - The Math: Mapping a 1D Array to a 2D Grid
9:46 - Testing Locally & Debugging a SQLite Error
10:36 - The Pixel Grid is Alive! (Local Test)
13:35 - Deploying to Cloudflare (Troubleshooting Wrangler Errors)
16:05 - Live Production Test & Final Thoughts
#cloudflare #cloudflareworkers #developer TanStack Start, Cloudflare Workers, Durable Objects, Drizzle ORM, SQLite, WebSockets, React, TypeScript, Full Stack Development, Cloudflare D1, Web Development Tutorial
In this video, we're building a real-time multiplayer 64x64 pixel grid application! I’m using a powerful, modern stack: TanStack Start, Cloudflare Durable Objects, and Drizzle ORM, all tied together with the Cursor AI code editor.
TEMPLATE: github.com/jillesme/tanstack-drizzle-d1-durable-object-starter
RESULT: https://tanstack-pixel-grid.jillescf.workers.dev/grid/default
Watch as I use Cursor's agentic coding features to generate the core logic, explain the math behind converting a 1D Uint8Array into a 2D grid, and manage state using WebSockets.
I kept the hiccups and debugging in this video to give you a realistic look at what building and deploying apps actually looks like. We'll troubleshoot SQLite errors locally and fix Wrangler deployment issues live.
Create an account on Cloudflare today for free: dash.cloudflare.com/sign-up
Tools mentioned:
developers.cloudflare.com
developers.cloudflare.com/workers
developers.cloudflare.com/durable-objects
developers.cloudflare.com/workers/framework-guides/web-apps/tanstack-start
Chapters:
0:00 - Intro & Project Overview
0:31 - Scaffolding the TanStack + D1 Starter Template
1:23 - Exploring the Starter Code & Durable Object Counter
2:14 - Prompting Cursor AI (Agentic Coding)
3:54 - Reviewing the Generated Code & WebSockets
7:11 - Explaining Uint8Array & Xterm 8-bit Colors
8:00 - The Math: Mapping a 1D Array to a 2D Grid
9:46 - Testing Locally & Debugging a SQLite Error
10:36 - The Pixel Grid is Alive! (Local Test)
13:35 - Deploying to Cloudflare (Troubleshooting Wrangler Errors)
16:05 - Live Production Test & Final Thoughts
#cloudflare #cloudflareworkers #developer TanStack Start, Cloudflare Workers, Durable Objects, Drizzle ORM, SQLite, WebSockets, React, TypeScript, Full Stack Development, Cloudflare D1, Web Development Tutorial
