“Farm-to-table software”: How I built a Thanksgiving party hub using Lovable for managing invites, dishes, shared recipes, and photos

[00:04] - Welcome back to How I AI. I'm Claire Vo, product leader and AI obsessive here on a mission to help you build better with these new tools. Today, we have a very special pre-Thanksgiving episode of How I AI. [00:16] where I show you how to use Lovable to vibe code a personalized party hub for your upcoming dinner party. I share some of my own personal tips and tricks on how to uplevel the designs, [00:28] of any Vibe Coded app, [00:30] using Google Fonts and Midjourney, [00:32] And then I share my personal experience [00:34] favorite trick for using ChatGPT to make recipes [00:38] easier to make. [00:40] Let's get to it. [00:41] This episode is brought to you by WorkOS. AI has already changed how we work. Tools are helping teams write better code, analyze customer data, and even handle support tickets automatically. [00:53] But there's a catch. [00:54] These tools only work well when they have deep access to company systems. Your copilot needs to see your entire code base. Your chatbot needs to search across internal docs. And for enterprise buyers, that raises serious security concerns. That's why these apps face intense IT scrutiny from day one. To pass, they need secure authentication, access controls, audit logs, the whole suite of enterprise features. [01:20] Building all that from scratch? It's a massive lift. That's where WorkOS comes in. WorkOS gives you drop-in APIs for enterprise features, so your app can become enterprise-ready and scale up market faster. Think of it like Stripe for enterprise features.

[01:50] day. [01:51] With Thanksgiving just a week away, I thought I would use the idea of a Thanksgiving party hub, vibe-coded in lovable, as a way to show you a couple tips and tricks on how to up-level your prototypes and vibe-coded software, use some tools that are a little bit more fun than the ones we get to show every day, and show off some of my personal tips and tricks when it comes to hosting, cooking, and building websites may be my favorite things. [02:20] So to get started, I thought about creating a Thanksgiving party hub, and I started this project with a very simple prompt in Lovable. Why did I pick Lovable? Well, I picked Lovable because usually, although unfortunately not in this exact instance, usually Lovable has a little bit nicer of a design component to it than other vibe coding tools. It'll bring in a little bit more color, [02:50] it has a little bit more humanity and personality to it. So I prompted Lovable to give me a Thanksgiving party hub for managing invites, [03:01] dishes, shared recipes, and photos. So if you're responsible for hosting a big holiday meal at your house, you know that you got to do a couple things. You got to figure out who's coming and honestly what [03:12] they can eat at this point. You usually do something potluck, so you want to coordinate the dishes across your guests. I have a tip on recipes I really want to share that I think is really fun. And then of course you want to have a photo gallery, which could be really cool.

[03:29] And so I got this up before we started the show. And you can see here that lovable thought through modern event management apps and kind of brought some cozy holiday gathering to it with a warm autumn palette with orange, golden browns, rich browns. And it had the features for V1 that I listed in my original prompt, which was a welcome dashboard, a guest list, discoordination, recipe sharing, photo gallery, and a warm, inviting autumn aesthetic. Now. [03:58] I don't think this is that great. So one of the highlights of today's episode is going to be showing you a couple tips and tricks that I might use to really up level the design of a vibe coding or prototyping project that I might do. And I'm going to do this a little aside of what you might use in a company, which is bring your own design system to something. This is going to be a little bit more like how can you personally develop your design and taste as you develop these applications, [04:28] and what are some additional tools, tricks, et cetera, that you might not think of [04:33] that would help you make your web designs or your application designs better so just looking at this [04:40] We don't love it. It's not the prettiest. It's got a pretty boring stock photo in the background. You can't really read it. There's some layout issues in the navigation here. You can see this is [04:53] butting up against the border of the image. You know, it's just kind of... [04:58] boring. And one of the things that I think you can do to up level any design is get a really nice typography combination in your application. And something you might not know about these vibe coding tools like Lovable, Bolt, V0, Replit, etc. is they're all pretty well integrated with Google Fonts. So one of the things that I really like to do when thinking about how to bring up

