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.