Join the Conversation!
Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.
Show Trending Movies
Loading...
Loading...
0 Comments
"Please login to view comments"
Upgrade your account
"Please login to view comments"
Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.
How did you manage to remove the blur property and reach here?
Upgrading gives you access to quizzes so you can test your knowledge, track progress, and improve your skills.
By logging in, you'll unlock full access to this and other free tutorials on JSM Pro.
Why? Logging in lets us personalize your learning experience, track your progress, and keep you in the loop with new workshops, coding tips, and platform updates.
You'll also be the first to know about upcoming launches, events, and exclusive discounts.
No spam—just helpful content to level up your skills.
If that sounds fair, go ahead and log in to continue →
Enter your name and email to get instant access
##Looks like we found a thief monkey By the way, I liked the trick how you reached till here. You have a good sense of humor. You will improve a lot if you join our course with this passion.
var (function-scoped, outdated)let (block-scoped, modern and recommended)const (block-scoped, cannot be reassigned)_, or $let let = 5; is invalid)myVar and myvar are different)string, number, boolean, null, undefined, bigint, symbolObjects, Arrays, Functions
Subscribing gives you access to a brief, insightful summary of each lecture to stay on track.
00:00:01Â Now that everything is in place and we know what our users are searching for, we are ready to show this trending list of movies.
00:00:09Â But before we focus on the UI, we need to create another AppWrite function to be able to fetch the top movies from the database.
00:00:17Â So create it right below by saying export const GetTrendingMovies is equal to an async function that looks something like this.
00:00:28Â This time we don't need any parameters as we'll simply fetch it from the database.
00:00:33Â Let's open up a try and catch block as always in case something goes wrong, we can console log the error.
00:00:40Â But in the try, we can try to fetch those movies by saying const result is equal to await database dot list documents and list them from the database with
00:00:56Â the database ID and the collection ID that we pass.
00:00:59Â But then we can provide an array to specify which movies we want to get.
00:01:04Â Specifically, we want to limit the query to only show five movies, we don't need any more, and we can do it in a descending order.
00:01:14Â So query.orderDescending, sorted by count.
00:01:20Â So the ones that have the highest count will appear at the start.
00:01:23Â And finally, simply return result.documents.
00:01:29Â This is it.
00:01:30Â This is enough for us to fetch those movies on the homepage.
00:01:33Â So let's head back over to app.jsx and let's create yet another state for our movies.
00:01:41Â This time we'll create trending movies.
00:01:44Â So another state, trending movies, set trending movies at the start equal to an empty array as always.
00:01:54Â And I know that this app is not super simple, not something that you might consider your first app.
00:02:00Â It has many states, many different hooks, functions, API calls, and even databases.
00:02:07Â But I really wanted you to have a real experience of what building with React is really all about.
00:02:14Â This is how real apps look like, not just a single use state and then some UI.
00:02:18Â Typically, it does get messy like with what we have right now.
00:02:22Â So with that in mind, let's create another function right below fetch movies.
00:02:28Â And let's call it const load trending movies, which will be equal to an asynchronous function where we have a try and catch block.
00:02:41Â In the catch, we get the error and we can say something like, error fetching trending movies.
00:02:47Â And we can also set the error message to error fetching trending movies.
00:02:51Â So we know if something goes wrong.
00:02:54Â Oh, but no, this wouldn't be good because currently we're checking if an error message exists.
00:03:00Â And if it does, we're not even showing a regular movie list.
00:03:04Â So if the trending movies are not working, this would actually break our entire application functionality.
00:03:10Â And we don't want that.
00:03:12Â So you see, you got to be careful with that conditional rendering.
00:03:16Â So in this case, I will not set this error message here.
00:03:19Â I will simply const log in.
00:03:21Â And in the try, we can simply fetch the trending movies by saying const movies is equal to await get trending movies.
00:03:33Â Make sure to import it at the top coming from apprite.js.
00:03:37Â And then once you have it there, we can simply say setTrendingMovies to be equal to movies.
00:03:44Â We're not equal, you pass it into the setter function.
00:03:46Â So what do we do with those movies?
00:03:49Â Well, first of all, we have to actually use this function because right now it is fully unused.
00:03:55Â So what do you think?
00:03:56Â What would be the best place to call this low trending movies?
00:04:01Â maybe within a use effect, right?
00:04:03Â Here we're fetching movies, might make sense to load the trending movies too, but not really.
00:04:09Â Because if you do this, then trending movies will be refetched every single time that our current user searches for something.
00:04:16Â And that'll cause too many necessary API calls.
00:04:20Â So instead, we'll leave this use effect as it is with its own dependency array, and check this out, we'll create yet another use effect.
00:04:30Â This time with an empty dependency array, which means that it'll only get called at the start.
00:04:36Â Finally, now that we've done that, we can head over above our current all movies section, remove this margin top from the H2 because now we'll implement
00:04:46Â a whole another section right below the header.
00:04:51Â I'll check if trending movies dot length is greater than zero, meaning if trending movies exist, then render another section that'll have a class name
00:05:04Â equal to trending.
00:05:05Â And within it, render an H2.
00:05:09Â where we can say something like trending movies.
00:05:13Â There we go.
00:05:14Â Here it is.
00:05:14Â And then below it, we can render a UL, an unordered list.
00:05:20Â And within it, we can map over the trending movies by saying trending movies.
00:05:26Â where we get each individual movie, and we can also get its index.
00:05:31Â And then for each movie, we want to immediately return an li, which is a list item.
00:05:36Â And don't forget, since we're mapping over it, we have to give it a key equal to movie.$id.
00:05:44Â because now it's coming from the database and typically databases start their IDs with something like dollar sign or underscore and there we can render
00:05:53Â a p tag and render the index plus one because indices start at zero but this time we want to start from one and you can see that now we get one two three
00:06:04Â four perfect But let's actually show something next to those numbers, like an image with a source equal to movie dot poster underscore URL with an alt
00:06:19Â tag of something like movie dot title.
00:06:22Â If you save this, you should be able to see different posters appear right here.
00:06:27Â And it looks like I searched for Avengers a few more times than what I did for Venom.
00:06:32Â So if a couple more users search for Venom, let's see what happens.
00:06:36Â That was one.
00:06:38Â Maybe I can delete it and then search for another.
00:06:43Â And now if I reload the page for the trending movies to be reinitialized, you can see that the Venom now gets the first place.
00:06:52Â Let's try to search for some other popular movies nowadays, maybe the Gladiator.
00:06:57Â So if I do this and search for the Gladiator, we see it and I'll search for it a couple more times just to see whether our trending movies will properly
00:07:07Â recognize it.
00:07:07Â I'll reload the page and there we go.
00:07:10Â Now the Gladiator is on the third place.
00:07:12Â And with that in mind, believe it or not, you've done it.
00:07:16Â I'll close this file and expand my browser fully.
00:07:20Â And there you have it, your own movie application with a trending movies functionality.
00:07:26Â Isn't this cool?
00:07:28Â Not only can you search for different movies, but you can also know what is popular within your app, based on other people's searches.
00:07:36Â That was awesome to learn and implement, right?
00:07:39Â As an extra task for you at the end of this video, maybe you can implement loading and error states for the trending movies.
00:07:46Â Remember how I said that if we change the error message here that the movies would not load?
00:07:52Â Well, that's because we need a whole another loading and error state for the trending movies.
00:07:58Â So right now we have the is loading as well as the error message.
00:08:03Â for all of the movies, and then we have the search term, maybe we can sort it a bit better, and a movie list and the trending movie list.
00:08:11Â But the better way to sort it would be to have the movie list right here, and then the error message, and then the is loading.
00:08:19Â But then for the trending movies, you can also implement the error message and is loading and properly render it on the screen,
00:08:27Â depending on if something fails or the time it takes to load.
00:08:31Â Pretty cool little exercise, right?
00:08:33Â In any case, I hope you gained a lot from this video.
00:08:36Â And for some of you, things might not have yet fully clicked.
00:08:40Â But that's totally fine.
00:08:41Â Feel free to rewatch it and try it on your own without watching the video.
00:08:46Â There's no secret formula to becoming a great developer.
00:08:49Â I started the same way.
00:08:51Â When I learned something new and it didn't quite make sense, I'd retry it on my own and practice it over and over and over again.
00:09:01Â you can do the same and you'll start to see the results.
00:09:04Â Since we're very close to the end of this video, I just want to say that if you enjoyed my teaching style, and maybe you did since you're at the end,
00:09:12Â make sure to sign up to the waitlist or check out the upcoming Reacts.js Pro course to dive deeper.
00:09:17Â YouTube is great, but on jsmastery.pro, I provide you with a bit more structure and exact path on what you have to learn next after you master JavaScript,
00:09:27Â React, Next.js, and so on.
00:09:29Â No matter where you add in your journey, I'll provide you with the next step to become job-ready.
00:09:35Â But on that note, there is one thing that will surely make you more job-ready, and it's within this course, and that is the deployment of this great application.
00:09:44Â Not only have I taught you how to build it, but now you want to share it with others, right?
00:09:49Â It's a pretty cool app and you want to have it online and you want to show it to your friends, colleagues, or maybe even put it on your portfolio.