Building in 10 Minutes or Less: Menu App

Speaker 0: Alright. Welcome back to an extra special episode of one app in ten minutes. I'm your host, Brian Gillespie, for Directus. Today, I honestly like, I I hope I'm not gonna get fired here, but, we are going to be building a mystery app with our CTO here at Directus, Reich Van Zanten. And I call this mystery app, and I say, hey.

I hope I don't get fired in that, I've invited Reich to a call, but he has no idea he's gonna be on the show. And I call it mystery app because I have no idea what idea he's gonna throw out there or if it's even possible. Previously, the show was called 100 apps, hundred hours for this season or this spin off here. It is one app in ten minutes. The rules are we have ten minutes to plan and build an app.

No more, no less. In this case, we're gonna be using what we do have at our disposal, which is Directus, claw.ai, and, Directus MCP connected. Welcome to one app ten minutes, Rick.

Speaker 1: One app ten minutes.

Speaker 0: For the audience, we are recording live. Did you have any idea that you're gonna be on this show today?

Speaker 1: I had no clue. But here we

Speaker 0: are. Amazing. Amazing. Alright. So I think you're already aware of 100 apps, hundred hours, one app, ten minutes, shortened time frame, leveraging AI.

I've got mystery app here with Wrike. The world wants to know what what app are we gonna build today?

Speaker 1: In ten minutes?

Speaker 0: In ten minutes.

Speaker 1: Oh, boy. Well, I could spend ten minutes thinking about an app, but that's not what I wanna do.

Speaker 0: The most incredible cold opened ever, ladies and gentlemen. What a what a do you thought you were coming into, an afternoon meeting? Amazing.

Speaker 1: Oh, one of many. One of many. Oh, this is I'm woefully ill prepared for this. Okay. We have ten minutes.

Well, the time hasn't started yet,

Speaker 0: has it? No. No. No. You got we gotta decide the app, then we got ten minutes to plan and build the thing, which is it is very ambitious in and of itself.

Speaker 1: Yeah. I will say. Okay. Ten minutes. That makes it so much trickier.

I was gonna say, I was recently working oh, maybe we can do a part of that. I was gonna say, I was recently working on sort of, like, a quizzing app.

Speaker 0: A quizzing app. Okay.

Speaker 1: Nights and weekends for, you know, getting, sending people a link. You could sign in. You can you can do a little quiz, and then we could check out the leaderboard. That is not a ten minute I don't ever at all. I'll tell you that.

Oh. But maybe it is. Let's see here. Okay.

Speaker 0: No pressure.

Speaker 1: None whatsoever.

Speaker 0: To give you context, we've already done a lot of the former 100 apps, hundred hours. So Expensify clone, Airbnb, Netflix. Like, already done all these things. Multi site CMS. All the all the expected fruit is is already picked off the tree.

Speaker 1: You're not making it any easier. Wait. If this is a if if we're gonna be using AI to build this stuff, why don't we use AI to come up with what we're building in the first place?

Speaker 0: Alright. Alright. Alright. I've got

Speaker 1: I've got ten minutes.

Speaker 0: Rike Van Zanten, our CTO, on an episode of one app, ten minutes. What should we build? Bum bum bum. I'm Curious to see if it calls the actual direct SMTP here, but I I don't think so. Real time dashboard builder.

Oh, it it knows you. You're a known quantity. Clearly. Schema visualizer, webhook, ecommerce, headless ecommerce, QR code menu generator, team mood tracker, meeting room optimizer.

Speaker 1: I think the QR menu one is actually not too bad of an idea. Right?

Speaker 0: Because this is a restaurant.

Speaker 1: Thing or you're going in, you're sitting down at the table, you have to scan a little QR code, you pull up a menu on your phone. So very remote. Where does this menu come from? Where does it go? Could be something.

Speaker 0: Alright. Restaurant menu. QR code is doing everything.

Speaker 1: Ten minutes where I create a new startup on the fly.

Speaker 0: Restaurant menu, QR code, generator thingy. There we go. Alright. We're ready? We're starting the clock.

What do we need out of this thing? Obviously Well,

