Building in 10 Minutes or Less: TikTok Clone

Speaker 0: Alright. Welcome back to another episode of one app in ten minutes. This is a extra special season or, extra special show. Normally, this is 100 apps, one hundred hours. Today, we're doing everything in ten minutes.

That comes with a lot of hype and A

Speaker 1: lot of pressure.

Speaker 0: This extra special episode. We've got mystery app with Ben. So mystery app on two levels. One, Ben, our CEO, had no idea he was being pulled into this. And two, I've got no idea what he wants to build, but we're gonna see if we could do it in ten minutes.

Ben, welcome to the show.

Speaker 1: Thank you, Brian. I'm very excited to mysteriously be here.

Speaker 0: Yes. Alright. So the name of the game today, ten minutes to plan and build, no more, no less. You might wanna be thinking about what app we're gonna be building now. I'm gonna tell everybody else how we're making this possible.

So I've got a blank instance of Directus set up. I've also got our Directus MCP server connected to Claude AI, and that is the the secret sauce that we're gonna be using today to try and go much faster. So, alright, what do you what do you wanna build today, Ben?

Speaker 1: My my first thought is, like, a content like a like a TikTok.

Speaker 0: TikTok.

Speaker 1: It's just, like, an easy Look at that. TikTok clone. TikTok clone.

Speaker 0: With the owner. This CEO. Alright. 10 on the clock. Alright.

Next up, you know how this goes. I know you've seen the show. We're gonna start the clock. We're gonna talk about what functionality we need, and then we're gonna go. Alright.

Clock is running. Alright, Ben. What do we need out of, a TikTok clone?

Speaker 1: Oof. We need to we need a feed, like a FYP, like a little just getting through getting through the content, getting through the videos. Need to be able to interact with those, so I guess give it a thumbs up. So, like, a little a favorites toggle.

Speaker 0: Like a likes. Mhmm.

Speaker 1: And then comments. I don't know what else is

Speaker 0: Comments and probably like a post. Right? The Yeah.

Speaker 1: I guess the content itself is like a video, the author. So I guess they should all be attached relationally to an author, and then a description, a time stamp, posted time stamp.

Speaker 0: Okay. Alright. Let's let's give this a shot. Right? We're gonna just copy paste this.

We're gonna go to our trusty AI. You know, excited to be able to maybe separate fact and hype here. So, let's build a TikTok clone inside Directus. We want the following functionality. Personalized feeds, posts with likes and comments, and let's just use what?

The direct Us users collection. Yeah. Mhmm. Let's use I was absolutely driving Reich crazy on another episode with typos. So let's use

Speaker 1: Is it apostrophe missing a typo?

Speaker 0: Yeah. There we go. Let's use direct users as the user's collection and reuse off there. Alright. We're gonna hit go, and we're gonna see what happens.

Speaker 1: I can I can vouch for the fact that I had no clue what this is gonna be, so you definitely didn't? So there's

Speaker 0: no Oh. Oh, no. Is this a oh, boy. Alright. We're just gonna add to the difficulty level here.

It looks like I wasn't originally connected to the MCP. So we'll just refresh and go again. How we doing on time? Seven minutes forty seven seconds. Alright.

We

Speaker 1: burned through a lot on that on that hour.

Speaker 0: No pressure. Right? If if one hour wasn't enough drama for you, let's do it all in ten minutes. So My water's

Speaker 1: empty. We're still over there.

Speaker 0: Alright. So let's see. We've got the direct assist assistant system prompt here. It's fetching the schema. Obviously, this is a blank instance, and then it's looking for the directest users collection.

Alright. So now we can see that the AI is trying to go in and and create these collections inside direct us. And it looks like we've got posts, we've got likes, we've got comments, follows, hashtags for post discovery.

Speaker 1: Relational

Speaker 0: hashtags. And it looks like it's got a junction table for posts and hashtags. Mhmm. Cool. And, I I don't think you've had a ton of experience with the MCP yet other than our like, the video updates.

Only my content. So the it it approaches this very systematically, and then it will go in and create the collections. And it looks like it has only created one collection at a time. Alright. So this is new behavior to me.

Previously, it's done all the collections and then the relations, but we we should be getting the same effect.

Speaker 1: Like that time excuse there, Brian.

Speaker 0: Yeah. Yeah. Yeah.

Speaker 1: Yeah. Absolutely. Yeah. Yeah.

Speaker 0: Alright. So Oh, wow. So we've already got the likes. We could see the posts. Got a caption, a video file, a thumbnail, user ID.

Is this all does this line up with what you would expect out of out of this bin?

