New Years Resolution Bingo Generator

Speaker 0: Alright, viewers. Welcome to, yet another episode of 100 app, 100 I don't know. No. No. No.

One app in ten minutes. Right? We are doing the remix version today where we have ten minutes to build and plan plan and build an amazing app clone, crazy suggestion, and I have no idea what we're gonna do. So the rules. Right?

Ten minutes to plan and build. No more, no less. How we're gonna do that? We are going to use some, amazing tools that we have built into Directus. And then, rule number two, the anti rule.

Use whatever you've got at your disposal. Today, I've got two awesome dudes at my disposal, mister Alvaro and Mark from our team here at Directus. No strangers to the VUE community. Welcome to the show, gents.

Speaker 1: Thanks for having us, Bryant.

Speaker 2: Thank you very much for the nice intro. Happy, to be here.

Speaker 0: Yeah. Yeah. No. I'm super excited. Have you guys given any thought to what we're what we're gonna build?

Speaker 2: I think Mark has some idea though.

Speaker 1: Yeah. So yesterday, we talked a little bit. I talked with Ava what we could build. And, I don't know if if I showed it to you, Brian, but on my website, I have a, instead of new year for solutions, I have new year's bingo cards. So you have five by five grid of stuff I want to do in the year.

And if I get at least one in a row, so diagonal or horizontal or vertical, I already have bingo and it's a success. So I don't have to do all of them. And if you go to mark.dev/bingo

Speaker 0: Okay. Let's check it out, guys.

Speaker 1: You can it's still since it's just well, now February, not a lot has happened there. But

Speaker 2: But it's a it's a really nice way to actually do some of the New Year's resolution. I always get the press at the end of the year like I have done, like, a quarter of them.

Speaker 0: Yeah. I love it. Alright. So hey. This is neat, man.

I I miss Yep.

Speaker 1: And each of them can be either, like, you did it or you didn't do it or it can be progressive. Like, read six books and you are, like, one books, two books, three books in. And I think I also have, like, subtasks if we can make that work. Like, if one one, let's say, one bingo item has a few sub items as well. Like, don't have an example now, but that would also

Speaker 0: be cool. Gotcha. Okay. New Year's resolution. Bingo card generator.

Alright. That's what we're doing. This is gonna be amazing. This should be fun. What color are you guys feeling?

Purple, pink?

Speaker 2: I go I go purple. Blue. Oh, purple.

Speaker 0: Purple. There we go.

Speaker 1: Direct is purple. Nice.

Speaker 0: Direct is purple. Alright, guys. Alright. So I'm sure you've seen the show. We're gonna start the clock.

We got ten minutes to plan and build this thing. Let's do it. Alright. So, the first thing I usually do here is cover requirements. Right?

So what are the requirements we need out of this? Right? We need to generate bingo cards. Like, what do you what were you calling those?

Speaker 1: Like, items probably or

Speaker 0: Okay.

Speaker 1: Goals. Yeah.

Speaker 2: Items. Yeah. Like a grid of of items.

Speaker 1: Mhmm. Yeah.

Speaker 0: Alright. So we got some goals. Those are what kinda fields are you tracking on those? Just the name of the goal?

Speaker 1: Yeah. A name description and then the status.

Speaker 0: Status of the goal. Progress. Progress. Is it are you status and progress interchangeable?

Speaker 1: Yeah. I guess if you like the if the progress is under percent, the status

Speaker 0: Okay. Yeah. Yeah. Yeah. Got it.

Okay. And then we've got we've got goals. You've got what? Items underneath the goals? What do you do?

We want, like, subtasks, like, if it's

Speaker 1: You you can have subtasks. Let's see if there's one that has subtasks. I don't remember.

Speaker 0: Tasks. It's called test. Alright. So the tasks would

Speaker 1: play into into progress as well. I guess.

Speaker 0: Into goal. And then the task completed increases progress. Cool. Alright. And task needs what?

Name? Description? No. Just name? Date date probably.

Speaker 1: Maybe the, the item can have a a completed ad. Yeah. They've completed as well for the task for the, item on top. Yeah.