Speaker 1: we need menus. We need things on the menu. So we need menu items. We need ideally some sort of, like, allergy information for every menu item. So that is, like, ingredients maybe, or, like, allergy information, or components.

Like, sometimes on menus, you see, you know, the menu item and then individual parts of what's in it. Right? Yep. So yesterday night, at least four times of what is in the Negroni. Just kidding.

What else do we need? We need well, we're gonna be generating a QR code for every menu, I guess, because we're rendering out each menu on a separate page. So that makes sense.

Speaker 0: That QR code?

Speaker 1: Oh, we need a a sort of category for the menu item. Like, is it an entree, or is it an appetizer, or is it a dessert? And then on the menu itself, we probably need a similar thing for, is it a lunch menu, or a dinner menu, or some special event? You know, this is like a Christmas day, menu or something.

Speaker 0: So what would that be?

Speaker 1: I was already thinking Yeah. Type a menu. Yeah. Holiday special.

Speaker 0: Holiday. Alright. Now, I've already set the audience up for this, but what we've got already is I've got a blank direct to sentence. We've got the Claude AI connected via the direct to MCP, and let's build the menu system. So I'm just gonna dump this in here.

Again, we're on the clock. So, you know, we're just gonna oh, gosh. Okay. That's

Speaker 1: Oh, no.

Speaker 0: That's not even formatted properly. Okay. Allergy category for the menu. Flow for during QR code. Alright.

This is the magic moment. Can you one shot a brand new startup in seven minutes and fifty five seconds? We'll see.

Speaker 1: Well, in no context either. I mean, you're just you're giving it nothing. You're truly giving it nothing.

Speaker 0: Absolutely nothing. Right? So the Directed MCP, we've got a bunch of tools that are preprogrammed into this thing. And you'll see, like, the system prompt here, which is basically just some information about, how the assistant should act. Then we have a tool that allows it to introspect the direct to schema or or not even introspect, just see the direct to schema.

And here it's already gone to work. So I'm just gonna hit refresh over here on the left. And by the power of AI combined, we now have some stuff. So we can start creating a new menu. This is, Reich's special lunch menu.

And is this, is this something that we would expect to see? I mean, how would you grade this? So we got the type of lunch. That's pretty solid. Is this active?

There's the QR code for the menu. Uh-oh. Doesn't like that, does it?

Speaker 1: Is it still create? Yeah.

Speaker 0: It is still adding our relationships. So maybe that's where

Speaker 1: I would I would do it a second until it's done, frankly.

Speaker 0: Trying to get ahead of ourselves.

Speaker 1: Because we only have so we only have so many seconds. But

Speaker 0: There we go. Alright. So one thing that that I really like about this is just seeing, like, the volume of work that I would have to to do myself. Now it like, it's not that much work to spin up a back end with Directus. And the the visual, like, drag and drop the data model part of it is beautiful.

But when you're watching a machine do all of this work for you, man, that's it's even better.

Speaker 1: And, man, what can I say? What what is better than doing work is just not doing work.

Speaker 0: Not doing any work. Alright. So we're gonna call this, like, special lunch menu. Now let's see if this actually works this time around. There we go.

Alright. So we've got a menu. Looks like it's already added some menu items. How do you feel

Speaker 1: about be seeing eating jumbo shrimp for lunch or Atlantic salmon for that, man.

Speaker 0: Alright. We've got our ingredients. Looks like we've got an allergens. Okay. We got a preset there.

And then we got our categories for appetizers, mains, desserts, beverages. What is this thing doing? Okay. It's

Speaker 1: looking like I think it's building the front end for it now too.

Speaker 0: Wow. It's actually building the front end. I didn't even ask that. But let's just let's check on the the flow progress. Right?

We got five minutes left, which is, actually, I'm I'm surprised we're even here at this point.

Speaker 1: But I'll say stop the clock because I'm seeing a menu on the screen right now.

Speaker 0: Right. Is it is it actually calling Directus too? Oh, no. Of course. Yeah.

Yeah.

Speaker 1: Yeah. Okay. It's just gonna send that be too good to be true. Yeah.

