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

0:04Welcome back to How I AI. I'm Claire Vaux, 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, where I show you how to use Lovable to VibeCode a personalized party hub for your upcoming dinner party. I share some of my own personal tips and tricks on how to up-level the designs of any Vibe Coded app using Google Fonts and MidJourney. And then I share my personal favorite trick for using ChatGPT to make recipes easier to make. Let's get to it. This episode is brought to you by WorkOS.

0:44AI has already changed how we work. Tools are helping teams write better code, analyze customer data, and even handle support tickets automatically. But there's a catch. 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. Building all that from scratch?

1:22It'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. OpenAI, Perplexity, and Cursor are already using WorkOS to move faster and meet enterprise demands. Join them and hundreds of other industry leaders at WorkOS.com. Start building today. 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.

2:07Use 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. 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 and generally i just think for personal projects 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 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.

3:10You got to figure out who's coming and honestly what 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. 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.

3:57Now, 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 and what are some additional tools, tricks, etc. that you might not think of that would help you make your web designs or your application designs better.

4:37So just looking at this, 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 butting up against the border of the image. You know, it's just kind of 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 level typography into my apps is Google Google font combinations.

5:30This will give you a combination of headline and body fonts that can be used, licenses are free on the web or in an app 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 application a lot better. And I want this to feel super, super cozy. So I'm going to go with this homemade apple, which is a font, not a recipe yet, and railway font combination.

6:15I 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. It would go back to Lovable and say, okay, let's up level the design starting with typography. I want I can't type today um I want to use google fonts homemade apple for the headlines and railway for the body font 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.

7:16So I'm excited to see what it comes up with. 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, you can go into your fonts or you can go into your files. you can see it's pulled in the Google APIs fonts. 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, 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.

8:01So again, what I like about this is it not only as 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 Tailwind, which is very popular right now with 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 these vibe coding tools. And I think it looks pretty, I think this just looks really cute and it makes me very happy. Now, one problem we have is that the Thanksgiving Party Hub header does not look great.

8:42It's really hard to read. Also, I definitely wouldn't call it the Thanksgiving Party Hub. So I wanna make two changes here. And in making those two changes, I wanna go over to one of my favorite other tools, which is mid-journey. So I don't love this stock photo at the top of leaves and a plate, or maybe it's not a stock photo, maybe it's an AI generated photo, but I still don't like it. And I want to generate something more fun. And when I am working in mid-journey, 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.

9:28I 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 looking style references and parameter strings that you can use to generate an image in a specific style. And one that I found while researching this episode was this one by Michael Rabone, 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.

10:21And 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 or aesthetic space. And then he's also gone on and added a couple other parameters like aspect ratio, stylize parameter, 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.

11:04And so I got this, I think, really, really adorable image of like wheat in a vase and pumpkins and fruits. And it just feels exactly like I wanted for my website and my image, but it's a square. And if we go back to my image, I really need this long, this long thing. And 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 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 parameter in here.

11:49So I'm going to 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 going to use the exact same prompt because I thought it generated a really good result. And I'm going to go ahead and submit that. MidJourney 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 MidJourney to generate images for specific instances is you can really tune the metadata and the parameters of the image to make it fit for your design.

12:35Now looking at, oh my gosh, this is totally giving me California Thanksgiving vibes, which is like a pumpkin and the ocean and this beautiful, looks a little Tuscan, little Tuscan Hill. And I really love this. I think it's super cute. So I'm going to save this image and I want to replace my header image on this Thanksgiving party hub with this image so i'm going to say okay the header needs to be improved here is the image i want for the background round i also want the title of the page to be claire's thanksgiving feast and all the copy to be more personalized around Claire hosting Thanksgiving at home.

13:38And then I'm going to drag that image over and we're going to see if it takes it in and updates the image. So I've uploaded that photo generated by Midjourney. It should be nice and wide for this and I'm going to submit it and have it update that header. And again, these are just a couple really simple tips and tricks that are going to get you from what feels like a little bit like vibe coding slop to something much more beautiful, something much more well-designed, something that really feels like, you know, artisanally crafted farm to table software, which is what we want all of our vibe coding apps to look like.

14:16So 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 iterate on 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 already so much better than what we had before.

14:57It's 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 and take a screenshot, which is another trick I really like, and take a screenshot and say the headline text is being clipped. So we're going to type that in. Text is being clipped. Please fix. Also replace the star above the headline text with a pumpkin, pumpkin, not a bumpkin, a pumpkin, and leaf emojis, pumpkin and leaf emojis. Now I can't, 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.

