TanStack Start & Cloudflare D1: The Modern Full-Stack (The Vibe Sessions #1)

Welcome to episode one of the vibe sessions. In this episode, we're going to build a suggestion box with tens start on cloud workers using D1. So that next episode, we'll build whatever is number one in the suggestion box. So I'm going to start here with the tens start docs for Cloudflare and we're going to run this command to create a new project. So I'm going to call this one not tens start app. We'll just call VIP session one. Vibe session one. We'll use get for sure and we won't deploy it yet. Okay, let's go into Vibe session one and let's see what we got out of the box. PMp dev. Okay, 10 seconds start. Great. Cool. This works. Awesome. Okay, let's go back. Let's open up a new tab and open up open code. I'll be using open code with uh Claude Opus, Claude Enthropic, Claude Opus 4.5. This will work with Claude Code, Open Code. I just love using open code. Okay, first normally you want to start with a spec and that's what we go what we'll do. But first I'm going to be lazy and say can you remove all boilerplate files so that we have a nice clean slate. Okay, vibe coding has begun. Okay, hello world. This looks pretty pretty brand new. So, as you can see, we've actually used 13% of our context here. I'm going to be clearing the contents pretty often. Clearing the context. All right, we have a nice nice clean slate. Next, we're going to be building out our spec. So, I'm going to go plan mode and I'm going to say we are building a suggestion box application called VIP suggestion. Okay, it uses Cloudflare D1 for data storage or it will use we're going to add it and will be deployed to Cloudflare workers. Of course, it is a barebones 10stack start application. For the OM, we'd like to use Drizzle cuz Drizzle and D1 go really well together. Let's create a spec MD for our application. So, this is going to probably investigate some stuff and then ask us questions about what we want to do. Let's do anonymous, right? Anybody can submit. Submit suggestions. This is a good idea. I like that. Um, up vote down vote. I like that too. But let's do no comments. Ooh, status tracking. You know, that's a good idea. I like that, too. And okay, there we go. Display. Simple list. Moderation. I'm going to regret this, but no moderation. Some more questions. Isn't vibe coding fun? It's like I'm just talking to this LLM. Voting should be a limit. We could do IP based limits. Let's do that because we can access the IP through the Cloudflare headers. Just a title. Yep. And description. Do we want to submit her name? Yes. Yeah. So, we can give some credits. Okay. Status management. Let's just do no admin. Like everybody can see this. Interesting choice. If there's no admin UI, how should the suggestion statuses be updated? That's a good question. Honestly, we'll just leave them in pending state forever and then when another session maybe we'll update it. Okay, I'm fighting the LLM right now cuz I didn't really think this out. This is a VIP session. Okay, you're right. Let's just remove status entirely. Okay, this is going hella fast. Let me let me scroll back and so we can read it. Vive suggestion minimal anonymous suggestion box application feature submit suggestions correct view suggestions and upvote down vote which is IP IP limited dic start cloudflare workers D1 perfect this is great database schema table suggestions votes perfect we love it we love it this is all good this looks correct to me let's write it out to spec MD. So after this we'll have a spec.md and then we can start implementing it. This is I think what they call now spec driven development or you just spend some time. We spent a couple minutes just talking with the LLM and creating a spec and then later on you can implement it. Okay. So let's just look at that spec real quick. Minimal suggestion box exactly what we just had. Database D1 OM jersey. Perfect. Yeah, we don't need more than this right now. So, I'm going to compact, which actually just clears the context. Even though we only used five 15%, LM do better with less content. As soon as the contact the context start going to like 60 70%, it's going to make silly mistakes. I know I vibe coded an immense amount of apps. Let's see. So, it compacted it. So, it told us what to do next. And you'll see our our content our context window closes. All right. So now we can say we're in build mode. Let's implement the schema and with drizzle and D1 first. Okay, let's do that. That's good. Normally maybe if it was like a super production grade application, I might have spent some more time with the spec, but I also want to be conscious of time. Look at this. Okay, it's hard to read. So, I'm going to open up it with Vim source DB schema. Nice suggestions, votes. Lovely. And some exports. Site generate and run migrations. Okay, cool. It created the migrations. Let's see where did it create those in um in Drizzle. Okay, cool. A lot of this is done by the LLM, but it still requires some knowledge on our our part to apply these migrations. So, DB migrate local DB grade remote suite. Okay, actually it's doing so much for us already. Out this migrations. Wait, but okay. See, it's kind of going off right now. It says out migrations, but it already created them in Drizzle. I don't know why. And then it recreates. Okay, here we see DB migrate local. Okay, it did a lot. It actually did a lot of work. Let's see. Let's check it though. Uh, okay. It removed the drizzle thing and then it created uh another migration now inside of the migrations folder. Then it did db migrate local. Okay, which will run against a local DB. And now it said it's done. Okay, this is pretty good honestly. some scripts here, some components. We now have a local database. Okay, that's cool. Let's let's look at some of the code it wrote before we continue. Okay, so we have these here, the tables, and an index, which is something that creates the DB. Okay, cool. And I think kind of that's it. We only have this hello route still right here. Okay, so we can move on and we'll see if this works later. I could verify now, but we started with the back end. So, we're going to update the spec. Can you update the spec and mark what is done? Okay. And I'll do actually I'll I'll link the spec to make it easier. Okay. We've only used 12% context. That's actually not bad. We could continue using this. Okay. See what's nice? It's actually it tells us uh what happened. It updated the the schema, right? It added these scripts. Generate migrations. Apply migrations. Okay, pretty tight. And I think it's done. Okay, cool. Let's not clean the context. Let's not clear the context. 14% is pretty manageable. Let's go to plan mode. Let's make a plan to implement the front end. Okay. So again, specdriven development. We started with a pretty high level specification. It had the tables. It implemented in like zero time. It's pretty impressive. Now, we're creating a front end spec so we can kind of see what's going on before we just let this do its thing. Okay. Get suggestions. That's fine. Create suggestion. Great. Vote. Awesome. Okay. Access D1 get via get event. I don't think we actually need get event. So, there's a couple things I'm going to update, right? We can access the one through it's going to be import from cloudflare workers right that's how we can get it hashing IP is fine client IPS that is correct okay two update page title great submission form tack loader to fet suggestion yes that's fine we probably want to use a tstack server function here but let's see what it with loader and after we see if we're happy with it. Okay, these seem good. Suggestion form, suggestion card, vote buttons, tailwind. Okay, design style. We want vibes. Use blue colors to increase vibes. Two, vote display. Net score is good, right? We don't need some fancy We don't need any fancy stuff. uh form placement always visible modal we'll say always visible empty state when there's no suggestions let's say please suggest I know this is very um highle thinking right here okay so do this we're still in plan mode cuz I want to verify that the plan is good okay server functions that's good yep create suggestion get the IP from for connecting IP components suggestion card. It's a little hard with this large font size. I'm not going to lie. So, I might zoom out a little bit, but at least we can all read it even on mobile. File structure uh server functions suite components DB routes. Okay, one question for voting. When user clicks up, should clicking the same but again remove their vote. Okay, we'll go to implement mode and when they click again, we undo their vote. I think this is what Reddit does. It's kind It's It makes sense. This is fun, right? This is fun. I actually was planning to wear my normal glasses after, but I feel like I'm just vibing right now. So, and also have a pretty bright light, so it kind of helps. One nice thing about Open Code and Plot Code is LSP integration. So, we'll actually say like, "Hey, you know, you're you have these functions, they're actually not correct. They're not defined." So without running the build or without running some sort of llinter, it will already know like hey these are wrong that's sick. Also we have no agents.mmd we have no no nothing. This is all fresh from the press. I think it's trying to look up how to do server functions right and sometimes you got to help the LLM a little bit because tens start is still in development. So if I go test sort server functions, right, you still have to do some learning yourself for now. And this is a here's just an example. So I'm just going to copy this, right? Copy. And I'm going to go back and I think it's still struggling. So I'm going to kind of like pause it. And it needs get request. Okay. So here is a server function. And here is how to get the request. Okay, how do we get the request? Then stack start get request server functions. Okay, it's actually right there. Get request. Ah, here we go. Boom. This is how you get request. Let's do this. Boom. Okay, continue. It will probably be like, hey, thank you. There we go. Thanks for the examples. Let me fix the server functions. So, one thing I found while vibe coding, you don't want to rely too much just on the LLM. You have to actually also read the docs yourself sometimes, which is obvious, I guess, but sometimes, I mean, these LMS are so powerful. Sometimes you're just like, it can do it all, but every now and then I give a little nudge in the right direction. Okay, I see. Input validator. There's some old training data. I guess it was validator before. So now it needs to like update with input validator. Let's go. Let's go look at what we created so far, right? We got the root layout. I think it created some server functions. So suggestion with votes hash IP. Okay. Get client IP. So first it gets it from the from Cloudflare's connecting IP. This will already since we're deploying to workers, this will be populated. But if we ran behind the reverse proxy, we'd usually have this x forwarded 4 header, create the DB from the env. We get the client IP. We hash it, the results. Sweet. This is this is pretty good, honestly. Uh then we loop over the results and return them with the vote count and the user vote and some inputs. I don't think there's any Z schemas here. Maybe we'll do that for next session. Handler. This looks nice. Okay, just creating the suggestion card and suggestion form. Let's look at those as well. Suggestion card. Okay, simple props. Um, create a new date. Nice. And LMS are so good at writing till wind. It's actually crazy. Suggestion card. Suggestion form. This is the form. And onsubmit. We'll probably save it in a server function. Onsubmit. Oh, we pass it down. Okay, we pass down from from this. So I guess if we go to the card and we say the uh form is it in here yet? No, it's not here. Probably be in the index route, right? Suggestion get suggestions. There we go. And handle submit create suggestion, right? And this is the server function. Create suggestion here. Yep. Okay, cool. All right, let's see where AI is at this point. Okay, it's running the dev server. Interesting. Interesting. Okay, because actually I was also running the dev server. Uh, so that that it killed the dev server. That's cool. One thing I think is annoying is this. Sometimes AI will run the dev server for you and then if you try to run it yourself, you have to like kill the you have to basically do what it does here. Kill kill kill vit and then you can run it. D1 database IP hashing. That's okay. Okay, let's try that again. PMP rendev. Okay, that's running. Sweet. Let's open it up. Server function. Here we go. Vibe suggestion. Share your ideas and vote on others. Okay, so no suggestions and this is all running locally. So for the next episode that we'll do I want title my creativity right now is just it's the sunglasses. So title make a spelt kit app for uploading images. Okay description I love images and I love swelt kit. The nice thing is we're just violating. See, this is I can misspel it. I don't care. I don't care. My name Yellis. All right, let's see. Submit suggestion. Okay, cool. That works. Let me refresh. Okay, it's still here. Dope. I'm going to up vote. Nice. That works. Refresh. Still here. Pretty tight. Let me open this in a new tab. Okay. See, it knew this thing. And I can do it again even though it's the same. It's a new window because it it's by IP. So that's pretty tight. All right. This is great. So let's deploy it. Okay. And of course I can deploy it myself, but we can say can you make a well first sorry compact. Pretty crazy though. In 20 minutes we got it running. Let's deploy this workers. I have multiple CloudFare accounts. We'll do my employee account. Okay. Apply the migrations remotely. Deploy. Note, I'm doing all this from open code. Normally, I would do this myself, but now I'm just doing it from VIP session one. Here we go. World tell me. There we go. Okay, let's let's open it up. Five suggestion. Hope you enjoyed this session. Greetings. This is not a real suggestion of course. So I hope you guys and everyone, not just guys, I hope everyone comes up with some cool suggestions and then we'll do another vibe session. Submit suggestion. Okay, in the last five minutes, my camera got too hot, so I'll re-record the outro. I hope this was fun. I I had fun just vi coding this. I hope this was useful. I didn't really write any code. We just literally vi coded a suggestion app that I hope you'll use for the next episode. And thanks for watching. This is a new concept, you know, just trying something new, vibe coding. And yeah, let me know what we're going to do next time. Better.