Idea to production in 20 minutes

00:15 Hello, everyone. I'm very excited to be here. It's amazing to see everyone from up here, finally. My name is Devin, and today we are going to try and turn an idea into a production Web app in less than twenty minutes. But first, we need to talk. Kent is awesome, and today has been amazing.

00:42 The speakers have been epic. I've learned so much already, and we are not even done. But we do have a problem.

00:52 There is something I notice about the rest of the schedule that I really disagree with. Ken says that we have to have dinner on our own. Kent, I'm not upset. I'm just disappointed.

01:09 You see, I've made some pretty cool new friends today, and I'm sure that you have too. And I think it would be great if we could all hang out later, even if Kent says we can't.

01:23 So let's try and fix this with dinnernotonyourown.com.

01:31 An app to help epic web devs make dinner plans later and not have dinner on your own.

01:38 Why? Because you can just do things.

01:47 So what features do we need to solve our problem? Well, we need to find restaurants nearby, and we need to find our favorite restaurants by filtering by distance, rating, or price. And we also need to see what everyone else is doing, and be able to join or leave a dinner group. So what do we have right now?

02:09 Not much. We have an idea. Let's take a look at it, and we should probably get building. So we're in Cursor now. We've got, the browser on the left, the AI chat in the middle, the code on the right, and the files on the far right. Let's kick things off, and then I'll explain what's in our idea.

02:33 Let's do phase one.

02:37 Okay. So I just asked Claude to start phase one, which is project setup. We are pulling the epic stack, which is an amazing starting point for us to build from.

02:51 So let's take a quick look at our idea. I've captured it into a product requirements doc, so, or a PRD, and I've put it, I've made it a cursory project rule. So at the top we have some general rules, and then we have a description of our features, and then we have an implementation plan with five phases.

03:13 Phase one, project set up. Phase two, APIs and services. Phase three, the back end for our new restaurants page. And phase four, the front end for our restaurants page. And then finally, phase five, the custom domain set up to dinnernotonyourown.com.

03:35 So you can see the epic stack set up is asking me if I would like to deploy our new app to fly.io, which I would, so let's do that. And we'll use my account and we'll use the closest region and it's ideal to production, so no staging needed today.

03:59 And cool. So now we've told Fly what it needs to deploy the app for us, and we do want to deploy right now. So let's do that. And while that's busy, we can pop it out to our terminal and let Claude continue on to bigger and better things, like setting up our database.

04:23 Okay. So during the project setup phase, we're getting the epic stack. It comes with authentication, email, some template features, and a whole bunch of other stuff that's pre connected, which is pretty amazing and lets us hit the ground running with our new idea. We are also adding the new database models that we will need.

04:46 So we are adding these to our Prisma schema. These are attendees, which can be a part of a dinner group, which is at a restaurant.

04:54 We are also running a database migration to apply these new models to our actual database, and we are running a seed script to put some fake data into the database just so we can test things locally later on. We're also adding the, API keys that we need to connect to the external services, that we'll need.

05:15 So we're going to use the Google Places API, that will fetch some nearby restaurants. And we are going to use resend to handle emails for us. So, we'll need that for our users to sign up.

05:30 We are also going to, just update our email service to use the right email domain so our emails come from the right address. So as a side note while that's happening, I'm using Cursor as my code editor, but you can use, Windsurf or Cline. I found they have been really good alternatives as well.

05:53 I did a talk for epicweb.dev last week where I compared all of these tools side by side, if you want to learn more about them.

06:03 And so Claude is just deploying our secret keys to our production instance now. While that's happening, I'll also mention that you've noticed I'm talking to the editor. So I do broad strokes with my voice, and then I switch to typing when you need precision.

06:23 Yeah, it's really nice because, obviously, we can talk three to four times faster than we can type. So it's a massive productivity boost. And I am using a tool called Whisperflow to do this. Okay, so, Epic Stack is almost done set up, being set up.

06:41 And, you can see that we have our new app deployed to fly, which is pretty exciting. So, let's connect it to our GitHub repo.

