00:00:02 Okay, we have the homepage UI, but the real work begins right now, because now we're starting to dive deeper into the functionalities of our application.

00:00:12 We can't just have a static screen.

00:00:14 So, let's talk database architecture.

00:00:18 When designing a food ordering app like this one, we have to think in terms of how a real restaurant or a real food ordering app works.

00:00:28 A user doesn't just order food, they look through different categorized sections like burgers, pizzas, or burritos.

00:00:36 So the first concept that emerges here that we have to think about in terms of the database architecture is a categories collection.

00:00:44 Each category has to have a name like burgers and a short description.

00:00:49 This will allow us to organize the menu and make filtering easy on the front end.

00:00:54 So head back over to AppRide Cloud and head over to Databases.

00:01:00 Open your database and create a second collection within it.

00:01:04 This one I'll call Categories.

00:01:10 As with a user's collection, we'll have to give those categories a couple of attributes.

00:01:14 So let's create a first one, which will be a string of a type name with a size of about a hundred, and it'll be required,

00:01:23 which will contain the name of that category.

00:01:25 Then we can have another string, which will be a description.

00:01:31 of a size 100, which we'll also make required.

00:01:36 Now, don't forget to go to settings and head down to permissions and you could either turn it on for any, but in this case,

00:01:45 you can update the permissions to allow operations from the user.

00:01:49 So simply say all users and then give them all permissions.

00:01:54 This should be enough.

00:01:56 Then copy the category's ID and add it to our AppWrite config.

00:02:02 that is right here, under User Collection ID, I'll add a Categories, Collection, ID, and just paste the ID you just copied.

00:02:11 Now, the main part of the app are in the categories.

00:02:14 It's gonna be the food itself.

00:02:16 Every individual food item, like the Wendy's burger, or a Margarita Magic, or even this chicken wrap.

00:02:23 Each menu item has to have properties like a name, description, image, price, rating, and even nutritional info.

00:02:32 It also needs to reference the category to group the items into the right section.

00:02:36 So head back over to AppRide and create yet another collection called Menu.

00:02:43 Within menu, you can also create a couple of additional properties or attributes.

00:02:48 So let's create a first one.

00:02:50 That'll be a string of name.

00:02:52 We can make the size of about 200 and the required.

00:02:57 Let's also add a description, which will be another string of a size 2000 can be a bit longer and I'll make it required.

00:03:07 We can also add a URL with an attribute name of image URL and required.

00:03:16 I'll also add a float.

00:03:20 A float is a number which we can use for the rating.

00:03:23 So it can go from one to five and I'll make it required.

00:03:29 Next, we can add an additional integer, which could maybe be a number of calories.

00:03:35 So, I'll enter the min size of 1 and max size of like 10,000. I doubt an item is gonna go above that.

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

00:03:45 Now, we can go even further and add things like an integer for the macronutrients, like protein.

00:03:56 I'll set the size from 0 to 10,000. And also make it required.

00:04:03 And I'll add another float for the price with a price of one to 10,000 and make it required.

00:04:13 Finally, we need to create a relation between the menu items and the categories.

00:04:19 So it's right here, relationship.

00:04:22 It's going to be a two-way relationship with the categories collection, where the attribute key is going to be categories and the relation will be set

00:04:33 to many to one.

00:04:35 Oh, and this attribute key in the related collection will be set to menu.

00:04:39 So now we have categories, attribute key of categories, attribute key is menu in the related collection, and then a relation many to one,

00:04:48 because one menu item can contain one category, but categories can belong to multiple menu items.

00:04:55 And when we delete a document, we can set it to cascade to also delete all the related documents.

00:05:01 and create.

00:05:02 Now, go to the settings of the menu collection and let's also update the permissions.

00:05:08 We can also give permissions to all the users and give them full permissions.

00:05:13 Don't forget to copy the collection ID and add it to the code right after the category's collection ID of menu collection ID and set it to the string you

00:05:25 just copied.

00:05:26 Now, real-world menus are also rarely static.

00:05:30 Most food items come with optional choices, like extra cheese, fries, coke, or olives.

00:05:37 These are called customizations.

00:05:39 But instead of hard-coding them directly inside of each menu item, we can create a separate customizations collection.

00:05:47 So, let's create a new collection and call it Customizations.

00:05:52 Now, each customization can include a name, a price associated with it, and a type, such as a topping or a side.

00:06:00 This approach will allow us to reuse customizations across multiple menu items.

00:06:05 And if fries become five bucks instead of three bucks, you update it once and every menu item using it will automatically reflect the change.

00:06:14 So, let's give them our first attribute, which is going to be a name, about 100 characters, and required.

00:06:23 We can also give it an integer for the price or a float.

00:06:27 Either way should work.

00:06:30 It's going to be from 1 to 10,000. Just not to limit our users in case they want to go crazy with the pricing.

00:06:37 We don't care about that.

00:06:38 We're building the app.

00:06:40 And finally, we can also create a type.

00:06:43 And that can be of a type enum.

