"Farm to table software": How I built a Thanksgiving party hub using Lovable

[upbeat music] 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, 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 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. AI 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, 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 upmarket 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 uplevel 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, maybe 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, um, Lovable to give me a Thanksgiving party hub for managing invites, dishes shared, recipes, and photos. So if you are responsible for hosting a big holiday meal at your house, you know that you gotta do a couple things. You gotta figure out who's coming and honestly, what they can eat at this point. You usually do something potluck, so you wanna coordinate the dishes across your guests. Um, I have a tip on recipes I really wanna 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, um, 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, dish coordination, recipe sharing, photo gallery, and a warm, inviting autumn aesthetic. Now, I don't think this is that great. So one of the highlights of today's episode is gonna be showing you a couple tips and tricks that I might use to really uplevel the design of a vibe coding or prototyping project that I might do. And I'm gonna do this a little aside of what you might use in a company, which is bring your own design system to something. This is gonna 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, et cetera, that you might not think of that would help you make your web designs or your application designs better? So just looking at this, we don't love it. It's not the prettiest. Um, it's got a [chuckles] pretty, pretty boring stock photo in the background. You can't really read it. Um, 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 uplevel 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, et cetera, 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 upleveled typography into my apps is Google Google Font combinations. This 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, um, 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 gonna go with 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, and we go back to Lovable and say, "Okay, let's uplevel 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 uplevel the CSS and the typography for this design, um, using those two fonts that we identified. So I'm excited to see what it comes up with. Ah! So cute. Now, not as readable, but, you know what? 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 API's 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, um, the Tailwind config, and it's updated... I think if I find headlines. Yep, headlines are gonna 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 Tailwind, which is very popular right now with, um, 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 g- 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. It'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 Midjourney. So I don't love this stock photo at the top of 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 wanna generate something more fun. And 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. 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 Midjourney 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, um, while researching this episode was this one by Michael Rabom, which is this, like, whimsy, textured, storybook paint, kinda 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 or aesthetic space. And then he's also gone on and added, um, a couple other parameters like aspect ratio, stylize parameter, and what version of the Midjourney 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, I copied the, um, 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 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, um, parameter in here. So I'm gonna go ahead and delete that and then go into the settings and actually do a two:one, which is a pretty wide aspect ratio image, but I'm gonna use the exact same prompt 'cause I thought it generated a really good result. And I'm gonna go ahead and submit that. Midjourney has gotten super fast. Um, you can see below I've done a couple other ideas. But you'll see here now that same image style and prompt is gonna 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, um, metadata and the parameters of the image to make it fit for your design. 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, little Tuscan hill, um, and I really love this. I think it's super cute. So I'm gonna save this image-... and I wanna replace my header image on this Thanksgiving party hub with this image. So I'm gonna say, "Okay, the header needs to be improved. Here is the image I want for the background. Around, 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." And then I'm gonna drag that image over, and we're gonna 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 gonna submit it and have it update that header. And again, these are just a couple really simple tips and tricks that are gonna 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. So it's gonna take that image, it's gonna personalize everything for ther- 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," um, 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, um, than what we had before. It's so pretty. It's feels much more cozy. [chuckles] It feels like honestly, just well, much better designed. But we have this image problem here that the text is clipped, and so I'm gonna go ahead and take a screenshot, which is another trick I really like, um, and take a screenshot and say, "The headline text is being clipped." So we're gonna type that in: "Text is being clipped, please fix. Also, replace the star above the headline text with a 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, [chuckles] you can misspell things, you can have really beautiful nails, and it will not matter. So this little How I AI, uh, tip for the ladies out there, and I realize I'm not on my paid Lovable plan, um, which is on my other profile, but we're just gonna do what we can do right now. So it's gonna fix the text clipping and replace the icon with pumpkin and leaf emo- Ugh, look at that! It's a little, [chuckles] it's a little Halloweeny, so we might remove that pumpkin. Um, but hopefully, it'll fix the text clipping, um, on the image and add proper spacing, which is what we want. And what I like about this is I thought the pumpkin would be really cute. I forgot that the pumpkin emoji, um, is by default, a jack-o-lantern. We 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. Um, but, you know, this is a little silly, so I am going to, um, w- go to what files were changed, and I am actually just going to get rid of this little pumpkin, and then I'm gonna 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 wanna work, and honestly, [lips smack] we're just gonna let it, let it be. So we're gonna go back to latest. We're gonna 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 [chuckles] vibe coding is not perfect, and I don't wanna spend time today on optimizing this headline height. Okay, we're gonna ignore that header for right now, but the last thing I do wanna fix is this, uh, headline header nav. I think it's just a little funky looking, and so again, I'm gonna just go in here. I took a screenshot of it. I'm gonna say, "The spacing at the bottom of this nav bar is a bit broken. Please fix." And then I feel like the buttons are just, like, a little light, so I'm gonna ask them to make the buttons just a little bit darker, and I'm gonna submit that. Hopefully, that fix goes through, and we've gone from a pretty boring first design, which we can flash up, to a really beautiful, c- fully customized party hub with a bunch of features in here that we're gonna expand on. And look at that, it didn't fix it at all. [chuckles] 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. Again, 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 all 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 gonna ask one more thing functionality-wise. I'm gonna 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 polite. Um, let'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 gonna 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? 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 pe- I want Lovable to come up with a list for me. So if I go to guest list, um, 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, um, my mother-in-law is vegan, so we got vegen- vegan and then no restrictions as an option, which is great. And 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, in their dish or, um, 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 gonna be a lot smarter than I would be in the thirty 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," so 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 gonna add these allergen tags to the dish manager. It's probably gonna 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. If it's dairy-free, mark it dairy-free. If it's vegan, mark it vegan. If it's gluten-free, mark it 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, um, here in the list, and so we can now start to see what kind of dishes are coming, who can eat them [chuckles] , will they meet our guests' 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, at Thanksgiving this year? But again, we're not gonna 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 gonna 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. They typically have a list-- Well, let's talk about like the, 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? Because 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 gonna 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. Um, 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. Um, and I love having my kids help me make it, but again, you can see this recipe 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, the, the, the, um, 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 gonna 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 cute energy, not so many bullet points, which I love. It's a little too cute sometimes [chuckles] ., So I've noticed sometimes it brings sort of a 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. 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, um, 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. But right now, we're just gonna 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 gonna say, "Here is a recipe. Please format it into a different structure," and then I'm actually gonna 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 gonna say, "Title, description, cook time, ingredients, servings, and instructions. For instructions, I want them clearly in steps. Step one, step two," et cetera, and 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 left. Ingredients list. Okay, so I pasted that recipe in. I gave a very specific format that I want it 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 OpenAI call to auto-translate and update these ingredients. So again, you can 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. And again, this is just, like, quality of life that I think is so fabulous. So let-- it, it's decided it needs to think a little bit. We have the blinking dot, 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 and is a little bit, maybe a lot bit, slower than 5. So again, think about your use case. I kind of feel like this is frozen. It's stressing me out, so I'm gonna go ahead and stop. I'm gonna 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 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 teaspoons salt to boil." Not water and salt, the exact amounts. "Bring in two cups of polenta." So 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, um, 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 ChatGPT, really reorder, reorder this. And what I'm gonna do is I'm actually just going to a- add this over in our app. So I'm gonna 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 [chuckles] 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, eight to ten. 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 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, and my kid can follow the instructions directly. I do have to promote one thing, not a paid sponsor, but, um, my [chuckles] kid, actually two years ago, and I made this website, Runaway Pancakes. It is easy recipes for their kid and adult helper, helpers. We basically productized this flow, and we put a bunch of kid-friendly recipes up here, including his favorites. So if you're looking for step-by-step, very kid-friendly recipes and instructions with pretty creepy but high-quality Midjourney-generated images, no, we did not actually cook this salmon, then you can go to runawaypancakes.com, and, uh, we also have some [chuckles] great coloring pages. So please let me know if you want me to add any of your favorite recipes to that site. 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 upleveling the design of your sites using things like free Google Fonts and Midjourney style references. 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 after- 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. I am so thankful for all of our viewers and listeners. In case you missed it, we have just recently hit fifty thousand subscribers on YouTube in just our first six months. This has been such a fun journey, and I am looking forward to more holiday, ending in AI, How I AI episodes where I can share more tips and tricks like this for you. Thanks, everyone! [upbeat music] 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. 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 howiai pod.com. See you next time.