Boarding School: Ishaan Dey

Hi, everyone. Welcome to Boring School, where we're going to show you cool projects that people build with Cloudflare and how they built it. So, I'd like to welcome Ishaan. Hey, I'm Ishaan, and I'm at the Cloudflare office. And today I'm going to be talking about Sandbox, which is a AI powered collaborative code editor. So let's log in. We can log in with either Google or GitHub through Clerk. So here's our dashboard. And let's create a new project. So we can see that we have a few different options. So I'll name it like Node.js, make it private, and we'll create it. So let me talk with the architect right now. We have our back end running a few things. First of all, there are some Cloudflare records on the Cloudflare D1 for the storage for the database. And there's Cloudflare R2 for the object storage, our file system, and all that. There's also a server running Express.js to host a WebSocket server. And this is what contains our file system and communicates with our front end in real time. We also have our front end with a few different tools, such as running Next.js with Clerk for authentication and LiveBlocks for real time features. The Cloudflare Workers also run a Cloudflare workers AI for the copilot. So let's jump into the So this is our project. We have a file system and our terminal, which is fully connected. So let's go ahead and run our index.js file, which you can see here. All right, and we can also make changes. So let's console.log hi, and then save it, Command-S, and run it again. And we can see that it all works. Now let's create a new project, this time in React. Cool. So we can go ahead and do the same thing. So we can take a look at some of our files, and let's quickly just add VM install to get it running. And now we can run it to see our output. We can resize it as well. And that's it. All right, so now let's take a look at the copilot feature. So in the corner, we can go ahead and turn it on. And let's add a new line. So let's say I want to add an H2 JSX, and go ahead and generate it. Yeah, we can see that it successfully generated our H2. And we can go ahead and accept this. And there we go. That's how the copilot works right now. We can also manage the file system with some buttons up here. So let's say I want to add a file called, like, readme. Go ahead and do that. And we can edit it now. So that's pretty much it. You can take a look at the GitHub repo here, and it is public, so feel free to contribute. There's a lot of interesting problems to work on, which you can see in some of the GitHub issues, and it's open to all skill levels. So thank you for coming to my boarding school, and feel free to follow me on Twitter here.