Web app + Mobile + Stripe + Pitch Deck: one Replit project!

Transcript

, Hi everybody, Julien here. In this video, we're going to keep building cool things with Replit. And I've done two Replit videos before, one on design mode for web apps and one on building a mobile app. So this time we're going going to try and be a little more ambitious. I'm going to build four things in a single session. First, I'm going going to build a web app and I'm going build my personal cookbook with a weekly meal planner. Second, we're Third, we're going to add a Stripe checkout, because if this was a real app, I would want people to pay for the pro tier. And fourth, we're gonna build a pitch deck, because if I wanted a brand maybe to sponsor this, I would need one. Okay, so one project, four outputs, and let's see where this leads us. Let's get started. So here we are in Replit, and this is my initial prompt. This is my first prompt. A website. I won't go into plan mode. I think this is fairly straightforward, so we can just go and launch this. Okay. After a couple of minutes, this is what we get, and well, it looks already very nice. So this is the home page with the pictures, and we have Entrez. And they say makes me hungry already okay some of the pictures don't really match the the recipes but that's okay I didn't give specific guidelines and at this point we're only looking for design options so we have that let's maybe click on one to see what the recipe page looks like so we have the hero image we have the description preparation time ingredients and of course the recipe itself okay not too bad and we have the meal planner oh drag and drop does that already work wow okay nice maybe let's try to improve the layout a little bit I think all those cards look a little bit similar same size etc so let me try another prompt here. So let's try this. The recipe cards look too uniform, every card the same size, make the library feel more like a print magazine. Okay, so varying the card size, spreading out the photos maybe a little more, and yeah, trying to make it look a little fancier. Okay, let's give this one a shot. All right, this was super fast, just took a couple of minutes to implement my changes, and so now I have and trying to make it look a little fancier. Okay, let's give this one a shot. All right, this was super fast. Just took a couple of minutes to implement my changes. And so now I have this nice grid layout. I've got titles overlaid on the images, which is nicer, I think. And this looks more like a nice display. We have small images, large images, which will allow us to highlight a particular recipe, etc. I mean, it's just more pleasant. Okay, let's try and add maybe a search, okay, because over time we'll have a ton of recipes. So let me get that prompt and we're going to add search to this. So that's a simple prompt. Add a search bar at the top. We want to search by ingredient, category, time available. Well chocolat okay that works nice what else do we have okay poulet chicken all right nice so this seems to work I like the fact that we have this uh partial completion here that's nice didn't ask for that okay so that's back and that's convenient and then we can filter on how long it takes to prepare under 30 minutes under 45 under an hour good um well let's deploy this and see what it looks like as a real web app all right the app is deployed and let's take a look at this thing reload the page Okay, so that's a real web app. Easiest deployment ever. Okay, now how about we build a mobile app as a companion to this? Let's go. Here's how we do this. Add a mobile companion app to the same project using Expo and React Native, which is what we saw in the previous video. We want to reuse the same recipes, and then we have a few guidelines. Okay, we want to see today's recipe. Shopping list, want to see the timer. Okay, just basically a subset as we're trying to cook that recipe in the kitchen. Okay, let's go with this. This took a little longer, about 10, 11 minutes. And now I can actually preview the mobile app here. So we have the planner. This took a little longer, about 10-11 minutes and now I can actually preview the mobile app here. So we have the planner and these match the of course the recipes I have here. So lundi is Blanquette de Vaux, mardi is Soup à l'Oignon and if I check here Yep, that's what I have. Okay. And for each day I've got my ingredients, I've got the recipe itself, and then I have the shopping list for the week, which I suppose includes all the ingredients for everything I selected. And then I can set a timer if I want. WI-E-R-E-E-Y-E-T-E-I-E. I'm going to use Stripe integration. Add a subscription tier, 5 euros a month. This gets you unlimited recipes, AI-generated meal plan, maybe wine pairing, why not? So wire that up into the sandbox for Stripe checkout, add a button, etc., etc. And while it's doing that, I'm going also ask for slides. I can easily create a new agent here and just say, okay, build me a six-slide pitch deck. Let's go and build this on top. OK. So now we have two things running. We have the Stripe connector and the slides. OK. Let's give it a few minutes and then we should get both at the end. See what that looks like. So Stripe integration is complete. This took about 20 minutes. It just prompted me to create the Stripe sandbox, but that's about it. And now we have an upgrade button. So that's pretty nice. Let's go and click on this. Okay so it wants to open in a new tab which is fine. Probably Stripe security there. Let's see what that looks like. Okay so let's click on upgrade, go. I've got my details this is a bogus card let's click on pay okay payment is successful and now okay I have a pro subscription and if I look at my my Stripe test page, I see the payment. Wow, okay. Yeah, one subscriber. So this did work. Amazing stuff. Yeah, I can see my subscription has succeeded. That's the one, five euros with the 4242 credit card. Wow, Stripe integration done. Wow, I'm shocked. If I go to a recipe, well, I see this new section here. This isn't wired yet, but this is where we would add that. And if I go to the meal planner, okay, I can use IAI as well here to automatically suggest recipes for the week. Again, this isn't wired in, but this 40 minutes maybe I was able to build a web app with just a few prompts a companion mobile app with literally a single prompt a slide deck that looks really really nice and you can see we can now download this as a powerpoint for tweaking maybe or a pdf and I added stripe a working stripe integration in literally one prompt which is a little bit mind-boggling and you saw ...the actual transaction listed in the sandbox. So this is great because I can do all my work in the same place with the same context in parallel. I don't need to explain again and again to different tools that I want to slide like this or on this particular coding task like that. Maybe a year ago I would have used three, four tools to do this and now I can only use Replit which is really great. So that's it for this video. Enjoyed it and well it is lunchtime now so I'm actually gonna go and cook something and until next time my friends you know what to do keep rocking