06:55 Cool. So let's name it dinner not on your own. 66.

07:07 Yes. This is the sixty sixth time I've done this.

07:14 Cool. And we also need to give our, our GitHub action access to fly so that when we push changes to our main branch, it can get deployed to production for us. So we'll use a fly API token.

07:32 Normally you need to prepare it in the oven for about two hours at three fifty degrees, but we'll use one I made earlier.

07:46 Cool. So it looks like

07:53 Okay, Claude's taking his time a little bit for phase one, but that's okay. Let me give you some information.

08:06 Okay, so while we wait for that, let me talk about the first lesson that I learned from making this PRD. So first I started by explaining my idea and the context that it was a live talk to Claude. And he gave me his best attempt at a PRD.

08:24 And I gave it back to Claude and asked him to one shot the app for me. And it actually worked really well. The first one was great. It had like a live Google map. Anyway, then I tried it again and it didn't work at all. And another nine times after that.

08:39 So, it was really hard to get predictable results. So I thought, Okay, maybe I should add more details to the PRD and just give Claude everything he needs. I gave it the epic stack architecture. I gave it established patterns in the code.

08:56 The tech stack even set up an auto updating diagram of the file tree in the project. And it actually made things worse. So interestingly, my first lesson was be really concise with your cursor rules. Claude gets overwhelmed easily and has a hard time figuring out what's important.

09:19 So you can fix this by making sure sorry, I'm just gonna let Claude continue. You can fix this by making sure every instruction in your cursor rule is important. So every instruction you add should be there for a reason and every word in that instruction should make your instruction clearer. So, like, eliminate all fluff,

09:48 and then Claude won't get distracted. Okay. So, phase one is complete, our project is set up. This is very good news. So, let's do phase two.

10:12 So Phase two, we are setting up our, APIs and services that we'll need. So we are going to set up a Google Places service, which is going to handle all the interaction with our Google, Places API. So fetching nearby restaurants and any details for those restaurants.

10:30 We're also going to add a, a restaurant service which is going to handle all restaurant related data and make sure that we're not spamming Google's API every time a user hits the page. The restaurant service is also going to handle when a user joins or leaves the dinner group.

10:57 Okay, so Claude is going to also sneak in a photos resource route so every time we load a restaurant on the page, the front end can hit that and load the appropriate image. It also means we can keep our API key on the back end and not expose this in the client.

11:15 Cool, so Claude is still busy with the restaurant service. While we wait, let's talk about the second lesson that I learned trying to make this PRD. So there I was with this highly detailed PRD.

11:32 I should have brought some water up here.

11:36 So there I was with this highly detailed PRD with all these different sections.

11:42 It had Oh, there we go, the MC rider.

11:48 Good MCs, Ken. Thank you. Okay. So, there I was with this highly detailed PRD with all these different sections and details, but Claude seemed to pretty much ignore them, no matter how much I capitalized things. So then I thought maybe the important information is too far away with what clothes I am currently focusing on.

12:16 So I followed my first lesson and I got rid of all the fluff, and then what was left, I made sure to move any important information right next to the implementation step where it was needed.

12:30 So when Claude tried to import Remix instead of React Router for the seventh time, thank you, Ryan, I knew to put that rule right next to the step that worked with those imports. So this was the second big lesson. Keep related information together.

12:47 Claude tends to forget things that aren't immediately relevant to the task at hand, so cluster important rules next to the steps they apply to you, so it's in Claude's context window at the time that it's needed. Okay, so,

13:05 we have our Google Places service and we have our restaurant service and we have our, restaurant resource, our photo resource route. So we can move on to phase three.

13:21 Alright, so phase three is the restaurant's root back end. So we are going to add a loader function which will prepare the data that's needed on the page, and we are going to add an action which is going to handle the interactions the user makes with the page. So, when the user joins or leaves a dinner group.

13:46 Okay, let's jump into the third lesson I learned making this PRD. Well, Claude is busy with that. Okay, so now my PRD was concise and all the important information was co located next to the steps that needed them. Things were definitely improving, and Claude's output was getting more predictable.