00:06:46 Enum allows you to choose between a set of predefined options.

00:06:50 So for example, it can be a topping or it can be a side or a size.

00:06:56 or crust, or bread, or spice, or base, or sauce, or something like that.

00:07:03 Whatever you want, you can add it right here, and then your users will be able to select it within the app.

00:07:08 And let's make it required, and click Create.

00:07:11 Now, let's go to the settings of the customizations collection and let's update the permissions to give the users the ability to create them,

00:07:22 read them, update them, and delete them.

00:07:25 And let's copy the customizations collection ID and paste it over right here.

00:07:30 Customizations collection ID.

00:07:34 And we can paste it right here.

00:07:37 Great.

00:07:38 So, you might think that we have everything we need.

00:07:42 But there's one challenge here.

00:07:44 Some customizations apply only to burgers, but not to pizzas, for example.

00:07:49 Others apply to both.

00:07:51 This is a classic many-to-many relationship.

00:07:54 A menu item can have many customizations, and a customization can belong to many menu items.

00:08:01 And in relational modeling, the cleanest way to handle this is by introducing a join table.

00:08:07 or in AppRite's case, a new collection.

00:08:10 This collection will be called menu-customizations and is essentially a joint table.

00:08:18 It'll contain pairs of references, one pointing to the menu item and the other to the customization.

00:08:25 This architecture will keep the data clean, reusable, and consistent.

00:08:31 For example, a user might add a pepperoni pizza with extra cheese and a Coke to the cart.

00:08:37 And because these customizations exist as separate documents, the app doesn't duplicate that information.

00:08:43 It simply links them.

00:08:44 I mean, you could say that you could embed customizations directly within the menu items that we create in our database.

00:08:50 It's a tempting shortcut, but it quickly falls apart as the app grows.

00:08:55 Because embedding customization makes it hard to update prices globally, leads to inconsistent naming and makes filtering or analytics harder.

00:09:04 By normalizing data, separating it into reusable collections, this structure is more scalable and maintainable.

00:09:12 There's also flexibility built into this design.

00:09:15 Customizations are optional, and not every item needs to have a topping or a side.

00:09:20 So even if a menu item has no customizations, it can still be stored, displayed, and priced properly.

00:09:26 This design supports both simple and complex items equally.

00:09:31 And this is just one of the advanced database optimizations that we teach over on jsmastery.com.

00:09:36 This one specifically, I believe I cover within the Ultimate Next.js course, where we try to do something similar with the Stack Overflow clone application

00:09:45 that we're creating.

00:09:47 It has many different lessons, so I don't think I'll be able to find it right now.

00:09:51 But yeah, we do something similar there, and I go into much more depth explaining it.

00:09:56 So if you want to learn it in more detail, check out jsmastery.com.

00:10:00 But for now, let's actually add some attributes for the menu customization collection.

00:10:05 The first attribute I'll add is going to be a relationship, a two-way relationship between a collection called menu with the attribute key of menu,

00:10:17 And the secondary attribute key is menu customizations with a relationship of many to one.

00:10:24 And we can say cascade when we delete one of these documents.

00:10:28 And I'll create yet another attribute of a relationship.

00:10:32 Once again, a two-way relationship, but this time with the attribute key of customizations and the attribute key of menu customizations,

00:10:40 it's going to be a many to one.

00:10:44 And we'll also set it to cascade and create.

00:10:48 Let's not forget to update the permissions so we can actually use it.

00:10:52 So set all users and give it full permissions.

00:10:57 And now, don't forget to copy the collection ID, but I think you will remember that by this point.

00:11:03 So we can add it right here and say menu, customization, collection ID, and set it to the ID we just copied.

00:11:13 This structure follows the standard relational database design principles while fitting naturally with how real-world food ordering works.

00:11:22 It's designed to be clear for developers, scalable for future features, and it's also flexible enough to accommodate any kind of a food business,

00:11:30 from a burger joint to an Italian pizza shop.

00:11:33 If you want to expand it even further, you could add additional collections like orders, cart, addresses, while still keeping the data separated.

00:11:41 Oh, and alongside this, we'll also need a storage solution for storing different menu images and similar stuff.

00:11:48 So we'll also use another one of AppRite's features called Storage.

00:11:53 Head over to Storage and create a new bucket.

00:11:57 And let's name it something like Assets.

00:11:59 Go to Settings of the Assets and also modify the permissions.

00:12:05 For all users, we'll set it to create, read, update, and delete.

00:12:10 Finally, let's not forget to copy the bucket ID and paste it over to right here below our database ID.

00:12:18 I'll call it bucket ID.

00:12:20 Perfect.

00:12:21 Now, if this hasn't yet fully clicked for you, no worries.

00:12:24 It'll click better once we actually start putting it into practice.

00:12:27 Now, in the next lesson, I want to teach you how we can do something that you need to know when you're working with any kind of a database.

00:12:34 And that is a concept known as seeding a database.

00:12:38 So, let's do that next.