00:00:02 To implement a dynamic profile page where we don't just show all the dummy posts, but rather show only the ones that this user has uploaded,

00:00:11 you can head over to the video.ts page or before that, actually head over to the video kit down below and then copy the get all videos by user server action

00:00:23 and paste it here.

00:00:25 Don't worry, I'll explain it thoroughly, but just wanted to give us some head start since it's very similar to the get all videos query.

00:00:34 What we do here is we first get the currently logged in user ID.

00:00:39 Then we check whether that user is the owner of a specific video we're filtering through.

00:00:45 We get all the info from that user and we only return the videos that match that user query.

00:00:50 We do that by specifying some conditions.

00:00:53 We only want to return the videos from that specific user, and we want to check whether they're the owner of that video,

00:01:01 and if the visibility is set to public.

00:01:04 If that is the case, and if the title matches, in case we're doing some kind of sorting or filtering, we can use this I like,

00:01:11 which is basically case insensitive comparison, and we can use this DESC.

00:01:16 This is for descending order coming from drizzle or REM.

00:01:21 So we get the videos, we go through all the conditions, and we simply return the user info and the user videos, allowing us to be able to use them within

00:01:31 the code.

00:01:32 So now you can head over to the profile page.

00:01:36 So that is profile ID page.

00:01:39 And alongside simply fetching the ID from params, we also might want to paginate over the results or filter them.

00:01:47 So remember what I told you, params are under forward slash ID or something.

00:01:52 So fetching for that specific user.

00:01:54 But then if you want to further structure or sort or filter or paginate, you want to get some search param involved as well.

00:02:04 So from search params, we can destructure the query and the filter equal to await search params.

00:02:12 Next, we want to call the server action we just created, which is called await getAllVideosByUser.

00:02:22 And to it, we want to pass the ID of the user, the query and the filters if they exist.

00:02:28 And finally, if there is no user, and this user is being returned from the get all videos by user, as well as the videos,

00:02:38 if there is no user, we simply want to redirect to A404.

00:02:43 Else, if we don't want to redirect, then we're showing this header, and we definitely want to fix this by showing the real user info now.

00:02:51 So as the subheader, I'll display the user?email, As the title, I will display the user?name, and as the user image, I will display,

00:03:06 that's going to be the user?image, or just an empty string, if the image doesn't exist.

00:03:13 Then we display the video grid.

00:03:15 But instead of simply showing the dummy cards, similarly to what we have done on our homepage, so it is just page root, We are now checking whether the

00:03:26 videos exist.

00:03:28 If they do, we map over them.

00:03:30 If they don't, we show an empty state.

00:03:33 So let's copy this from the homepage and paste it right here instead of this section.

00:03:40 We'll take everything from the state to the mapping of the videos.

00:03:46 But we can just modify the empty state a bit because it is a reusable component.

00:03:51 So we can say icon is the same but we'll say no videos available yet because maybe this user hasn't posted them and we can say something like videos will

00:04:05 show up once you upload them.

00:04:08 Perfect.

00:04:09 To make it seem more profile related.

00:04:11 So now if you save this, you can see that this user has only uploaded a single video.

00:04:16 Oh, and I think I forgot to change the profile photo within this card.

00:04:20 So if you head over to the video card, here we have Jason.

00:04:24 But instead of JSON, we want to show the actual user.

00:04:28 And I think we're passing it over through user image, username, and so on.

00:04:32 So I will just render the user image or just an empty string.

00:04:36 And that should show our JavaScript mastery logo or your face.

00:04:40 And we can also change the username.

00:04:42 Oh no, that's already good.

00:04:44 And the visibility.

00:04:45 Perfect.

00:04:46 I think we're good.

00:04:47 So with that in mind, you can now see the homepage of this application where we can see all public videos that all users have uploaded.

00:04:56 You can also head over to the upload video form to upload one or maybe quickly record one and then upload it.

00:05:04 Then you can also visit the video details page and you can also visit, of course, the profile page where you can see your videos.

00:05:13 And with that in mind, Snapcast is done.

00:05:17 We've implemented all of the major functionalities.

00:05:20 Of course, if you truly wanted to turn this into your own SaaS, where you can maybe implement pricing that would allow the people to share the videos,

00:05:28 then it will require a bit more polishing.

00:05:30 Maybe you want to add a pagination at the bottom, similar to what we have on the design right here.

00:05:36 Maybe you also want to count up the views.

00:05:39 Or on the video details page, you want to allow the users to delete videos or change their visibility.

00:05:45 I want to invite you to stop just watching along and copying what we're doing and try to implement these functionalities on your own,

00:05:53 because that's the only way to truly learn how to code.

00:05:57 Look, don't get me wrong.

