So what I want to build now is the stream model. So let's go ahead inside of our Prisma schema right here and let's go just below the user here and let's create a model called stream. So model stream. Let's give it an id of string which is going to be our primary id and a default value of uuid. Let's go ahead and give this stream a name which is also going to be db.text.
Let's give it a thumbnail URL which is going to be an optional string and also it's going to be db.text so you can have more characters than a regular string. And now let's go ahead and create an Ingress ID here, which is gonna be an optional string and it's gonna be unique. So this is gonna be the Ingress ID, which we're gonna work on later, which we're gonna use to connect to a streaming software. Let's also add a server URL, which is also gonna come from the Ingress creation. And that's gonna be db.txt.
Let's create a stream key so that's going to be a string, optional string as well, and db.txt. And now let's create a couple of properties here. So I'm going to separate this. So these are the default name and thumbnail URL and ID. These three come from creating our Ingress, which are going to be used for connecting to a streaming software and now we're just going to have a bunch of options so we can control our stream like enabling the chat, disabling the chat and stuff like that.
So let's write first is alive. So that's going to be a boolean with the default value of false. And it's going to change every time the user turns on a stream and we're going to control that using a webhook later on. And now let's do isChatEnabled. So that's going to be a boolean as well with the default value of true so by default all chats are enabled for every new stream and now let's add is chat delayed that's gonna be a boolean and a default value is gonna be false so the delay chat option is gonna be used if the streamer wants to slow down the chat so they can read the messages more clearly.
And now let's add is chat followers only. So that's going to be a boolean with a default of false as well. And now we have to create a relation with the user that owns this stream. So let's create user ID, would be a string and unique and then let's create a relation user, user at relation fields, user ID, references, ID and on delete cascade. And now let's go ahead inside of the user and let's create a relation with the stream.
So go inside of the user here and let's do this after this blocked stuff. Let's add a stream and make it optional like this. So a very simple relation like that. Great. Now let's go ahead and add a couple of more options to the stream model so we're going to add created at which is date time and we're going to give it a default value of now and let's do updated at which is date time with updated at decorator like this And now let's create a couple of indexes.
So let's add an index for the user ID. Let's add an index for the ingress ID. And let's do a full text here. For the name. Right, so I want the stream to be searchable and let's make sure you do double at add here and right now I'm getting an error here so what I have to do to enable full text search on the name of the stream model I have to go inside of my generator client and I have to add preview features and add full text search and full text index.
But this is only for MySQL. So if you're doing this in PostgreSQL, I think you might not even need to add this, but you can try. You're going to get errors if it doesn't work, right? And if you can't get it to work, just remove this line, right? We're going to come to searching later and it's not even that important for the entire project.
But if you're using MySQL, make sure you add full text search and full text index. Great! So this should be our stream model here and what I want to do now is I want to push that to our database. So let me just shut everything down here and let me shut down everything and do npx prisma generate. So we add this locally and then npx prisma db push so we add that remotely.
Right, so let's wait a second for this to push. There we go. And let's check our Prisma Studio now. So this should open on localhost 5555. Let's go inside of here.
And when I click on the plus here, there we go. I have a stream model and the table is empty none of these things exist right now. So what we have to do now is we have to create this stream every time a user is created. So we're going to do that inside of our app folder API webhooks clerk right here. So go ahead and find user.created and after the image URL go ahead and add a stream create and the only property we're going to fill, so if you look at the schema, the only required property for it should be the name.
Everything else is optional or it has a default value, meaning that we don't have to fill it, right? So let's go ahead and give this property a name to be open backticks the user's name which is payload.data.username and then an apostrophe so that users stream That's gonna be the default name of the stream, right? And now, in order to synchronize this with our database, what we have to do is remove all users from our database and all users from Clerc. So, this is what I'm gonna do first. I'm gonna go inside of my terminal here and I will run npx prisma studio again So I'm gonna refresh this here.
I'm gonna go ahead and I will just delete everything Here's an easy way to do it So you can either do it manually by going into each block by going into each follow, right? And deleting your models by selecting them like this. Or one more thing you can do is this. You can do npx prisma migrate reset. So this will shut down the entire database.
I mean, reset the entire database. And now you can see it says all data will be lost. So obviously only use this in development mode and confirm it like this. So this will reset the entire database for you like that and after you do that make sure you run npx prisma generate again and then make sure you do npx prisma db push again so it's quite important that you do that because the collections will now be updated again with the remote database And now if you do npx prisma studio one more time here you should be having no users, no blocks, no follows, no streams, nothing. Everything should be empty.
But remember we still have some stuff inside of our clerk. So let's visit Clerk and let's remove everything from there as well. So go inside of your users here and go ahead and select the user and delete the user. And go ahead and do that twice. Like this.
And now all users are empty. And if you take a look at your webhook, you should be getting some errors now because the webhook is trying to fire those events. So we just deleted a couple of users. And if I look at my activity, I think that now I should be having some failed attempts here, right? So we're gonna see that once we start our webhook again, right?
But you can just ignore that because we know what's going on. We know that our users list is empty. We know that our database is empty. So we are now ready to start our webhook again. So we have to do the following.
I will shut this down for now and first thing I'm gonna do is do npm run dev like this and let's ensure that this is working. So I'm gonna go ahead on localhost 3000 and I should be completely logged out and I should be on the home page. It should be completely empty so no users to recommend, nothing to search and we can't even find anything on the homepage, right? What we have to do now is open a new terminal and we have to run that ngrok command. So if you don't remember it, you can go to ngrok.com, Inside of your cloud edge you have domains and in here you have a little button which says start a tunnel and in here you have your stable domain.
You don't have to use it of course but it's the one that we have registered inside of our Clerk webhooks. Right here, you can see that is that domain. So if you use that one, all you have to do is just paste that here. And of course, change this port 80 to 3000 because that's where our app is running, right? Or if you don't have this domain for any reason, you can just do ngrok-http-3000, and then you're gonna get this new URL.
So then you have to copy that URL. You have to bring it back to Clerk here, and then you have to click edit here and just change this part of the URL with that thing we just copied and make sure you add slash API slash web hooks slash clerk at the end so I'm not doing that I'm gonna keep using this one which I can again copy from here. So it's inside of cloud edge domains, click on start a tunnel and copy this command right here. And then I will just shut this down. I'm gonna paste that and I'm gonna replace the port to go to 3000, like that.
And now if I go ahead and copy this and try it out inside of here instead of localhost I should see the exact same thing and it looks like it's working great so now my localhost and that domain is in sync meaning that my webhook will work and we have to test this out now because we just modified our webhook that when a user is created we also create that new stream model which we just created in our Prisma schema. So go ahead and click login here and create a new account. I'm gonna go ahead and write my username code with Antonio and let's see if our webhook is going to work. It looks like my user has been created and let's go ahead now and I'm gonna open a third terminal here. So I have the npm run dev, I have my ngrok and I'm running another one, npx prisma studio here.
And that should show me that I have a user and a stream and let's see if that is correct and it is correct I have one user right here let me just close this too there we go I have a user and the user has a relation with the stream So make sure that you have one user and make sure that you have one stream and it should be called Code with Antonio's stream or whatever is the username of your user Great. So now you can feel free to shut down Prisma Studio and you also don't need ngrok anymore running unless you plan on creating new users. So here's what I actually recommend you do. Go ahead and run ngrok on that domain, right? Make sure that the proper domain is set in your Clerk webhook and just go ahead and create a new user again.
So I'm going to log out and I'm gonna create a new user just because it's gonna be easier for us to test out different states during our development. So I logged in with a new user and I'm gonna name them Antonio. I'm going to click continue and there we go. It seems to be working. And if I check my Prisma Studio again, which I shut down.
So let me go back just to confirm that this also, So make sure you did this while you were running your webhook, right? If you accidentally mess it up, you can always do npx prisma migrate reset, right? What we did recently to delete your entire database and then go into clerk and remove your users manually. So you can always reset the entire thing, like no need to worry if you mess it up. So let's do npx prisma studio just to confirm that now I have another user and another stream.
There we go Antonio's stream, code with Antonio's stream and two users I hope. Let's see there we go Antonio and code with Antonio. Perfect so we're back where we started but this time our users have their stream model which means that inside of our creator dashboard now we're going to be able to create these elements for keys for chat and for the community. Great, great job.