[05:28] is Google Google Font. [05:30] combinations. This will give you a combination of headline and body fonts that can be used, licenses are free, [05:37] on the web or in an app, [05:39] that really already look great and have been designed and inspired by great designers. And so Canva has this awesome resource, this page that I go to a lot, which just lists, you know, combo after combo of Google font combinations. So everything from sort of standard ones that might like look good on a SaaS app to more fun or media oriented ones to ones that might fit a personal [06:09] this homemade apple, which is a font, not a recipe yet, and railway font combination. I think it's really cute. It gives me sort of this like grandmother writing a recipe feeling. And I know for a fact that Lovable can access Google fonts. So what I would do in this instance is I would actually copy and paste these two font names. [06:31] It would go back to lovable and say, OK, let's up level the design. [06:39] starting with typography. [06:43] I want, I can't type today. I want to use Google Fonts. [06:51] Homemade apple for the headlines and railway for the body. [06:57] Font.

[06:59] So Lovable should be able to interpret this and go ahead and embed the right fonts, the right scripts, the right structure to then up level the CSS and the typography for this design using those two fonts that we identified. So I'm excited to see what it comes up with. [07:19] Ah, so cute. Now, not as readable, but you know, honestly, I don't care. I think it's really, really, really adorable. And if you're curious about how this actually works, again... [07:32] You can go into your fonts or you can go into your files. You can see it's pulled in the Google APIs fonts. [07:39] It's pulled in homemade Apple and Railway as a font. It's added those fonts as default in the Tailwind, which is our CSS kind of framework. [07:49] the tailwind config and it's updated I think if I find headlines yep headlines are going to now be that font homemade and body is going to be font railway so again what I like about this is it not only is a process for you to update your design and make it look great but just by reading these three files you can understand this is how I pull in google fonts this is how I configure them in [08:19] some of these apps. And then here's how I would set those default fonts in my CSS. So again, it's a combination of learning the design system and the code system through, [08:28] these vibe coding tools. And I think it looks

[08:32] pretty good. I think this just looks really cute and it makes me very happy. Now, one problem we have is that the Thanksgiving Party Hub is [08:40] header does not look great. It's really hard to read. Also, I definitely wouldn't call it the Thanksgiving Party Hub. So I want to make two changes here. And in making those two changes, I want to go over to one of my favorite [08:54] other tools which is mid journey so i don't love this stock photo at the top of [09:02] leaves in a plate or maybe it's not a stock photo maybe it's an AI generated photo but I still don't I still don't like it and I want to generate something more fun and [09:11] When I am working in MidJourney, which is an AI photo generating application that honestly was the first thing that made me really excited about generative AI, it was one of the most inspirational tools I've ever seen. [09:28] I like to use and look up style references on X. So style references are little codes that you can append to the end of your mid-journey prompts to generate a really cool aesthetic or image style. And there are so many people out on X that are sharing these really interesting, super cool [09:58] specific style. And one that I found while researching this episode,

[10:04] was this one by Michael Rabome. [10:06] which is this like whimsy textured storybook paint, kind of like paper cut out aesthetic. I thought it was super cute, very organic, gave me like cozy vibes, felt very kid friendly. And so I wanted to generate an image like this. And you can see here, it has this style reference, which is this long code that gets the image generation into a specific kind of stylistic [10:36] And then [10:38] He's also gone on and added a couple other parameters like aspect ratio, stylize parameter, [10:45] and what version of the mid-journey model you might use. And so I just really love this and wanted to generate something like this. And so I actually created these before, so we didn't have to wait. And I copied the prompt almost exactly, except I changed it to say geometric paper autumnal harvest table. And so I got this, I think, really, really adorable image of like, [11:09] wheat in a vase and pumpkins and fruits, and it just feels exactly like I wanted for a [11:18] my website and my image but it's a square and if we go back to my image [11:24] I really need this long thing. And [11:27] This is real talk. I struggled. So one of the things you can do if you have an image you like and you know the prompt generated it is you can go down here and I'll zoom in a little. You can go down here and say use.