00:05:58 I'll still share the full GitHub repo with all of these functionalities implemented.

00:06:03 So if you want to take a quick look as a cheat sheet, you can definitely do that.

00:06:07 But I gotta say that that's not how we do stuff at JS Mastery Pro.

00:06:12 There, I teach you not only how to follow along and watch videos, but actually become a professional developer.

00:06:18 And since you came at the end of this video, the course that you most likely want to watch is the ultimate Next.js course.

00:06:25 where there are literally hundreds of different lessons that challenge you to implement some features on your own.

00:06:32 And trust me, things are getting pretty complex.

00:06:34 But don't worry, because this is significantly more detailed than this YouTube video.

00:06:39 So if this video was a bit hard and you weren't able to follow along exactly, That's okay.

00:06:45 Give it a fresh start and start with this course or some other course on JS Mastery Pro, because now you can get all of those courses together as a part

00:06:54 of the subscription.

00:06:55 So click the link down in the description and join me in becoming a truly professional developer that doesn't just copy and paste,

00:07:03 but actually implements stuff on your own.

00:07:05 With that in mind, I don't want to leave you out to dry.

00:07:08 So we'll deploy this current project.

00:07:11 First things first, head over to next config right here and add an ESLint setting where you can say ignore during builds and set it to true.

00:07:24 This is so that if we have some warnings that we might have skipped over while developing, it doesn't break our build.

00:07:29 And we want to do the same thing with TypeScript.

00:07:32 So I will also say, ignore build errors, and I'll set it to true.

00:07:38 After that, you can stop your application from running and create a new GitHub repository.

00:07:44 Once you create it, follow the steps to hook it up to this local project.

00:07:49 And you know the drill.

00:07:50 git add dot, git commit-m, where you specify your commit message, and git push.

00:08:00 If you do this within a couple of seconds, you should be able to see your latest code live on your GitHub.

00:08:05 And once it's there, you'll also be able to deploy it to Vercell.

00:08:09 So just click add a new project.

00:08:13 Choose the one that was updated just now.

00:08:16 Click import and you'll have to add your environment variables.

00:08:21 So back within the code, head over to .env, copy all of the variables and paste them right here and press deploy.

00:08:30 This process will take about a minute.

00:08:32 So let me pause my recording and I'll be right back.

00:08:36 And there we go, worked on the first try.

00:08:38 But from experience, I can tell you that we're not just there yet.

00:08:42 We now have to take a look at the domain name that we were given by Vercell.

00:08:48 In this case, for me, it is this one.

00:08:51 So you have to copy it and head back over to console.cloud.google.com where you can search for auth, head over to clients,

00:09:01 edit the current one.

00:09:04 And here, instead of localhost 3000, you'll want to paste your current domain name.

00:09:10 And here, you'll want to paste the same thing, but again, it's going to be forward slash API, forward slash auth, forward slash callback,

00:09:20 forward slash Google.

00:09:21 So you just have to change the localhost 3000 with the new one that we have right here and click save.

00:09:27 Otherwise, Google Auth will not work on the deployed website.

00:09:31 Also, I'm not sure whether we used it anywhere, but it's always a good idea to replace the public URL in your environment variables on the deployed project,

00:09:42 of course.

00:09:43 So head over to environment variables.

00:09:47 search for the next public base URL and change it from localhost 3000 to this new URL that you were given, modify it, click save,

00:09:58 and you'll have to just redeploy your latest deployment by clicking redeploy.

00:10:03 This will take about a minute, so let's wait until it builds.

00:10:06 Once it's deployed, don't click visit here because that'll lead you to this specific deployment of this app.

00:10:13 which is not the same domain as the original one.

00:10:16 So just go to the original domain and then click sign in.

00:10:20 And once you sign in, you can see your app fully functional.

00:10:24 You can upload video, check video details, and you can even record a video live right here in the browser.

00:10:33 everything is working just as it did before.

00:10:36 So with that in mind, congratulations on coming to the end of this video.

00:10:41 It was a big one and it was such an interesting one because you've learned one of super important skills in web development and that is how to manage video,

00:10:50 not only video upload and storage, but also video recording.

00:10:54 On JS Mastery Pro, at this point, we have hundreds of different courses and tens of thousands of individual video lessons.

00:11:02 So managing all of that was also super tough.

00:11:05 And you know what?

00:11:06 We're using Bunny to store and stream all of those videos.

00:11:10 The same technology you learned how to use in this course.

00:11:14 So huge thanks to Bunny, not only for sponsoring this video, but for making such an amazing piece of software that we use internally and that I'm super

00:11:23 happy to share with you and teach you how to use it.

00:11:25 So once again, thank you so much for watching.

00:11:28 Congrats on building the app and I'll see you in the next one.

00:11:32 Have a wonderful day.