Speaker 1: Yeah. I mean, my design brain is is, like, thinking of, like, a little bit of form layout, but I'm impressed that it's doing, like, half in full width, and it's kinda doing a really good first pass.

Speaker 0: Here's our awesome video.

Speaker 1: And, I don't have any. So let's see. That was my first concern is, like, you're not gonna have any, like, MP fours at the ready.

Speaker 0: We've got tons. Recdus MCP assets. What do we got? Blog post workflow. We could test the the TUS upload protocol at the same time.

Speaker 1: So, Meta, are you uploading an m c p p video for the m c p video?

Speaker 0: I was trying to. It looks like, some I'm getting some errors. So that's part of the fun of this. We just keep refreshing and and seeing more content or more data model show up. So we got post.

Let's try this again. I'm gonna link this to my admin user. Here's our awesome video, And let's upload a video from device, see what it got. MCP assets. Do I have a video that is actually small enough?

It looks like 30 megabytes is all I've got here.

Speaker 1: It feels like that that can work. Except I'm getting a issue.

Speaker 0: Oh. Oh. No stress. Alright. Let's just try an image for now.

Oh, I've done something wrong with the images as well.

Speaker 1: I think TikTok has images, doesn't it?

Speaker 0: It it it does. It looks like something has gone wrong. I had reversed relationships. Okay. So now it's filling in the other relationships.

And, unfortunately, I don't think it's gonna allow us to do this without a file, but we could solve for that really quickly.

Speaker 1: I know. I'm googling sample m p four file. I like cityscapes and all that on the mind I've seen. I think it is something that I've done here. Thirty seconds, 1.5 megs.

1.5 megs. Schema.

Speaker 0: It's like Add to proceed.

Speaker 1: Does this not know we are on a

Speaker 0: okay. So I spotted the issue, and that's a good point to bring up that this is really cool functionality to be able to prototype this quickly, but it's not a it's not a silver bullet. It looks like the MCP had tried to tag the wrong folder that did not exist inside the instance, and that's where the issue was coming from. So we could try this again. Here's our test post.

Let's add admin user. Just going to I

Speaker 1: Slacked your URL if you wanna try doing it from URL. Okay.

Speaker 0: Alright. We'll try it from the URL. There we go. We've got the video file uploaded. We can set this to publish.

We will save our post. And now that the MCP has done its thing, we got two minutes and forty seconds Infinite. To, let's just create create some test posts and sample content for each collection. Cool. Alright.

In the meantime, Ben, what is great about Directus and how fast you could prototype like this?

Speaker 1: I mean, this is this is insane. Like, with all the things that we're encountering here I mean, even just the boilerplate stuff of getting the prompt right, trying to find just a sample video file. Like, I you just I feel like you can just, like, mess around. And the worst case scenario, you just command z it and then start again, or at least get, like, a good 80% of the way there.

Speaker 0: We got one minute and thirty six seconds. I think one of the the coolest things to showcase here is that we have a ready to go API. Right? And not just, I need, like, one API. We've got all the APIs for what we need on the back end of this thing.

Speaker 1: I love that it's doing all the colors and iconography too. Like, that to me is it just takes so much time. Like, oh, okay. What what, like, material symbol icon should I use for this or that? Like, that plus the colors and all the form layout.

Like, that's

Speaker 0: Yeah. So let's go in and create a a like here. Here's our post. Cool. They created should be populated automatically.

We got follows. We got comments. We can add a comment to the post. Test comment. Alright.

User ID. Commenting on my own

Speaker 1: I got a user. Who said who said test comment?

Speaker 0: There we go. Alright. So thirty seconds left. I I feel like, you know, we didn't obviously do anything on the front end here, but now we we've got these APIs with a a little bit more time. We could probably slap together a front end, and have something up and running in under an hour, which, you know, the namesake of the show is is insane to me that you could do so much with DirectUs in an hour.

But being able to get here in ten minutes, The entire back end is,

Speaker 1: like, the the schema. We've got, like, everything sort of configured the right way. We got the full API, REST, GraphQL.

Speaker 0: That's it. Ten minutes is up. Well, Ben, any kind of final words on Directus and AI before we we wrap this episode up?

Speaker 1: I mean, it's just it's super exciting. Like, it's the confluence of two big things. Like, AI is just, like, variable, ephemeral, like, crazy new emergent technology with all this potential, but it's kind of a little errant with all the craziness that can get thrown into the mix. And then you've got this, like, super stable, reliable, resilient back end platform of directors. I think, like, at the intersection of those two things is is, as Jonathan would say, there there's magic there.

Yeah. No. This is this is awesome.

Speaker 0: And with that, we will end this episode. Thanks for joining us, and stay tuned for more.

Speaker 1: Thank you, Brian.