14:06 But every now and then, Claude went on an adventure of his own, and sometimes still ignored my now very clear instructions. But I noticed this only seemed to happen for the larger pieces of work, so I split my PRD into the smaller phases that we see now, and this made a massive improvement.

14:28 So this led to my third big lesson, keep your phases of work small. The smaller your phases, the more control you have. You can get away with larger phases if your instructions are clear and concise, like we've talked about, but you can only push it so far before Claude goes on another adventure.

14:50 Okay, it looks like phase three is done, so our restaurants page back end is in place. Let's do phase four.

15:01 Okay, so phase four is the front end for our page.

15:05 Claude is going to add a navigation from the global user menu to our new restaurants page, and he is going to ask me if he can install some Shadsen UI components, ones that we don't have yet that he needs to, that it needs to, create the front end.

15:25 And that's fine with me because Shadson UI, if you haven't used it, is an amazing library not only to work with, but it's also an incredible learning tool. I've learned so much about good front end code just from working with that code in my own code base. Cool.

15:43 So, let's install those packages, and we have a button already, so that's cool. Alright. So, while Claude is busy with the rest of the front end, we can do a bit of cleanup ourselves.

15:55 You could ask Claude to do this for you, but I found that some things like repetitive multi file edits and deletions are sometimes done faster by hand, and it also makes me feel like I'm still needed. So,

16:13 there are a bunch of notes features in the epic stack that we no longer need, so I'll get rid of those, and I'll get rid of the related tests. And then there is a global search bar, which we won't need. So I'll get rid

16:43 of

16:46 that. Cool. And then we can also rename things from epic notes to dinner not

16:59 on your own.

17:05 Cool. And while we're at it, let's update all any references to the epic stack.

17:17 Cool. So, I think that's everything we have to do on our side. It looks like Claude is almost done on his side, its side. And,

17:34 fun fact, Claude is a female or a male name in France.

17:54 Okay. This is very exciting. Phase four is done, which means our front end is done, which means we have everything we need to have a fully functional app, hopefully. So let's test it out and see if everything is working as expected.

18:16 The moment of truth.

18:24 That's good. That's very good. Okay. So the app is running on my machine. Let's see if it actually does anything. Cool. So let's log in.

18:41 Cody loves you. And let's see if we can find a restaurant. Cool restaurants. Oh, I am having dinner on my own, and so is everyone else. But that is Okay. Maybe we can fix that now. So let's try to find somewhere nearby, maybe somewhere fancy, maybe not that fancy.

19:03 Copper onion looks pretty good. I've got dinner

19:14 plans. Very good news. Very good news. I'm excited. Cool. And we can leave it. Yeah. Great. So it works on my machine. Works. Yeah. What a relief. Cool. So let's push it to GitHub.

19:39 And that should,

19:43 that should kick off our GitHub action which will, deploy to fly to our production instance.

19:53 So while that's happening, we can move on to phase five. Phase five. So phase five is setting up our custom domain. So our domain is registered with Cloudflare, and our app is running on fly.io.

20:10 So Claude can use the fly command line tool to get the DNS records that it will need, and then it can interact with our Cloudflare MCP server, which I've set up, and then manage our DNS records.

20:29 So the Cloudflare MCP server is basically just a way for Claude to use Cloudflare's API, but through the standardized model context protocol. So you can see it's busy trying to find out what DNS records we have, and then it should add them for us. And you can see, it got the DNS details from Fly.

20:54 Yeah, so, Claude has everything we need.

21:00 Yeah. So while that's happening, let's just take a moment to reflect. So we've gone from this, an idea, to this deployed app in less than twenty minutes. Yeah.

21:23 It's crazy. It's crazy.

21:29 So, with the epic stack, Fly.io, and the amazing Cursor and Claude combination, we can do incredible things, and we can do them really fast. It's actually ridiculous what we can do today. The future is very, very exciting.

21:47 Thank you so much. I will see you at dinner.