[11:38] prompt so i can actually reuse the prompt and one of the things that i missed is that it had this hard-coded aspect ratio [11:47] Um, [11:48] parameter in here so I'm gonna go ahead and delete that and then go into the settings and actually do a 2 1 which is a pretty wide aspect ratio image but I'm gonna use the exact same prompt because I thought it generated a really good result and I'm gonna go ahead and submit that and [12:04] Mid-Journey has gotten super fast. You can see below I've done a couple other ideas, but you'll see here now that same image style and prompt is going to be generated, but in that wider aspect ratio. So I think this is a really fun tip or trick for folks that are using Mid-Journey to generate images for specific instances, is you can really tune the metadata and the parameters [12:34] your design. [12:36] Now looking at, oh my gosh, this is totally giving me California Thanksgiving vibes, which is like a pumpkin and the ocean and this beautiful, it looks a little Tuscan, a little Tuscan hill. And I really love this. I think it's super cute. So I'm going to save... [12:54] This image, [12:56] And I want to replace my header image on... [13:00] this Thanksgiving party hub with this image. So I'm going to say, okay, the header needs to be [13:08] improved

[13:10] Here... [13:11] is the image I want for the background. [13:14] Thank you. [13:15] Round. [13:17] I also want the title of the page to be [13:21] Claire's Thanksgiving. [13:25] feast. [13:27] And I [13:28] all the copy, [13:30] to be more personalized [13:33] around Claire hosting [13:36] Thanksgiving at home. [13:38] and then i'm going to drag that image over and we're going to see if it takes it in and updates the [13:44] image so i've uploaded that photo generated by midjourney it should be nice and wide for this and [13:52] I'm gonna submit it and have it update that header. And again, these are just a couple really simple tips and tricks [13:59] that are going to get you from what feels like a little bit like vibe coating slop to something much more beautiful something much more well designed something that really feels like [14:10] you know artisanally crafted farm to table software which is what we want all of our vibe coding apps to look like so it's going to take that image it's going to personalize everything for their claire's thanksgiving feast it should be pretty fast again once you have the framework for your application i think it's really good to just little bit by little bit [14:30] Iterate on. [14:31] the components of your design to improve them over time. I think if you gave a big list of, I don't like the typography and I don't like the header and I don't like this and I don't like that, it can get lost in actually generating what you want. But I think this incremental step-by-step is really helpful. Now, again, I think this looks

[14:52] already so much better than what we had before. [14:58] So pretty. It feels much more cozy. It feels like honestly just well, much better design. But we have this image problem here that the text is clipped. And so I'm going to go ahead [15:08] and take a screenshot, which is another trick I really like. [15:13] And take a screenshot and say, [15:16] The headline text is being clipped. [15:19] So we're going to type that in. Text is being clipped. Please fix. Also replace the star above the headline text with a... [15:33] pumpkin, no, pumpkin, pumpkin. [15:37] And leaf emojis. Pumpkin and leaf emojis. Now, I can't [15:43] again my nails look very nice for the holidays cannot type one of the benefits of ai is you can typo you can misspell things you can have really beautiful nails and it will not matter so this little how i ai [15:56] tip for the ladies out there. And I realize I'm not on my paid lovable plan, which is on my other profile, but we're just going to do what we can do right now. [16:05] So it's going to fix the text clipping and replace the icon with pumpkin and leaf emote. Ugh. [16:12] Look at that. [16:13] It's a little Halloweeny, so we might remove that pumpkin, but hopefully it'll fix the text clipping on the image and add proper spacing, which is what we want.

[16:26] And what I like about this is I thought the pumpkin would be really cute. I forgot that the pumpkin emoji is by default a jack-o'-lantern. We are past Halloween now. If you haven't missed it, go back to our Hawaii AI episode on a Halloween fortune teller app that was generated. But, you know, this is a little silly. So I am going to... [16:49] Um, [16:51] go to what files were changed, and I am actually just going to get rid [16:57] of this [16:59] little pumpkin. [17:00] And then I'm going to come back in here and actually fix the line height to get the clipping issue fixed. So hopefully this hero headline will be fixed. It really doesn't want to work. And honestly, [17:15] We're just going to let it let it be. So we're going to go back to latest. We're going to accept that this is a little funky looking. We'll fix it later. But again, you can tweak this. This is just proof that sometimes vibe coding is not perfect. And I don't want to spend time today on optimizing this headline height. Okay, we're going to ignore that header for right now. But the last thing I do want to fix is this headline header nav. I think it's just... [17:42] little funky looking and so again I'm just going here I took a screenshot of it I'm going to say the spacing at the bottom of the snap bar is a bit broken please fix I feel like the buttons are just like a little [17:52] light. So I'm going to ask them to make the buttons just a little bit darker. And I'm going to submit that. Hopefully that fix goes through. And we've gone from a pretty boring first design, which we can flash up.

