00:00:02 To get started adding functionality to our application and some persistent storage, we'll use AppRite, an open source platform that allows you to create

00:00:10 your entire backend within minutes.

00:00:12 In this course, we'll use it for their databases, storage, and authentication functionalities.

00:00:18 So click the link down in the description to be able to follow along and see exactly what I'm seeing.

00:00:23 And then create your account.

00:00:25 As you can see, I already have quite a few projects running on AppRite.

00:00:28 So let's create another one.

00:00:30 I'll call it JSM Travel Agency Dashboard.

00:00:34 You can do something similar.

00:00:36 Click Next.

00:00:38 choose a region, and your project will be created.

00:00:41 Within here, we'll need to grab a couple of IDs and store them within our application.

00:00:46 So, I'll collapse my browser so I can see my code editor too, and I'll head over into my .env.local, which is where we can add those AppWrite keys.

00:00:55 The first one I'll add will be a Vite AppWrite Project ID.

00:01:00 and that'll be equal to this key that we can copy right from here.

00:01:04 I'll add a comment that right here, these are gonna be our Apprite keys, and then above we have some coming from Syncfusion.

00:01:13 Perfect.

00:01:14 Now here, it's asking us, how do we want to integrate our application?

00:01:18 And I'll say that we want to integrate it with the server using an API key.

00:01:24 So if you click right here, you'll be able to choose your API key name and give it access to all the scopes.

00:01:31 That'll give you your API key secret.

00:01:33 So copy it and create a second variable of Vite AppWrite API key.

00:01:41 and paste the one that you just copied.

00:01:43 Now, head over to Databases and create a new database.

00:01:48 You can call it anything, but I think travel is suitable right here.

00:01:53 As soon as you do that, you'll be given your database key.

00:01:56 So, also save it.

00:01:58 I'll call it Vite Apprite Database ID and just paste it right here.

00:02:05 Within it, we'll be able to create additional collections within our database.

00:02:09 So, you can create our first collection and call it Users, which will allow us to authenticate and store those users right within our database.

00:02:18 As soon as you create it, you'll be able to copy its ID as well.

00:02:21 So, I'll call it Vite AppWrite Users Collection ID and paste the key that I just copied.

00:02:29 And we want to repeat the same thing with the Trips.

00:02:32 So I'll create another collection called Trips and create it, and I'll copy its ID.

00:02:38 So I'll create another one called Vite AppWrite Trips Collection ID.

00:02:45 And you can paste that one as well.

00:02:46 Now, each one of these two collections has to have some fields within it.

00:02:51 So first, let's head over into the users collection.

00:02:55 and head over to Attributes, so we can start defining how our database structure will look like.

00:03:00 So let's ask ourselves, what does every single user need to have?

00:03:04 Well, they'll need to have a string that is a name.

00:03:08 So they need to have a name, and we can make it a size of, well, we could do something like 20 characters, and make it required.

00:03:17 Alongside the name, we also need an email so we can create another field of email.

00:03:24 I'll call it email and I'll also make it required.

00:03:29 alongside the name and the email, we'll also need an account ID.

00:03:33 So create a new string of account ID.

00:03:37 Make sure to put the I in ID uppercase because this will be case sensitive.

00:03:42 And we can make it about 1000 characters just to stay on the safe side.

00:03:47 And I'll also make it required.

00:03:49 I'll also create another string for the image URL.

00:03:53 attached to that specific user's profile photo and I'll make it a thousand characters.

00:03:58 Should be enough.

00:04:00 I won't make it required this time as maybe some users don't have a profile photo and I'll also add a date time of a type date time and I'll call it joined at.

00:04:12 So when did this user join?

00:04:14 And I'll make it required.

00:04:15 Next, we'll add a more complex type called an enum.

00:04:19 So this is basically a string, but it can only be made up of a couple of different values.

00:04:24 I'll call this enum a status.

00:04:27 So each user can have a status or you can also call it a type, but I'll stick with status right now and it can either be user or admin.

00:04:37 So you can add a comma after each one to actually add it as an element.

00:04:43 Then I'll pick the user as the default value.

00:04:48 and I'll create it.

00:04:50 That should be it.

00:04:51 And finally, head over to Settings of the user collection, scroll down to Permissions, click plus, and select Any, and then select all the permissions