15:54So this little how I AI 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. So it's going to fix the text clipping and replace the icon with pumpkin and leaf emoji. Oh look at that it's a little 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. And what I like about this is I I thought the pumpkin would be really cute. I forgot that the pumpkin emoji is by default a jack-o'-lantern.

16:35We are past Halloween now. If you haven't missed it, go back to our How I AI episode on a Halloween fortune teller app that was generated. But, you know, this is a little silly. So I am going to go to what files were changed. And I am actually just going to get rid of this. little pumpkin. 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, 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.

17:23But 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 uh headline header nav I think it's just a 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 snap bar is a bit broken please fix I feel like the buttons are just like a little light. So I'm going to ask them to make the buttons just a little bit darker. And I'm going to submit that.

17:57Hopefully that fix goes through. And we've gone from a pretty boring first design, which we can flash up to a really beautiful, fully customized party hub with a bunch of features in here that we're going to expand on. And look at that. 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 for now, I think it looks really cute.

18:48Again, we have a guest list, a dish coordinator, recipe collection, and photo gallery. 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 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 okay we'll come back to design later I don't know why I'm saying this I just feel like I'm being plight.

19:33Let's add dietary preferences restrictions to the guest list. Let's start with a multi-select 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, it 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:23Instead 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. So we got gluten-free, dairy-free. Perfect. And then my mother-in-law is vegan. So we got vegan and then no restrictions as an option, which is great.

21:03And the last thing I might ask it to do is take these restrictions and add tags to the dishes so people can call out common allergens in their dish or ingredients this list might care about. 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. To add that in, kind of think about the interplay between a preference, which would be something like dairy-free and an ingredient saying this contains dairy.

21:59so it's 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 so it's going to add these allergen tags to the dish manager it's probably going to take a second 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 exact answer we needed, which is let's just map it one-to-one to the dietary information.

22:39If it's dairy-free, market dairy-free. If it's vegan, market vegan. If it's gluten-free, market gluten-free. 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 what 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.

23:29But again, we're not going to show that. This is to really inspire you to take something a little bit further. 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 kids. 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:12They 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, et cetera, et cetera. And then the recipe will say, mix the flour and the chocolate chips. This is a terrible cookie recipe, but just go with me. And if you have kids, 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?

24:52Because the measurements 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 that you can actually follow with your kids. So I'm going to show you all Claire's favorite Thanksgiving recipe. It is this polenta and sausage stuffing. It's made of polenta, so it's corn. It's gluten-free. You put sausage in it. You blend half of it. It's like chunky, creamy, crispy on the top. It is so delicious. It's my favorite thing to make. And I love having my kids help me make it. But again, you can see this recipe has the exact problem we talked about.

25:37It's got all these ingredients and numbers up top. But then when you're talking about exactly how to cook it, 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 recipe. You could also give ChatGPT the link. I'm going to use 5-1, which came out last week. Like 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 cute energy. Not so many bullet points, which I love. It's a little too cute sometimes. So I've noticed sometimes it brings sort of a sassy attitude.

26:31You 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 problem to 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 auto or instant where it's like thinking right or it's not doing thinking or it's thinking very fast 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.

27:09But right now we're just going to do auto. 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 here is a recipe. Please format it into a different structure. And then I'm actually going to go back to my app and remind myself of what I need. I need a title, description, prep time, servings, ingredients, and instructions, but I want the instructions to follow a specific format. So I'm going to say title, description, cook time, ingredients, servings, and instructions. For instructions, I want them clearly in steps, step one, step two, etc.

28:04And I want to make sure both the ingredients and the measurements are in line so I do not have to go back and reference the ingredients list. 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 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 kind of evolve over time if you really wanted to spend a lot of serious time on recipe generation or improving things.

28:59And 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 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 it thinks longer it is a little 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 i'm going to see if i can try this again in a faster model.

29:39So 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 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, this is what we need. Bring six cups of water and two tea puns salt to boil. Not water and salt, the exact amount. Bring in two cups of polenta.

30:17So again, this is just such a nice flow for reorganizing information for your brain 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 a online website recipe. You could pull out your recipe book, take a picture of the recipe, kind of like snap the few pages, upload those to chat GPT, really reorder this. And what I'm going to do is I'm actually just going to add this over to our app. So I'm going to go side by side. 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 thanksgiving app and your own thanksgiving meal so let's see how easy this is to pull over I'm gonna put my title it gave me a nice description prep time is about an hour servings 8 to 10 ingredients here it goes look at this lovely thing 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 these to get a little bit better and I can take this and share this with friends.