[18:06] to a really beautiful place [18:09] fully customized party hub with a bunch of features in here that we're going to expand on. [18:18] And look at that. [18:20] it didn't fix it at all so again with our vibe coding something that i would probably do if i cared a lot more is i would go in and actually optimize the code here i would read the code i won't make you all watch me do this but i would figure out what is going on with the images why is this not actually changing and i would make those changes myself but [18:45] for now i think it looks really cute again we have a guest list a dish coordinator recipe collection and photo gallery [18:52] The last idea I have for you before we go into recipes, which I think is really important, is adding dietary restrictions to your party hub. So I don't know if you are like me, but I have relatives that are vegan. I have a husband who is gluten-free, dairy-free. I have a me that wants to eat. [19:14] everything on Thanksgiving. And so it's really great to be able to add these like little custom features that might not be in your standard invitation app here in Lovable. So I'm going to ask one more thing functionality wise. I'm going to say [19:26] Okay, we'll come back to design later. I don't know why I'm saying this. I just feel like I'm being polite. Um... [19:33] Let's add dietary preferences here.

[19:37] Restrictions. [19:39] to the guest list, let's start with a multi-select [19:46] of the most common ones. So what this is going to do, in addition to adding guests with their name and email address, which is something that the app based off of its own knowledge of how other event apps work, it's actually going to add dietary preferences and restrictions to the guest list. And now one thing I call out for people is it is useful to have a language around user experience design and coding when explaining this. For example, if I just said add dietary preferences, [20:16] could add like a text field where you're typing it in, or it might ask me what dietary preferences do I care about. [20:23] Instead here with this prompting, I was pretty specific that I said, let's start with a multi-select of the most common ones. And multi-select means people can have more than one dietary preference, which they do. And I want to not come up with a list. I want people, I want lovable to come up with a list for me. So if I go to guest list, now I can select my dietary restrictions and select multiple ones here. Love it. Let's see if I can cover my husband. [20:53] dairy-free. [20:55] Perfect. [20:56] And then my mother-in-law is vegan. So we got vegan and then no restrictions as an option, which is great. And the last thing I might ask it to do is... [21:06] Take...

[21:08] these restrictions and add tags to the dishes so people can [21:15] Call out common allergens in... [21:19] in their dish. [21:21] or [21:25] Ingredients. [21:27] this list might care about. [21:30] Okay, so again, I'm taking one part of the data model from a form and I'm adding it to another part of the data model of the form. And the reason why I love vibe coding something like this so much is I don't really have to think about how those might interact. This app is going to be a lot smarter than I would be in the 30 seconds it's going to take to generate. [22:00] not good for dairy-free or it is safe for dairy-free. And so I think this is just a really nice way to, again, not just improve the design of an app, but think about what aspects of a data model you could add to something to really customize it to make it useful to you personally. [22:19] So it's going to add these allergen tags to the dish manager. It's probably going to take a second. [22:24] for it to refresh and we will see what that looks like once it's live here we go so add dietary tags and allergens look it just gave the [22:34] exact answer we needed which is let's just map it one-to-one to the dietary information if it's dairy-free market dairy-free if it's vegan market vegan if it's gluten-free market gluten-free

