Join the Conversation!
Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.
Trending Movies Feature
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.
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:02Â To create a feature that displays trending movies, it's essential to understand exactly what users are searching for.
00:00:10Â The more frequently a specific search is performed by multiple users, the higher its trending status becomes.
00:00:17Â This requires tracking and analyzing search patterns over time.
00:00:21Â For example, if many users search for Squid Game, well, Squid Game will become trending.
00:00:27Â To track and analyze these searches, we need a place to store the data permanently.
00:00:32Â If you think about it, state is a way of storing data, but it's not a permanent store of data.
00:00:39Â Something called a database is.
00:00:41Â We use databases to store information and then retrieve it when we need it.
00:00:46Â And traditionally, implementing this would mean building a full stack application, meaning that you would have to develop a server,
00:00:54Â set up a database, connect them, host everything, and only then integrate it into your React project.
00:01:01Â While this approach works, it can be a lot of effort and requires diving into backend development, which is a whole different area of expertise.
00:01:10Â An easier way to get backend functionality without starting from scratch is using a backend as a service platform.
00:01:17Â These services like Firebase, SuperBase, and AppRite take care of the backend setup for you, providing you easy to use APIs that let you store data,
00:01:26Â manage auth, and more without needing in-depth backend knowledge.
00:01:30Â In this course, we'll use AppRite because it's simple, open source, and free to use.
00:01:36Â Plus, it saves us from diving headfirst into backend work when we really just want to focus on making our React app awesome.
00:01:44Â So click the link in the description and then create a new account.
00:01:48Â You'll be redirected to your dashboard.
00:01:50Â And as you can see, I already have many AppRide projects.
00:01:53Â So let me create another.
00:01:55Â Call it something starting with JSM, maybe a movie app.
00:01:59Â You'll have to choose a different name and choose a server.
00:02:03Â Once you do that, you'll be redirected to your project's dashboard.
00:02:07Â I'll zoom it in a bit and you can copy its ID.
00:02:10Â We can head back into our .env.local and add it.
00:02:15Â right here below by saying Vite AppWrite project ID and make it equal to the ID that we just copied.
00:02:23Â Next, we'll have to set up a platform for our project.
00:02:26Â In this case, we'll use web.
00:02:28Â You can enter the name such as react and a host name can be set to asterisk, meaning everything to make sure that we can call it from anywhere.
00:02:37Â Click next.
00:02:38Â And then you'll have to install AppWrite.
00:02:41Â So let's copy the installation command.
00:02:44Â head back into your terminal and paste it there.
00:02:48Â Then click next and the next one more time and go back to the dashboard.
00:02:54Â Then you can head over to databases and create a new database.
00:02:58Â You can call it something like movies and create.
00:03:02Â Make sure to copy its ID and add it to your .env.local under the name of VEAT underscore app, write underscore database underscore ID.
00:03:13Â And we can also create a new collection within that database.
00:03:17Â Let's call it metrics.
00:03:19Â Click create, copy its ID.
00:03:22Â And let's also add it right here as VEAT app, write collection ID.
00:03:30Â Perfect.
00:03:31Â Now let's create different attributes for each one of these metrics.
00:03:35Â We'll need the actual search term, which will be a string.
00:03:38Â So let's call it search term.
00:03:42Â Enter the size, something like 1000 characters, and it'll be required.
00:03:49Â After that, we can have a count of how many times have users searched for that search term.
00:03:54Â So let's create a new integer, call it count and enter the default value of one.
00:04:00Â Doesn't have to be required.
00:04:02Â After that, we can also save a URL called poster.
00:04:08Â underscore URL and make it required so that we can immediately save the URL of the poster that users are searching for in our database,
00:04:16Â as well as its movie ID.
00:04:18Â So let's do another integer and it'll be called movie underscore ID.
00:04:25Â and it'll be required.
00:04:26Â Perfect.
00:04:27Â So make sure that your attributes are called exactly like this, required, and have the same types.
00:04:34Â If you call them differently, you'll have to change how we use them within the code.
00:04:37Â Now, head over to settings, and then to the permissions.
00:04:42Â Click plus, any, and give all permissions.
00:04:47Â This is just to make sure we can make calls to our database without any worries and click update.
00:04:52Â With that in mind, let's head back over to our code and within the source, create a new file called app-write.js.
00:05:01Â And within here, we'll do all of the setup.
00:05:04Â But before that, let's simply try to console log our ENVs just so we're sure we can access them.
00:05:10Â We can do that by saying const database underscore ID is equal to import.meta.env.vit underscore appride underscore database underscore ID.
00:05:26Â And we can duplicate that and just rename it to collection ID and say collection ID right here at the end as well.
00:05:35Â Oh, and we'll also need the AppWrite project ID.
00:05:38Â So let's duplicate it one more time.
00:05:42Â And let's just rename it to project ID is equal to import AppWrite project ID.
00:05:50Â Perfect.
00:05:51Â Now let's console log them.
00:05:53Â That's going to be project ID, database ID, and collection ID.
00:05:57Â But for this file to be executed, we actually have to call some kind of a function.
00:06:02Â So what do you say that we immediately create a function here that will update the search count?
00:06:07Â It'll look like this.
00:06:09Â Export const update search count.
00:06:15Â which will be equal to an asynchronous function.
00:06:18Â And for the time being, the only thing it'll do is it'll console log those environment variables, just to make sure we have access to them.
00:06:26Â So now we can go back to the app.jsx and right at the bottom, after we set the movie list, we can call the updateSearchCount like this,
00:06:39Â and make sure to import it at the top coming from AppWrite.js.
00:06:43Â If you do this, go back to your browser and reload the page and then open up the console, you should be able to see three different IDs.
00:06:52Â In case you can't see them, sometimes it's possible that Vite will not automatically restart the server for you.
00:06:58Â So you can do that yourself manually by pressing control C and then rerunning it by running npm run dev.
00:07:05Â But if you have those keys here, that's good and means we can proceed.
00:07:09Â So let's implement this function that'll track the searches made by different users.
00:07:15Â This function will take in two parameters.
00:07:18Â The first one will be the search term that the user has searched for.
00:07:24Â And the second one will be the movie associated with that search term.
00:07:27Â So all of the information about the first movie that pops up once the search term is entered.
00:07:32Â The function has to do the following things.
00:07:35Â Number one is to use AppWrite SDK or API to check if a document already exists for the search term.
00:07:46Â So to check if a document or search term already exists in the database.
00:07:51Â Then, if it does, that means that the search term has been searched before.
00:07:55Â So in this case, simply update the count.
00:07:59Â But if a new document is found, then create a new document with a search term and count and set the count as one.
00:08:06Â So now how do we implement it in practice?
00:08:09Â Well, first things first, we have to get access to AppWrite's functionalities by defining a new AppWrite client by saying const client is equal to new
00:08:20Â client coming from AppWrite.
00:08:22Â So you can import it at the top.
00:08:24Â And then on it, you can call the .setEndpoint and set it to https://cloud.apprite.io/.v1.
00:08:37Â Similar to how we set our movie API, here we're pointing to AppWrite servers.
00:08:43Â And you also have to set your project pointing to the current project ID.
00:08:48Â Similar how in the movies API, we had to have our own safe token.
00:08:52Â Once we have the client, we can define which functionality we want to use from AppRide.
00:08:57Â And that is the database functionality.
00:08:59Â So we can say cons database is equal to new databases coming from AppRide.
00:09:07Â And to it, we pass our current AppRite client.
00:09:10Â Great.
00:09:11Â So now let's use the AppRite SDK to check if a search term already exists in the database.
00:09:16Â We can do that by opening up a try and catch block.
00:09:20Â In the catch, we can simply console log the error if there is one, but in the try, I'll say const result is equal to await database dot list documents.
00:09:33Â In which database do we want to list the documents?
00:09:36Â It's going to be the database with our current database ID.
00:09:40Â So you can pass it as the first parameter.
00:09:42Â From which collection?
00:09:43Â Well, it's going to be the collection ID, this one.
00:09:46Â And then as the third parameter, we can pass an array.
00:09:51Â And within that array, we can say query, which has to be imported from app.write.equal search term has to be equal to the search term.
00:10:01Â So we're matching what we have in the database with what our users are searching for.
00:10:06Â After that, if.
00:10:08Â result.documents.length is greater than zero.
00:10:14Â So if the document exists, then we want to get that document by saying cons doc is equal to result.documents zero.
00:10:24Â And then we want to update the count.
00:10:26Â We can do that by saying await database.updateDocument.
00:10:33Â Which document we want to update?
00:10:34Â Well, the document under this database ID, this collection ID, and this document ID.
00:10:42Â And then what do we want to do to it?
00:10:44Â Well, we want to set the count to be equal to current doc.count.
00:10:50Â plus one.
00:10:52Â That's it.
00:10:52Â And then else, if it doesn't yet exist, that's going to be the step three already.
00:10:57Â So step two is if it does exist, update the count.
00:10:59Â That's this if statement.
00:11:01Â And this is the step three.
00:11:04Â If it doesn't, then create a new document with the search term and count as one.
00:11:09Â So instead of calling databases update, we'll say await database.createDocument Under this specific database, for this specific collection,
00:11:21Â with this specific ID, we can get it id.unique, like this.
00:11:27Â But make sure to import this id.unique from AppRite right here at the top.
00:11:32Â That'll allow you to simply create a random ID for this document you're creating.
00:11:37Â And then you can pass an object containing different pieces of data that you want to pass to it, such as the search term,
00:11:45Â the count set to one, and what other attributes do we have?
00:11:48Â Do you remember?
00:11:49Â I think it was the movie ID, so we can set that to be equal to movie.id, but make sure to have the underscore right here.
00:11:57Â And I think we had poster underscore URL, which we can set to be equal to template string HTTPS colon forward slash forward slash image.tmdb.org forward
00:12:13Â slash t forward slash p w 500 and then movie dot poster underscore path.
00:12:19Â Perfect.
00:12:19Â I believe now we have everything we need to be able to save our searches.
00:12:23Â So now we can head back over to our app.jsx.
00:12:28Â And by the way, to quickly switch files, I don't always go here and then search for the file manually.
00:12:34Â I use the command or control P on my keyboard and then start typing where I want to go.
00:12:40Â So app.jsx.
00:12:41Â arrow down, and then enter, and we're immediately there.
00:12:44Â So now, whenever a user performs a search, which is right here below, we want to update the search count.
00:12:51Â We can do it something like this.
00:12:54Â If there is a query, and if data.results.length is greater than zero, so means if a movie exists for that query, then we want to await,
00:13:07Â update search count, make sure to import it at the top, to which you provide the query and the information about that movie.
00:13:16Â So that's data results zero.
00:13:18Â So it knows what to save.
00:13:19Â And that's it.
00:13:20Â Let's perform a search and then I'll show you how this record appears in the AppWrite collection.
00:13:25Â Let's go with something popular like Venom.
00:13:29Â Let's go Venom right here.
00:13:30Â Okay, we search for it.
00:13:32Â This is the one that shows at the top.
00:13:33Â And now if you head back over to AppWrite databases, movies, Collections, you'll be able to see two different documents.
00:13:42Â The first one has the data of V.
00:13:45Â Looks like I wasn't fast enough, so maybe we can increase the debounce value.
00:13:50Â But the second one should be good.
00:13:53Â Check this out, data, Venom.
00:13:56Â So it has been successfully saved with a count of one.
00:14:00Â Now let's keep searching.
00:14:02Â Maybe this time I'll go with something like Wicked.
00:14:05Â Okay.
00:14:06Â And now let's also simulate another user going to Venom.
00:14:10Â So we search for it two times.
00:14:12Â So now if I head back and reload, we see three different documents.
00:14:17Â One is for Venom, and it has a count of two, which means that this worked successfully.
00:14:23Â And we also stored its ID as well as its poster URL.
00:14:27Â And then the new one is just wicked right here with a count of one.
00:14:32Â I think you understand how this is working.
00:14:34Â So the more people search for something, the higher the count will be, and then we can show it in our trending list.
00:14:40Â And with that, you saw how simple it was to set up AppRite to use its database functionalities.
00:14:46Â So now let's head back over to our app and let's fetch that data from the database so we can display it right here at the top.