Speaker 0: Yeah.

Speaker 1: Alright. So let's talk easy enough to do, though. This is one SDK call and you're in in business.

Speaker 0: Yeah. So let's toggle this and see. Generate QR code for the menu. Okay. So we've generated the QR code.

Looks like it might have missed a few steps. We generated a QR code. Is this even valid? What is the QR server?

Speaker 1: I don't think I've ever seen this. Is that a thing? QR is a dummy. I think that's just a dummy, isn't it?

Speaker 0: Yeah. Yeah. QR code, API. Can we get something really quickly? Yeah.

Let's see here

Speaker 1: another thing. We can oh, yeah. Maybe.

Speaker 0: We're just gonna straight up vibe code. Gotta go back. Gotta go back. Gotta go back. Fix the flow to import the generated.

Speaker 1: Oh, yeah. Stop making typos, Brian. We're on the clock. Come on.

Speaker 0: The QR code generated QR code. Here's the service. What's the endpoint? What's the endpoint?

Speaker 1: I can find it. I'm sure I can do it.

Speaker 0: This is so much more fun with a partner.

Speaker 1: Brian, let's go. Let's go. Let's go. Let's go. Come on.

Come on.

Speaker 0: Files. Come on. Import. Files import.

Speaker 1: If we do as an import file operation, is that a thing? Is that even exist?

Speaker 0: We do not have that.

Speaker 1: We should.

Speaker 0: Can you

Speaker 1: build that in ten minutes? Same. We could.

Speaker 0: Import file URL. Hit point. Oh, it's still building. Okay. It's reconnecting.

Reconnecting. Alright. So it's doing some some type of work on our behalf here. QR code. Oh, no.

Dun dun dun. Two minutes still. Alright. What do we what do we got here? Okay.

Still not generating the QR code. Okay. Well, I think one thing we can agree on here

Speaker 1: I mean, a QR code, you can easily generate on the client side. There's a bunch of libraries for that kind of stuff. So that that's the least of my concerns, frankly.

Speaker 0: Least of the concerns. Alright. What other concerns do we have here?

Speaker 1: Well, let's just quickly check on the data model. Right? Because we have we have menus, we have items, we have ingredients, we have the allergens on the ingredients. So all this is coming together really, really nicely.

Speaker 0: Shall we, like, look at the API calls? Because, obviously, you're gonna render this on the front end.

Speaker 1: Yeah. Did you give it a, like, public access or is it already?

Speaker 0: I've just logged in. So we can make this let's let's yeah. Maybe showcase that really quickly. Alright. I can make all this publicly accessible just by going to our access policies and adding all these collections.

I need faster fingers. There we go. Alright. We go back. Items, menus, fields.

There we go. We've got our lunch menu. Oh, I forgot to add the the items to the menu. Can we do this? Where's the menu?

Menu. Right? Special lunch menu. Add our existing items. Where we at?

Twenty five seconds.

Speaker 1: Hit save.

Speaker 0: Items, menus, fields. Okay. I don't see the menu items. We need menu items dot asterisk.

Speaker 1: There we go.

Speaker 0: Junction table.

Speaker 1: Items. Double star it. Double star.

Speaker 0: Double star. No. Well, that's it. That's the ten minutes. We have built a menu generating app thingy.

Ten minutes or less. How do we feel about this?

Speaker 1: It's pretty cool. I will say. My favorite is the icons and the colors for the for the collection.

Speaker 0: I so that again, like, this is all AI, you know, there's a lot of hype out there. But one thing that that I appreciate about the MCP that we built here is there's real value to this, in my opinion, of how quick can you prototype, how fast can you iterate on this. In ten minutes or less, completely fresh. No idea. There it is.

Restaurant menu app down. Reich, anything, anything you'd like to add as we we close this episode, this chaotic episode, if you didn't need enough drama and one app in ten minutes bringing in somebody totally unexpectedly. Well, Reich, thank you for joining me for this. You know, again, I think this is a lot of fun, but again, it just goes to show how far and how fast you could get when you combine Directus and AI. That's it, folks.

Make sure you stay tuned for more episodes of one app, ten minutes.