Speaker 0: Alright. And then we we wanna try to get a front end set up for this as well. Yeah. Alright. And we need a front end to display the bingo cards.

Alright. This could be a stretch in seven minutes now. Let's see how we do. Alright. So what are we using today?

Right? We've got a blank directus project. We've got Claude Code over here. Let's dive into it. Alright?

I'm going to I'm not sure what you guys have been coding with. I've been using Super Whisper. I dig it. Hi. How are you doing?

Alright, guys. We are building a New Year's resolution bingo card generator. I'm gonna copy and paste the data model that we want. You have access to a direct assistance. I want you to create our schema for that.

We're also going to be building a front end to display the bingo cards. Let me know what questions you have. Let's create a plan. Alright. So this is crunching the transcript for that right now.

Cool. There we go. I'll just, copy and paste this. Hopefully, we'll get some something good out of it. And we're gonna ask Claude Code to plan.

Alright. So now we've got the schema. So we've got the direct us MCP connected to this thing. And I I think you guys have had a chance to try this out already. Right?

Speaker 1: Yeah. I think Avro has. I haven't.

Speaker 2: Yeah. Play with it in the morning. It's gonna create the collections, the schemas for you.

Speaker 0: Yeah. Alright. So it's got a fresh direction. No custom collections. Alright.

And I can zoom in just a little bit more so we could see this. What is the plan? And this is probably one of my favorite parts about this thing where it will prompt you for questions. Direct us flow, that's what we wanna do there. Vanilla JS.

Yeah. That's what we'll do. What do you guys think? Five by five grid? Four by four?

Speaker 1: We we can do also four by four so we don't have to come up with 25 things.

Speaker 0: Amazing. Right? We got five minutes left.

Speaker 2: You you can say to the MCP, hey, cloud, get, your twenty twenty six, bingo.

Speaker 1: Oh, that was cool.

Speaker 0: Yeah. Yeah. Alright. Public read, that's fine. Anyone can view those.

Cool. Alright. And now, hopefully, this thing should have a plan.

Speaker 2: I wonder which resolutions Cloud Code could have.

Speaker 0: I don't know. Let's see. We'll we'll spin that up in an in a

Speaker 1: new find out.

Speaker 0: Alright. Cool. Right? Here's the direct to schema. There's our it's gonna create a flow.

It's gonna create the front end. Sounds good. Let's let's roll with it. Right? I don't know what we're actually doing other than just talking this through here, but, I'm curious to see just how this thing works.

I've you know, of course, like, spent a ton of time testing and building the MCP, but I've not spent a ton of time using it with, the latest Opus four five model. Alright. So it is checked the existing schema. Now we are it should start implementing. Yes.

Please just start jamming on here. And if I refresh, now we should see some collections start to come in to the direct instance. We should see some collections. Start to come into the direct assistance. There we go.

Okay. Alright. Oh, nice. I was just worried that I did something wrong. So we got our goals.

We got our tasks. Amazing. Right? Now I could go in. We could potentially create some new ones if we need.

One of the things that I like about this is it, like it seems like the anthropic models do a better job of, like, actually putting together a cohesive form than than, like, the OpenAI wants. So it's going through creating relations and fields. Alright, guys. So in this other one, create, some New Year's resolutions for yourself, Claude. Alright.

You guys have any more guidance for this thing?

Speaker 1: They should follow this the smart principle, probably.

Speaker 0: Follow the smart principle. What's the smart principle?

Speaker 1: Now you got me. So it's like measurable, achievable.

Speaker 0: I know what you're talking about now. Yeah. The smart goals. Yeah. Yeah.

And include the add them to the goals and tasks inside.

Speaker 1: For the for me, the most important one is always measurable. You have to be able to measure what you do. If not, you lose yourself.

Speaker 2: You lose yourself. That's so funny. It's okay.

Speaker 0: That is very poetic. I love it, man. Alright. So it looks like okay. Yeah.

I was just making sure we've got the relationship created correctly there. Alright. It is going to so we got two claws going. We got two minutes here. Let's see.

I can see their goals and tasks.

Speaker 1: Alright.

Speaker 2: This is the next development, man. Right? Resting to