[22:45] And we can see here that now you can add things like mashed potatoes that are vegetarian and gluten-free. Thank you, Sarah. My husband will be very happy here in the list. And so we can now start to see... [22:59] what [23:00] kind of dishes are coming, who can eat them, will they meet our guest needs. We could do all sorts of interesting things here, like list the names of people that could eat these dishes, or even build a report on do we have enough coverage across all of our kind of categories of foods, main sides and desserts, or do we have enough coverage across our dietary restrictions so that my husband won't be hangry when he's at Thanksgiving this year. But again, we're not [23:30] that is to really inspire you to take something a little bit further. [23:35] The last piece I want to show you is one of my favorite flows for recipes. So this is a bonus bow on the end of this Thanksgiving themed episode where I'm going to show you one trick to use using AI that I think is really great for recipes, especially if you're cooking with food. [23:55] So Thanksgiving again is one of my favorite holidays. I love cooking for my family and I love cooking with kids. But one of the challenges I've always found using online recipes for kids is they're typically formatted like this. [24:12] They typically have a list. Well, let's talk about like the narrative structure, the kind of novel that goes before any online recipe. But let's say we get past that. It usually has a list of ingredients and measurements, and then it has instructions. So let's say you're making chocolate chip cookies. It will say, you know, you need two cups of flour and eight tablespoons of butter and one cup of chocolate chips, etc., etc. And then the recipe will say mix the flour and the chocolate chips.

[24:40] This is a terrible cookie recipe, but just go with me. And if you have kids... [24:45] you know you're scrolling up and down with dirty, like dirty hands trying to figure out, well, how many chocolate chips, how much butter, how much flour, because the measurements... [24:54] And the instructions are split up separately. And this has been one of my personal favorite AI use cases, which is to bring those two things together and put them in an order [25:06] that you can actually follow with your kids so [25:09] I'm going to show you all Claire's. [25:11] Favorite Thanksgiving recipe. It is this polenta and sausage stuffing. It's made of polenta, so it's corn. It's gluten-free. [25:20] You put sausage in it. You blend half of it. It's like chunky, creamy, crispy on the top. It is so delish. It's my favorite thing to make. And I love having my kids help me make it. But again, you can see this recipe. [25:35] has the exact problem we talked about it's got all these ingredients and numbers up top but then when you're talking about exactly how to cook it [25:46] the ingredient measurements are not in the same order. And so what I like to do, it's super simple. I really just copy and paste this down. [25:58] recipe. [25:59] You could also give ChatGPT the link. I'm going to use 5.1, which came out last week. We didn't do an episode specifically on 5.1. Here's my general vibe on 5.1. It's got a better personality than 5, for sure. It's got a little bit more of that 4.0.

[26:18] cute energy, not so many bullet points, which I love. [26:22] It's a little... [26:24] too cute sometimes. So I've noticed sometimes it brings sort of a [26:29] sassy attitude you can tune the quote-unquote personality of it a little bit but like it brings a little bit of a Personality to tasks that you might not want it to bring a personality to so I think that's problem one and [26:41] Problem two, call it a problem or not a problem, is it is actually pretty quick to call a tool. And so what I found is especially 5.1... [26:53] auto or instant where it's like thinking right or it's not doing thinking or it's thinking very fast [26:58] it will just go right into the task. And usually I like a loop or two of questions or feedback. So that can be a matter of tuning both the model and the reasoning effort in these models. But right now we're just gonna do auto-review. [27:12] I don't think this needs to think very hard about rearranging this text. And we're going to paste in this recipe. So I'm going to say... [27:20] Here [27:22] is a recipe please format it into [27:27] a different structure. [27:30] And then I'm actually going to go back to my app and remind myself of what I need. [27:34] I need a title, description, prep time, servings, ingredients, and instructions, but I want the instructions to follow a specific format. [27:42] I'm going to say title... [27:45] description. [27:47] cook time,

[27:48] ingredients, servings, [27:52] And... [27:54] instructions. For instructions, [27:58] I want them clearly in steps. [28:01] step one, step two, et cetera. And I want to make sure both the [28:08] Ingredients. [28:11] and the measurements [28:14] are in line, so I do not have to go back. [28:20] and reference the ingredients left. [28:24] ingredients list. Okay, so I pasted that recipe in. I gave a very specific format that I wanted to do. If I was being really clever [28:34] I would probably create a custom GPT with these instructions for translating ingredients. If I was being very, very clever, I would go into my lovable app and I would make an open AI call to auto translate and update these ingredients. So, again, you could just imagine how this would work. [28:51] kind of evolve over time if you really wanted to spend a lot of serious time on recipe generation or improving things. And again, this is just like quality of life that I think is so fabulous. So it's decided it needs to think a little bit. We have the blinking dots, so we'll come back as soon as this recipe is generated. [29:11] while we're sitting here i will make one comment about 5.1 that i've heard from a couple people that have spent a little bit of time comparing this to other models which

