What you're seeing here is not a pre-recorded video. This is an actual live stream of me playing Spider-Man 2 on my PS5, which I've connected to this Next.js application that you are going to build. So Without further ado, let's go over all the things that you will learn in this tutorial. As you can see, we have a nice stream player with volume controls and fullscreen controls. We also have a clear indicator that this user is live here in the header, but also in the sidebar where we have other recommended users.
We also have the number of viewers looking at the stream in real time, and we can also find out some more information about CodeWithAntonio. And now let me show you how it looks for the person who is actually streaming. So in here we also have a beautiful home page with all of the streams here, ordered by live first, but as a logged in user and as an active streamer, I have access to my creator dashboard. And in here you can see that we have a similar view, but you can see that I have some different options in my sidebar here and I can also modify my stream info, giving it a different thumbnail or modifying the title. And I can do the same thing for my bio, like this.
And you've probably noticed that we have a little chat here, both the streamer and the viewer have a chat. So let's go ahead and say, hello, CodeWithAntonio, like this. And we have a username, Antonio, sending a message, hello, CodeWithAntonio here in real time. And you can see that CodeWithAntonio in their stream view has immediately received this. So I'm gonna write back hello viewer like this.
There we go, both of these in real time. And you can see how each of them has a unique color identifier. So what happens if this Antonio user starts to spam our stream? What we can do as the owner of the stream is go inside of the community, find the user that is misbehaving and initiate a block function. And they are going to be immediately disconnected from the stream.
And if they try refreshing, it's going to say 404, we couldn't find the user you were looking for. And as you can see, it's no longer in the Recommended tab and it's no longer in the Home tab. You can't even find them inside of the Search tab right here. No results found. So let's go ahead and see what happens once we unblock the user.
So as a streamer I can go inside of my community settings, find the user that I've blocked and initiate unblock like this. And now when this guest tries to refresh, there we go, we can see ourselves here. And now let's go ahead and try and search again. So I'm going to search for the term Spidey and there we go, we have two live streams including Spider-Man. And now I can go ahead and visit this user again.
Great! But here's another thing I can do. In the stream settings here I can go into the chat settings and if I want to I can completely disable the chat. But I can also enable chat delay and I can enable must be following to chat rule. So now when this guest goes ahead and visits our stream, you can see that they have a notification that followers only and slow mode is enabled and they can see more information hovering here.
So messages are delayed by three seconds. Because I'm not following this user, I cannot send a message. So let me go ahead and click follow here. And what happened now is that this changed to one follower and in my sidebar, CodeWithAntonio went from the recommended tab to the following tab. And now I can go ahead and send a message as a follower and you can see that it is delayed by three seconds.
So now it's being sent exactly as the settings we provided. Great! So what else can we do with this application? Well, you might notice that inside of my sidebars here, I have a little toggle button, which allows me to completely collapse my layout. Let's say I want to hide this sidebar while I'm watching a stream.
I can simply click here and there we go. Now it is in collapsed mode. And I can do the same thing for the chat if I don't want to see that while someone is streaming. So now let's go ahead and Let's end this stream and see what happens. So here I've prepared my OBS studio where I'm actually streaming.
So this software is connected to my Next.js application. And once I click Stop Streaming right here, you can see that in a couple of seconds here, this entire stream will go offline like this. Great! And now you're not going to be able to see the live indicator neither in the following neither in the home page here. So let's go ahead and this time try to initiate an opposite thing.
Instead of CodeWithAntonio being the streamer, let's go ahead and make this user Antonio stream. What they have to do is go inside of the dashboard here and they will see their status that they are offline and now let's go inside of the keys right here and let's go ahead and click on generate a connection. We can select between RTMP connection or a WIP connection so we can handle multiple streaming software. Let's go ahead and click generate here and now this has generated our server URL and our stream key which is hidden by default but we can always show it. So just like on Will Twitch we're gonna have proper information to connect to our streaming software.
So what I have to do now is copy my server URL and I have to go inside of my OBS settings. I'm choosing the Stream tab and I'm going to go ahead and assign the stream URL here. And now I have to copy my stream key. So let me go ahead and copy that, like this. Make sure it's the same, click OK and then I'm going to click start streaming and now as you can see I am live as Antonio as a completely different user right and now once the code with Antonio refreshes there we go you can see that this stream is now live and I can go ahead and follow this user and then I can send a message again and this one will receive it in real time here.
This is just a small part of everything that you're going to learn in this application. We're going to have a ton more features including entire user management, including webhooks, including creating ingresses, a bunch of things that you will learn inside of this tutorial. So without further ado, let's get started. On top of all of that, the entire website is going to be fully responsive on all devices.