Speaker 0: the next development. Yeah. This thing is going to yeah. I need to enter YOLO mode so we can actually, have this thing not stop to do these calls. But, behind the scenes, right, it is building this progress calculator flow.

And and flows are

Speaker 2: Yeah.

Speaker 0: A a nice piece of functionality. It can be a little time consuming to set up, like, complex flows via the UI. So having direct us put these together, is, yeah, definitely time saving. Right? That's probably, like, five, ten steps there.

Yes. Create those items. Alright. Let's see what we've got. Are we gonna get to the front end for this thing?

I don't know if we are, man. I should've had Bryant. Should've had, Claude do that first. It's connecting the operations. Claude,

Speaker 1: you need

Speaker 0: to go faster, my friend. Alright. So what are the what are the goals that Claude set for itself? This should be interesting.

Speaker 2: Put that description, Steven.

Speaker 0: I'll reduce average response latency by 20%, Achieve 95% task completion rate without clarification. What an interesting goal. Here's the the individual tasks. And, I'll

Speaker 2: And that was the end there. The front end.

Speaker 0: Now it's doing it. No. Let me open this test project up. Is it going to have enough time? Yes.

Proceed. New Year's resolution. Bingo. Oh, no. We ran out of time.

So close. MCP connection should have access. No need to set up. I think, you know, this was so close, guys. I'm just going to it's against the rules, but you know what?

We can make up our own rules here. I am just going to give access here to see and see if this will actually finish. Of course. There it is, man. The API permissions got us.

We could see the bingo card here. There's the individual tasks. Ten minutes, full working back end with permissions, so close to a working front end. It did

Speaker 1: pretty cool.

Speaker 0: This is this is very cool. Right?

Speaker 2: Even even with the subtask because that that wasn't an extra thing. Like, now it's the only iteration. Like, put the progress in the front end and

Speaker 0: Yeah. I'm very curious to see. Right? It's already got, it looks like it maybe did it miss some of the flows? Right?

So the thing to take away here is obviously, like, you could build incredibly quickly with Directus and MCP, and this is not loading, probably because of my computer. Just hates running all these Docker containers locally. What is going on?

Speaker 2: How many do you have?

Speaker 0: There's probably, like, five or 10 running at the moment, like, different instances. And I'm sure if I, like, killed the camera, it would probably stop doing this. I don't I don't know what's going on here. Local host, 8055. I at least wanna end this episode on a high note and show something.

Come on.

Speaker 1: Are you you're, are you running open claw? That's

Speaker 0: I'm not yet. No. No. Not yet. I did test that thing out.

It's, it's definitely an interesting one. I'm not sure that it is, it's not all there yet. Alright. It it's my testing was, like, most things you're gonna have to oh, great. Now I'm locked out of the actual instance as well.

Hey. What is going on? Local host. 8055. Yeah.

My open claw testing was basically, is it you're just gonna have to invest a lot of time into it to get something amazing out of it.

Speaker 2: You you saw it. Right? Yeah.

Speaker 0: Yeah. Alright. So we can see the flows. Did they yeah. It actually connected the flow.

So I'm just curious. Right. Just wanting to see. Right? Build a mastering five new programming frameworks.

Let's say we completed this right now. Does this flow actually work? And So it it it

Speaker 2: could increase the progress of the task of the goal.

Speaker 0: It should. And, of course, doing a hard refresh here is not not a great idea. Alright. Well, gents, you know, I'm not sure whether to put a, like, a thumbs up stamp on this one. Thumbs up stamp.

We can just do I think. Yeah. This was, I think we got most of the functionality

Speaker 2: there. Good at dive.

Speaker 0: We just didn't get, the front end all the way there.

Speaker 1: Oh, Brian, you are lagging quite.

Speaker 0: Of course, it did.

Speaker 1: Is it done? I think you you get a a thumbs up, Brian, because it we got a working thing at the end, and you had the the grid showing everything with the progress. So I think you get a thumbs up.

Speaker 0: Yeah. Alright, guys. My computer is struggling, so we are going to sign off for this episode. Mark Alvaro, I've heard a little rumor that there might be a podcast coming up, so I'm super excited for that. Thanks for joining me for this episode of one app in ten minutes.