00:05:01 right here so that everybody has all the permissions, just so we don't get blocked because we don't have the necessary update permissions.

00:05:08 Perfect.

00:05:09 So now we'll be able to create different users that have all of these different fields.

00:05:13 Next, let's create some attributes for the Trips.

00:05:16 So, head over to Trips Collection, Attributes, and create a first attribute.

00:05:22 I'll call it TrippDetail.

00:05:24 We don't need the S at the end, I think.

00:05:26 TrippDetail will be fine.

00:05:28 I'll make it a big size, like very big.

00:05:31 I'll go with maybe 10,000 characters.

00:05:34 just so we can have the entire itinerary, details, budget, and everything right there, and I'll make it required.

00:05:41 After that, I'll create another string, call it image URLs, give it a size of about, well, let's do 5,000 since these URLs can be large.

00:05:52 I won't make it required, but I will make it an array to indicate that this is an array.

00:05:56 I'll also create a data time like before called created at, so we know when specific trip was created and I'll make it required.

00:06:06 And I'll also add a URL, which will be a link to the Stripe payment.

00:06:12 So I'll call it payment underscore link, and I won't make it required.

00:06:19 I'll also add a user ID, which will be a string, so we can connect the user with the trip.

00:06:25 I'll give it a size of about a thousand characters.

00:06:29 Perfect.

00:06:29 So now you should have image URLs, which is a string array.

00:06:33 You should have trip detail, which is a required string.

00:06:37 You should have a created ad property, which is the required daytime, a payment underscore link of a URL, and the user ID,

00:06:44 which is a string.

00:06:46 Now head over to that collection settings, scroll down to permissions, select any, and give it all permissions.

00:06:53 Perfect.

00:06:54 That's it for our AppWrite setup.

00:06:56 Very soon, we'll be able to use all of these functionalities, such as the API integration, the AppWrite project itself, as well as the database collections,

00:07:05 and even authentication.

00:07:07 But the next step into making all of this work is connecting our authentication.

00:07:12 And we'll do that using Google.

00:07:14 So for that, we'll need the app ID and the app secret coming from Google.

00:07:20 So you'll have to head over to console.cloud.google.com.

00:07:25 Head over to projects and create a new project.

00:07:30 I'll name it something like JSM agency dashboard.

00:07:34 and create it.

00:07:35 It'll take a few seconds for it to get created.

00:07:37 And then you'll be able to open that specific project.

00:07:41 Then where you have the search, you can search for clients.

00:07:46 Here, you'll be able to see Google Auth Platform.

00:07:49 And before you click Get Started, head over to Branding, and then click Get Started.

00:07:54 Here, you'll be able to choose your app name.

00:07:56 So you can do something like JSM Travel Agency, and you can enter your email for support.

00:08:04 You can choose external for the audience, and then you'll have to provide an additional contact info address.

00:08:11 And create it.

00:08:13 Once you create the OAuth config, you'll have to head over to clients and create a new client.

00:08:19 Select web application as the application type.

00:08:22 And you can call it something like JSM travel agency.

00:08:27 and add an authorized JavaScript origin.

00:08:30 Here, you can do something like HTTP colon forward slash forward slash localhost 5173. And you can click Create.

00:08:39 Later on, we'll need to update this with the URL of our deployed application.

00:08:44 What matters most right now are the key and the secret that will just pop up.

00:08:49 So copy the key first, head back over into AppRide, and provide this app ID that you just copied, as well as the client secret,

00:08:58 which you can paste in the second step.

00:09:00 Then, copy the URL at the bottom of app rights card, and click update.

00:09:05 This will say that the Google authentication has been updated, and then head back over to Google, click edit on this client,

00:09:12 and add an authorized redirect URI by pasting the app right redirect URI that you just copied, and then click Save.

00:09:19 Now, another thing we have to do on Google to be able to retrieve Google profile photos is to search for Google People API.

00:09:29 It's this one right here, and enable it.

00:09:32 This will allow us to extract the profile photo from every user.

00:09:36 Perfect.

00:09:37 That was a lot of setup, I know, but now we've prepared ourselves to handle authentication and we have also set up everything regarding AppRide so we have

00:09:47 very seamless development time from now on.

00:09:49 So in the next lesson, let's implement it within our code base.