[29:20] It thinks longer. It is a little bit. [29:23] bit maybe a lot bit slower than five so again think about your use case I kind of feel like this is frozen it's stressing me out so I'm going to go ahead and stop [29:34] I'm going to see if I can try this again in a faster model. So let's just paste the same prompt. Let's change it to instant right away. Let's submit it again. One of my favorite prompting tricks, which is just bail and restart. All right, here you go. Fully reformatted, clean, structured with measurements embedded directly into each step so you never have to jump back to the ingredients. So it got my user story right. [29:59] perfectly and look at this. So for if you have a seven year old, and you need to tell them to follow a recipe step by step, [30:08] This is what we need. Bring six cups of water and two teapun salt to boil. Not water and salt, the exact amount. [30:16] bring in two cups of polenta so again this is just such a nice flow for reorganizing information for your brain [30:26] That will allow you to be a little bit more efficient when cooking a giant meal on Thanksgiving. And let me just give you a couple ideas. I copied and pasted from an online website recipe. You could pull out your recipe book, take a picture of the recipe, kind of like snap the few pages. [30:45] upload those to chat gpt really reorder reorder this and what i'm gonna do is i'm actually just going to add this over an app so i'm gonna go side by side

[30:57] We'll go over to our app, we'll add it in, and we will get you out of here to enjoy and prep your own. [31:04] Thanksgiving. [31:06] App? [31:07] and your own Thanksgiving meal. So let's see how easy this is to pull over. [31:13] I'm going to put my title... [31:14] It gave me a nice description. [31:17] Prep time is about an hour. [31:21] servings 8 to 10. [31:24] ingredients, here it goes. [31:27] Look at this lovely thing. [31:30] and my instructions, which are these beautiful steps, which I love. And again, I will share this recipe. It is so good. And so now I have this beautiful polenta and sausage stuffing recipe with instructions. Formatting needs to get a little bit better. And I can take this and share this with friends. We can all share our favorite recipes with friends. We can all share what the ingredients are. So if somebody has a dietary restriction, they can know exactly what it is. [32:00] can follow the instructions directly. I do have to promote one thing, not a paid sponsor, but my kid actually two years ago and I made this website Runaway Pancakes. It is easy recipes for their kid and adult helpers. We basically productized [32:20] this flow and we put a bunch of kid-friendly recipes up here including his favorites. So if you're looking for a step-by-step very kid-friendly recipes and instructions with

[32:33] pretty creepy but high quality mid journey generated images no we did not actually cook this salmon then you can go to runaway pancakes [32:41] dot com and uh we also have some great coloring pages so please let me know if you want me to add any of your favorite recipes to that site [32:49] So that was our very special pre-Thanksgiving How I AI episode on vibe coding your own personal party hub using Lovable, where I shared my personal tips and tricks for up-leveling the design of your sites using things like free Google fonts and mid-journey style references. [33:09] We went through how you can add custom features that would never exist in an invite or party app directly to your app in Lovable. I showed how it's actually sometimes not perfect at debugging. Style issues, we'll go and fix these afterwards and I'll publish the site. And then I shared my personal favorite way to translate recipes to make them easier to cook, especially when you're cooking for a big group. [33:34] I am so thankful for all of our viewers and listeners. In case you missed it, we have just recently hit 50,000 subscribers on YouTube in just our first six months. This has been such a fun journey, and I am looking forward to more holiday events. [33:52] ending in AI, How I AI episodes where I can share more tips and tricks like this for you. [33:58] Thanks, everyone. Thanks so much for watching. If you enjoyed the show, please like and subscribe here on YouTube or even better, leave us a comment with your thoughts.

[34:07] You can also find this podcast on Apple Podcasts, Spotify, or your favorite podcast app. Please consider leaving us a rating and review, which will help others find the show. You can see all our episodes and learn more about the show at howiaipod.com. See you next time.