Build A Complex Supabase App w/NoCode (Comprehensive Tutorial)

and so in today's comprehensive tutorial we are going to be building a full freelancer type Portal app and so we're going to be covering everything that you need to know in order to build a fully functioning app we're going to be building things like authentication order management a real-time chat and most importantly our backend of choice for the first time is going to be super basic and so this app is going to be built very very differently as compared to the apps that we built before now if you stick around until the end of the video I'm going to be sharing with you my experience building this app various issues that I had to overcome various tips and tricks and really things that you must know if you plan on building a similar app yourself now before we get started as always the app that I'm about to build will be available for you to view and or clone from my patreon page and you can learn more about our amazing patreon Community using the link in the description below the video so the app that we're going to be building today is going to be a fiber clone and this is one of the more popular freelancer slash gig type marketplaces and this is an app that I also have pretty good experience with because I have used it in the past to order various gigs in various niches from tons of different Sellers and so I'm pretty familiar with the sap and additionally if you want to Branch out and add more features to this app later on and turn it into something else you'll be able to do it fairly easily alright first let's talk about the different screens the different pages the different flows that we have to implement in our app so I went ahead and downloaded uh screenshots from my Fiverr app okay and there are various flows and let's start with the home flow okay so here's what happens when you log into the app you're going to be on the page that looks something like this and on this page you can search for various service Services they also have the screen that shows you popular services and these are presumably categories that will have to implement in our app as well next we have this card here and I'm not quite sure what this is this could be just a car this could be a link to a Blog article maybe to some a knowledge based article and we'll be implementing that as well now if we scroll uh down on this page you're gonna be seeing this page right here and so we have what's new on Fiverr eye-catching AI design so these could be blog articles or some kind of Articles here and last but not least we have this recently saved and these are actual gigs so I went ahead and saved some random gigs just to show you what it looks like and basically these are cards that display various gigs okay now if you click on one of these gigs here you're going to be redirected to this detail page here okay this is your gig detail page and there are a couple of things happening here so we have the image here the gig image we have the seller okay so we have the name we have the top rated seller some label there title of the gig we have the body and then we have the tiers so gigs typically have various tiers okay so I'm not sure if there could be more than three tiers and actually I don't think there could be more than three tiers I think three tiers is uh is typically the most that you can have for a gig and so what we're going to be doing is we're going to be implementing a three-tier gig system and so you'll create a gig and you'll create the three tiers for that gig okay so with the different prices different titles this is a tier title tier description etc etc and this is what happens when you scroll down on this detail page okay so you see more information about um you know the delivery all these features of this particular particular tier etc etc now let's say you're searching for something so you're searching for services this is the screen that you're going to be redirected to this is the search screen right here so let's say you search for nft you're going to be redirected to a screen that looks something like this we have related results we have shop by and these are presumably filters here next we have a list of categories that your search results fall into so I have a bunch of search results here and all of the search results fall into these categories okay so nftr nft development Community Management etc etc and then we have a list of search results okay so these are your cards get cards that we kind of saw here except they're slightly different okay so we have the image on the left here we have the image above the description okay so that's the home flow and if you take a look at the nav bar here you will see that there are various flows okay so the next one that we want to discuss is the inbox okay and this is your real-time chat communication uh type functionality and so the idea here is that when you create an order so when you order a gig you'll be able to communicate with the seller so if you want to ask them to you know clarify something etc etc and so you're gonna have this chat functionality built into the app and we're going to be implementing this as well next we have this category view okay so this is your view where you can also search for services but this time you have various categories so if you are not yet sure you know what to search for or you are not sure what kind of gig you're looking for you can start with a category uh type flow so you can begin with a category okay so maybe you were you know you want to do Graphics and Design maybe you want to do digital marketing writing and translation and so you have these categories here and then on the right hand side we have interest okay so when you click on any of these categories you're going to be shown a page that looks like this so for instance if I click on Graphics and Design I'm going to be seeing this page I'm going to see a little uh category image followed by the title a little description and then I'm going to be seeing more categories so logo design brand style guides Etc and let's say I click on logo design and I'm going to be redirected to a page that looks like this so for logo design you know I'm gonna have the filters I'm gonna have you know the type of gigs or some kind of um grouping and last but not least I finally have the list of gigs so this view here is very very similar to this one here very very similar so as you can guess uh once we develop one of these we're gonna duplicate it and use it uh to create the other one so we'll probably do this one first and then we'll use that one we'll duplicate it and will use it as a template to create this view here okay so that was the category View and you also can Browse by interest so the exact same flow except these are interest now so if you choose interest you have your interest you can choose interest and if you click on choose interest you're going to be shown a page that looks like this so if you select any of these interests you're going to be redirected back to this page except it's actually going to be displaying your interest so you're not going to have this button again okay so here you can pick the interest and once you pick your interest you're going to be seeing the the um the appropriate gigs okay next we have the order management screen okay and on this screen you can see all your orders so I have completed orders and I have canceled orders and the idea here is that you will see what's happening uh with you as a buyer so let's say you're you know maybe you're purchasing a bunch of gigs and you want to know what's been happening with them right so this is not kind of like chatting you're not exactly chatting right you don't need to chat with a seller in order to have the gig completed but you will be getting uh order statuses as your gig progresses from you know start to finish okay so when I purchase a gig as a buyer um you know I'm gonna see statuses right I'm gonna say Okay purchased I'm gonna see that you know the the seller the the service provider uh has started to work on the gig maybe they need clarification maybe I you know I want to clarify something all of that is going to be happening right here and so this is very very important screen and we definitely need to implement it correctly and last but not least we have the profile page okay so this is your standard profile page where you know you have various preferences account etc etc not much really to discuss here because these profile pages are standard on pretty much any any app out there okay so every app that we've built on this channel has a profile page okay so now that we talked about the UI the different flows the different functionality and let's talk about the database structure and schema okay so if we come over here we have a database structure and remember we are using Super Bass okay so when it comes to database structure and schema this is going to be radically different uh compared to our previous apps where we used Firebase firestore DB so super bass is a relational database which means you need to create different tables of views I'll link them together in a way that gets your data to the UI as we're going to see a little bit later when we start building that and so when it comes to your database structure I have one rule that I follow all the time I start with some initial tables but I give myself the freedom to modify the schema and the structure as I go along okay and you probably might have noticed this happening uh in my previous apps I typically start with a bunch of tables but then I end up having a lot more tables and this is completely standard this is completely normal because you really can't anticipate you know how the app is going to look and what kind of you know tables or data be structured you need later on that and so having said that these are our initial tables so we have the users table okay and this is going to be both sellers and buyers so the user stable is provided to you uh by Super Bass so you don't have to create this okay if you are using authentication which we're going to be using for this app users is going to be automatically provided next we have the gigs table okay and this is going to have our gigs okay so um this is and so sellers typically create gigs and buyers will be purchasing the gigs and so me as a buyer I can purchase many gigs and a seller can create multiple gigs okay so this is very important to keep in mind because you have that relationship one too many from the buyer's side and one too many from the seller's side okay next we have the orders and so the way to think about orders is that you have a gig that is a template and the order comes from that gig okay so you might have like you know this gig like do some translation and then you can you can have multiple orders from multiple people um associated with that gig so keep that in mind it's very very important to start kind of you know creating these relationships in your head okay and once again sellers and buyers can have multiple orders so I can say you know I can have multiple orders from different gigs as a buyer and the seller can have multiple orders from their own gigs from different buyers so these are not going to be the same orders okay and last but not least we have categories okay now categories unlike the previous tables especially gigs and orders is going to be made mainly eightsop level categories right because when you think about categories um they're not really associated with anything it's just like it's just plain data whereas gigs and orders you know they have links to something like a gig is going to have a link to users because a gig by itself cannot exist an order is gonna have a link to gigs and it's also going to have a link to users as well because just an order by itself is meaningless whereas categories on the other hand you know categories by themselves are just Standalone now what we decided to do here and judging by the uis remember we have this UI this category view uh we decided to create a two level structure so you're gonna have your top level categories and then you're gonna have your second level categories like child categories and the way that we're going to be doing it is we're gonna have one category table but we're gonna have a field there called parent ID and so if a a record so if a category record inside this table does doesn't have a parent ID that means it's a top level category it doesn't have any parents because it's top level category whereas if another record a category record has a parent ID it's a child category and the parent ID connects that child category to the parent category and that's kind of what we have and this allows us to use one table for both top level categories without parents and children child categories that are linked to a specific uh parent and so we don't really need to have multiple tables for parents and children uh in this instance this allows us to have a very kind of um concise organizational structure if you will and so this is our initial database structure and schema to get us started and now we are ready to go to the next step all right so in this section we are going to be building the database so we're going to be setting up our project creating various tables per relations things like that and what's interesting is that we're going to be using Super Bass for this specific project and Super Bass is very very different from firebases firestore which is what we typically use for our apps so everything regarding the database setup is going to be drastically different in any case let's get started so you want to head over to superbass.com and you want to create your free account I already have my free account so I can go to my dashboard and here in my dashboard I can create a new project so I'm going to click on a new project right here I'm going to call my project project one and then I'm going to enter password so I'm just going to type a password right here next thing I want to do is I want to click on create new project right here and I need to wait a few moments for this project to be created for me all right so here I am logged into Super basis dashboard and because I don't have any projects I'm going to click on new project here and I'm gonna give my project a name we're gonna call it Fiverr DB and I'm going to give it a password as well next I'm going to click on create new project and I need to wait a few moments for the project to be created all right so my project has been created and the next thing I want to do is I want to create some tables for this project so I'm going to go into the table editor here and I don't have any tables so I'm going to create a couple of tables now what tables do I need well if I go to our database schema we have our users uh table but this user stable is going to be created for us automatically as part of authentication as you're going to see a little bit later in the video besides that we have the Geeks table we have the waters and we have the categories so let's begin with the gigs table first come back here let's call it gigs everything else is optional we're going to enable a row level security and we have various columns now with Super Bass uh you have very various fields or columns that are included by default so in this case we have the ID which is the primary key which is very very important and then we have the created ad which is going to be automatically filled in with the proper timestamp every time that there's a new record that that uh that is created this is very very useful but we still need a couple of custom columns and more specifically we need maybe the name of the gig and so we're gonna have the name we're gonna set it to text or maybe a description as well so description actually let's just call it this uh for description and we have the name and the description so this is fine for now obviously I'm going to be modifying these tables and adding the various uh pieces of data a little bit later but right now I just want to create something so that we have something to test so I'm going to click on Save and it's going to create this new table for us all right so we have this one table created let's do the same for the other tables as well come back here we have borders and we have categories so let's create orders and let's create a new table let's call it borders and so let's see we have the ID created at now for the orders um typically it's going to get information from the actual gig right if you think about the waters the gig is the template the orders are like based of that gig so we don't really need a lot of things for the water specifically but we do need notes right we do need nodes we need like the gig ID and things like that so let's put in the notes here let's make a text and I'm also going to add the gig ID because we need to be able to link to the gig so that you know they're linked together so that you know if um that the orders uh table needs to get some information from the gig that it was created from it can get that data so we're gonna have that here and we are are going to use the int 8 which is the the basic type used for IDs here okay so that's fine for now like I said uh later on we might add a couple of fields here and there we're going to hit save and one last table is category so again categories is an important one because of the way that we're going to be structuring so you would say both categories and we have ID created that now the thing about categories is if you recall if you come back over here uh what's gonna happen is we're gonna have kind of this this main category and then we're going to have subcategories okay so um I noticed that with Fiverr right so like programming and Tech we might have you know website development under programming in Tech and we might also have Website Maintenance under programming in text so we need to uh preserve that relationship right it's very very important so how are we going to do that well there's lots of ways of doing it but the simplest way is to have another field that's going to be part of categories and that field is going to be called parent ID and if that parent ID is set to something that means this is a child category of the corresponding parent category okay so we have the idea we have we have the created ad we're going to have the name and this is going to be text we're gonna have a description this is going to be text we're also going to have um I think for now that's fine name description and then I'm gonna give it a parent ID so this is going to be parent ID and this is going to be the ID of the um the category that is linked to okay and so the way that this is going to work is if a category does not have a parent ID it's going to be a top level category but if it has a parent ID then it's going to be a second level category we're only going to have um two levels here okay so let's go ahead and hit save and have that table created all right so now we have three tables here and we also have the user stable which is created automatically for us so if you had over here and you go into oauth you're gonna have the users table and in this table uh you're gonna have a collection of users that are going to have login access to the app so we're going to be using Super Bass authentication as well and so what we want to do is we want to also create users here now before we finish with our tables there's one last thing that we need to do for each of the tables and that is enable the right permission so if you recall uh we have RLS which is row level security and so that means that it's going to have you know a certain type of security on a roll basis just by default nobody can access this data because we haven't set the proper policies and so that's what we have to do so if you click here we have RLS enabled but we don't have any policies created yet and so what we can do is we can create a new policy once you click here you have a couple of options I'm just going to go for full customization here and I'm going to select all and I'm going to give it a policy name so I'm going is going to say allow all again so this is going to allow all access right so read and write axis and this is fine for testing obviously for production you want to make sure that you have the right type of policies and the right type of row level security but this is fine for just getting the app up and running okay so we're gonna type through here and then I'm gonna click on review and it generated the policy for us like the SQL statement here and I'm going to click on Save policy okay and we need to do that for all the tables okay and so I'm gonna go back to the other table as well we're going to set this policy for gigs as well new policy for customization allow all and this is going to be true review save policy and the same thing here all right so now we have three tables and each table has a policy that essentially allows all access okay so all read and write access and this is fine for testing our app now the next thing I I want to do is I want to head over to authentication and I want to create a user so I'm going to click on users right here and I'm going to add a user manually okay I'm going to click on add user and here I'm just going to create an account here and we're going to Auto confirm the user create user okay and the user has been successfully created now this user is going to have a user ID which uh later in the app we can link to various things okay so you know gigs orders we can use this user ID to uh create a relationship between different pieces of data alright so now we have the tables we have the user and one last thing I want to do is I want to add some dummy data to our table so that when we create our first screens in flutter flow we'll be able to see some data let's go ahead and insert a row so I'm just going to fill in the name and the name we're going to be using Graphics and Design and I'm going to create a category called video editing okay so I'm gonna come back here and I'm gonna say video editing something like this and this is going to eventually have a parent ID of that main category that we're going to enter later okay so I'm gonna hit save and let's go ahead and create another category real quick uh let's say translation okay so come back here add another row translation translation all right so we have here two categories for now and this is enough let's do the same thing for gigs real quick insert a row and for this gig let's take a look at some of the screens and see what kind of data we can fill it in so here's the name and here's the description so let's think of a name I will edit your YouTube videos for you uh I am a great video editor I will edit all kinds of videos for you and let's create another one real quick insert a raw translation I will translate your documents I'm an experienced translator who will translate all kinds of documents okay all right so now we have some data and categories as well as gigs and this is enough to kind of get started okay so now that we've set up our uh Super Bass uh database with along with tables along with some data we are ready to start building the app as well as building the initial screens and at least displaying this data and trying to get everything together so I'm gonna head over to Florida flow which is my favorite no code Builder and we're gonna create a brand new project so I'm going to click on create new and I'm gonna call this Fiverr app and I'm gonna say create blank we're not going to be using Firebase start building okay so now we have our initial app here created the next thing we want to do is we want to go into settings and we want to configure Super Bass so if you scroll down you have have integration Super Bass enable Super Bass and now we need to enter a couple of fields so API URL and a non-key and you can get that by going into your projects project settings here and you can go into API and you can copy this URL right here paste it in here go back here and copy this a non-public okay you want to make sure you copy this one not this one okay copy that paste here next you want to click on get schema and it pulls all our schema so all our tables uh all the fields everything so as you can see you have categories you have this primary key here you have this created ad in gigs and orders okay so we now have the initial stages of our app that has been configured with Super Bass okay so now we can start building the initial screens and displaying the data all right the next thing that we want to do is we want to configure authentication okay so we're gonna come here click on authentication you want to enable authentication for 10 application type you want to enable Super Bass and now you need to set up your page so the entry page is going to be the login page it's going to be the page where the user needs to log in and the logged in page is going to be the home page okay so we only have the home page so we can select home page here but we still need to create the login page so we're going to come back here check out our Pages click here and we want to pick a login page so for the login page I typically use this page right here there's all kinds of nice pages that you can use but I like this page or this page in fact let's just use this page right here and let's say Call It login create page and now we have the login page here and so you can sign in and sign up as well for our app now I'm going to disable Google just to keep things very very simple next thing you want to do is you want to go to settings and integration and you want to select this login page as the entry page here and now we are in in business so now we can actually run our app and log in as the user that we've created in Super Bass and see if that's gonna work and if we're going to be redirected to the home page that is the first step you always want to be testing to make sure that you catch the errors early on okay so we're starting our app let's wait a few moments for everything to kind of compile and start uh executing all right so here's our app up and running let's go ahead and log in and now as you can see we have successfully logged in using Super Bass authentication using the user that we've created back in Super Bass so at least now we know that the app works authentication Works things work at this point and so now we can actually start building the app and start building the initial screens all right so the first thing that we want to do is we want to start building with this home page here so so this whole page right here is essentially you have a search bar so you can search for all kinds of services right off the bat and then you have this list view here that lists uh popular services but it lists the categories uh essentially the categories of the popular services so like logo design AR artists logo animation in this case and then we have what looks to be like a I don't know some kind of a card maybe a link to a Blog article it's not really clear and then if you scroll down there's another list to you in this in this instance this is what's new on Fiverr and then we have recently saved gigs here okay so there's a couple of things going on here mainly a couple of list views um you know some kind of a card here and uh save the gigs as well right so let's get started and start building out this page here alright so the first thing we're gonna do is we have the home page here and I want to rename it to let's say home page okay now the next thing I want to do is I want to create a special container special car for these uh categories to display them as a horizontal list view okay so we're going to create a container and inside the container we're gonna put a list view okay now we're gonna click on this list here we're gonna make sure it is horizontal here okay and if we go to The Container this container has a bounded width we're gonna deselect that and we also have a height and the height will depend on the individual cards so we're just going to leave it at 100 for now and here what I want to do is I want to add a card that's going to represent the individual category so we have a card here which is essentially a container and now let's design our card so if you take a look at the cards here we have an image and we have the name of the category so categories need an image and then they're gonna display the name and also you have this header here popular Services okay that we're gonna add above all this okay so right now inside the card let's set a column and inside the column let's add an image and let's add a text okay so now it's going to be a line like this and let's go ahead and fix this so it doesn't take up the whole um the whole screen basically and that's because of this image width we remove that and so what we want to do is we want to set a bound on the image so you can do something like 75.75 that looks pretty good you can do 100 by 100 something like this that looks pretty clean maybe we set the height a little bit yes something like this so we have the image here and the other thing I want to do is I want to give it some padding so it doesn't uh just take up the whole Space here so something like this that is starting to look good and the next thing I want to do is let's go ahead to our cards let's go to our container and we can increase the height of the container okay so we can make it something like 130 okay and now everything is displayed properly okay and we can also give it a little bit of padding on the sky column right here maybe five okay that looks pretty good that looks all right let's go ahead and fix this up okay so that's starting to look nice okay that looks pretty good let's see if we can do something like this and we'll we'll play around with it we'll see what happens and so now we have a list view that will display the categories okay but before that we need to have this popular services and seal so that's going to be part of this container here but it's going to be above the list View and so what we can do is we can create another container here and this container is going to contain the roll the header essentially that we're going to be displaying various information for this container so I'm going to add a row right here and we're gonna expand maximize the height as well and this row we're gonna have text we're gonna have text and we're gonna align it on opposite ends something like this let's go ahead and add an inner container here up with it container and then give it some padding so that it's nicely padded something like this okay perfect so now we have this container up on top and this is going to say popular services and this is going to say seal all popular services and this is going to be a little bit bigger font face or maybe something like this and this is going to say Co seal something like this okay that looks pretty good and all we can do is we can go to the list View and we can populate it with the data from Super Bass so click here click here super bass query table is going to be categories list of rows you can do single row as well let's go ahead and do that and now it's going to be populated like this one's going to display like this now we don't have images in the database we need to uh populate it with some images but right now we can display the name of the categories right so categories row we can do name okay all right and in order to display the images let's go ahead and up update our category records with a couple of random images just to show you how that works we're gonna go back to our database go to our table editor here go to our categories and we have these categories let's go ahead and add a image URL here we're gonna insert the new column image URL and the type is going to be text okay save and here I found a random image we can just save this image right here go back to super best go to storage create a new bucket here let's say we call it images you can just do public bucket right here click save and then we can simply drag and drop our files there okay so this is our image right here and we can get the URL so get the URL then we can go back to our table editor here categories and we have the images URL so I'm just going to paste the image here image right there and I'm gonna do the same for the next record here let's come in here and maybe something like this download that right there go back to our storage and upload the second image okay and this is the second image get URL go back to our tables and paste the URL right there okay so now we have the images URLs that we can use in our app go back to our app and go uh come back to settings Super Bass right here and you want to get schema and it's going to get the new schema with the image URL so we can go back here come back here and we can actually set the path so categories row and there's the image URL okay so now if we run this app we should have this list here this horizontal list view showing us listing us the the categories that we have in the table so let's go ahead and run this app just to make sure things work all right so here's our app let's go ahead and log in using the account that we've created all right and we've just logged in and we are seeing the home raise your case so you have this popular Services it says seal and we are seeing the initial two categories as you can see we see the images as well as the title so these cards are working fine we just need to align it correctly so that it's aligned to the left but if we have more and we will have more categories uh it's going to take up the whole the whole screen right it's going to take up the entire width so it's not something we need to worry about we just we will need to scroll at that point so this is fine let's go ahead and add that main big card that fiber has and then let's go ahead and add another container that's going to have the saved gigs as well there's going to be an interesting flow of how we can get that data and kind of organize it okay so let's go back to our app and let's create another container here and one thing that's nice to do in this case because we have a lot of containers lots of things happening is you want to kind of name this containers so I'm just going to call the this main card and this container here I'm gonna call this our list view okay so we have this list view we have this main card and now we can Implement that uh main card our container and what does it have well it looks something like this there's an image some text and that's about it and that could be linked to some blog article or I don't know some knowledge base article things like that so let's go ahead and do that right now all right so we can do is we can create a stack inside and inside the stack we're gonna have an image and we're also gonna have a piece of text that's going to overlay on top of this image and we can actually overlay it like this as you can see there's the text and let's make it a little bit lighter color so that you can see it okay so there's the text let's go ahead and remove the constraints of this card and now it's taking up the whole Space well almost um let's go ahead and fix this image right here remove this remove that okay that looks better all right so now we have this card here with the image background let's go ahead and Center it as well we can just wrap it inside of a row and center the row and this thing is centered and let's go ahead and give this text a little bit of padding okay so we can do something like this and now it's it it's padded from the corner here kind of like we have this thing here right so let's say explore beautiful work pick for you okay so let's go ahead and change that explore beautiful work picked for you okay and then we can wrap this text in a uh kind of a box here set the width remove the height and and remove the color as well okay and now we have this thing nicely bounded by this container that we have on top of it and we can also change the container a little bit to 50 something like this and now it's starting to look like what we had here right except this image obviously has a gradient so we might have to post process the image get it to have a little bit of a gradient as well and we can also resize the image a little bit so we can make it a little bit wider something like this yeah that looks pretty good and we can also Pat this row a little bit as well from the top so there's some spacing something like this and we can also give this row a container we can have another uh external container there so we can wrap this in a container and that container we can do padding we can do all kinds of interesting things so we have this container right here and we can give this main card some padding as well so we can do something like 15. okay so now you have this beautiful container there and you have this car then you have a nice kind of white background color so that it kind of sets it apart so kind of what we have here and last but not least let's add this recently saved card and this is going to be easy because it's the same essentially the same design the same format as this top popular Services card and it even says the same thing in the header so recently say see all popular Services you all so we can just copy and paste that and change the contents of this car so we're gonna go back here we can just select this whole thing here copy this so I can just go in here and I can just duplicate it and I can simply rearrange it right so this is our copy right here I can just put that right there and now it's at the bottom and we can change what it says and what does it say it says recently saved so that we don't mix them recently saved and see all is fine and now we can also copy this list view we can just duplicate it right here we have this list you here and we can just put it below it okay so now we have the second list View and I can rename it as well list view uh say okay this is listview save this is populist through services so that way we can see exactly what's going on this is our main card this is main Card roll and here is our recently saved uh header recently okay and this is going to be our yeah recently saved gigs now in order to display these recently saved gigs we need to create another table that's going to have a relation of gigs that are saved by different people okay so let me go ahead and show you how that's done we're gonna go back to Super Bass and we're gonna create a new table and disable is going to be called gigs save and we're gonna have ID created uh then we're gonna add a column and the First Column we're going to be adding is going to be the gig the gig that's being saved the gig in the question so we're going to say gig ID and this is going to be a foreign key so we're going to edit our foreign key relation and we're gonna link back to gigs because it's a it's a key that's link to another table so this is a Geeks key and ID okay we're gonna hit save next we're gonna add another column here and this column is going to be the user so this is going to be user ID so who is the user that saved this so we're going to come here we're going to add a foreign key or and this is going to be the users table okay and the column that user is going to reference is going to be the ID and this is the user ID that we can access throughout the app so we're going to hit save and now what we have is a special table that is going to have the various uh gig IDs that are saved by a particular user okay so you know if I save a particular gig there's going to be the ID of that gig and the ID of the user okay so we're going to hit save here this is a special uh relationship table or relay relation table so we're going to wait for this table to finish saving and finish creating all right so now we have the special relation ship table created and this is kind of what we need to do uh anytime we want to have a relationship between different tables different entities this is how you do it in a relationship type database such as Super Bass okay so I can add a new row here and I need to know the gig ID and I need to know the user ID so let's go ahead and find a gig ID here and yeah it's one and let's go ahead and get the user ID here so if we go to auth we go into users and this is the user ID of the only user we have so I can just copy this cell content and go back to our public schema go for Gig saved and I can insert this new relation here okay so gig ID is one user ID is me okay so this means that I save this gig that has a primary ID or you know the main ID the primary key or one okay so now we have this so now we have one saved gig and obviously as you can imagine when you start you know when you start building this app your users will start using the sub you're going to have a lot a lot of roles because I may have like you know 26 gigs somebody else might have 30 and that's that's kind of what you have to do this is called a relational database now before we test out our app we need to make sure that we have the proper policies for this new table that we created here so if you click on RLS policies here you need to create a new policy just like we did uh with the other tables so I'm going to say allow all this is going to return true review save policy and now we can run our app get the schema and we have this gig saved here okay so we have this gig ID and we have the user ID okay so let's go ahead and uh display the saved gigs here at least display something yeah so we're gonna go to our list view here select this list to add it back in query and we're going to be doing gig save and we can do a filter here right so we can add a filter and the user ID we want it to be equal to us right and if you click here we have this authenticated user and user ID okay so we're gonna hit this and we should have one element if everything works as expected and here we can remove this field so that the app does not have any issues let's take a look yeah so this has an issue because we don't have the image for the gig yet but we're gonna we're gonna have that as we continue building the app okay so we should have one item here okay let's go ahead and run this up create a new session right here all right so here's our app and as you can see we have one item here which corresponds to one record that we have in our database so if we go to our table and we go to our gig save we have this one right and we're filtering by this user ID of the logged in user of the authenticated user which is me in this case and so we are getting this record here uh being displayed of course we need to get the right data we need to get the gigs image and the gigs are name as well and a bunch of other information like um you know the owner of the gig etc etc and that's what we need to do right now now we do have a minor problem here is that when we are trying to display the gigs the saved gigs we need to display a lot of information right maybe we want to display the name of the gig maybe the person who is uh who created the gig just like what we have here so if you take a look at the screen we have these images here and we might have the person we have ratings we have a lot of information and the issue that we have is we're pulling data from this gig saved and gig saved only has the gig ID right so we have this gig ID we have the user ID but we don't have this additional information and so what we need to do is we need to follow this gig ID back to gigs and we need to pull up additional information so we have this relationship we have the gigs we have the gigs saved but we only have the gig ID and the gig save so we need to take that gig ID go back to gigs and pull up the necessary information okay and there's always a couple of ways of doing it you can store this information here but it's not technically the right way of doing it when it comes to relational databases uh the best approach is to create a view that's based on the data that you have here but this view gives you additional data and so before we can even display this additional data we need to have this view created where we can query it just like a regular table but that view is going to have this additional pieces of data and so I'm going to show you how to do that but before we do that we need to create some additional fields on this gig right so if you take a look at the screen here these gigs they have images and so at least we need another field that you know has images okay and so let's go ahead and create another field here another column that's going to contain the gig image okay so I'm just gonna say image here and we are going to give it a type of text because it's going to be a URL and we're gonna hit save okay and now we have this new field created so I'm going to go ahead and find some random images for these gigs all right so here's the first image for one of these gigs let's go ahead and save it and here is a another image here let's go ahead and save this right there okay let's go ahead to uh let's go ahead and jump back into our Super Bass and go back to storage and upload these images alright so here are the files you can click on that get the URL let's go ahead and add the corresponding URLs to our tables let's go back to um gigs and let's go ahead and add this URL here and this second URL this m studio right here and paste that in there okay and so now that we have the images for the individual gigs now what we need to do is create another view that's going to be based on this gig save but it's going to have this additional information and so the way you create a view is by coming into here as a SQL editor here and you can create a view by entering a query so you have various templates quick start so you can click on template and you can add a view add a column so you can do all kinds of interesting things you also have quick starts that essentially come with a you know it creates a table all the countries in the world we don't need any of that we just want to create the view so you can just go to templates out of view and here it creates a random view for you now what's beautiful about Super Bass is that super bass also has AI which is probably based on uh GPT for GPT 3.5 and so you can actually tell it what you want to happen this is very very convenient because creating views and SQL it's very uh it could be very painful right if you don't have experience with it it could be a mess so you can actually come in here and you can sell Super Bass AI exactly what you want uh to happen what kind of view you want to create so I'm going to do that right now all right so here's my prompt here create the view based on gig saved that displays all the fields and gig image so you can do even plus gig image and let's go ahead and execute at this prompt here it's thinking let's see what it's going to come up with and this is what it came up with so it's showing you before we had nothing before and showing you what it came up with let's go ahead and do accept change and this is what we have so it creates a view gigs saved view as and then it pulls up all the data from gig saved and this is exactly what we want because it's pulling all that data and it's expanding it right and the way it's expanding it it's it's joining it about back on the gigs table so it's taking gig save it's connecting it to gigs on that ID which is exactly what we want and then it's pulling in the data and this is the data that is going to uh show it to us right it's going to select the ID created that gig ID user ID and then the image so it's exactly like gig saved but we have the image which is exactly what we want which is exactly what we want so we're gonna click on run and that's hopeful is going to create a view for us so it says here success no rows return so this is Success because this is a create view we're not trying to get any data and now if we go to the stable editor right here you're gonna see a new view here right that says Geeks saved View and when you click on this view you're gonna see all the elements you're gonna see all the data here right and Views are read only because they're kind of a window it's like a window into your data you're not working with the data it's like you're looking into a window and you're seeing that data right the storage the warehouse whatever you want to call it but you can't you can't you know you can't edit the view right the view just gives you a way to get the data and so now we have this gig saved view which is essentially gigs saved which additional data in this case we have the image but we can create the new view we can modify view we can do a lot of interesting things so if you click on definition you're going to see this view here and as you can see it's read only so you'll have to create a new view if you want more information but this is easy right you know you can just specify more fields that you want and so now that we have this view what we can do is we can go back to our app pulling data from that view right so we can come in here go into Super Bass here get schema that's fine and now we have a read-only view here okay so now we can query this view like we are querying tables okay so we have this image but we also want the name of the gig as well for now we probably want other information but for now we want the name as well so I'm gonna go back to our view over here I'm gonna go back here and here's our view and I'm going to add another field I'm going to say G name and it even um photo fills it for me okay so I'm going to execute this right here and now it's telling us gig saved you already exists so I'm going to create a new view here and now we have another view so we're going to go back to our database table editor and we have the second view here and so now that we have these two views we really don't need to views and so what I can do is I can do a drop View and I can type in the view so this is going to be this view right here and then I can create a new view by the same name so we're going to execute this query here and it's a success no rows return and if you go back to our table editor and here in our table view we only have this one View and if we click on this one view here we will see all the data that we need in order to displayed in the UI so take a look at this we have the user ID we have the image and we have the name so we are getting data from multiple tables and now we have this data ready and good to go into our UI flutter phone so that way inside of Florida flow we don't need to mess with this data we don't need to do multiple queries we don't need to you know pull data here then pull data here and all of this we are doing it in Super Bass where it it should be done and so now we can go back into our app we can do a get scheme or refresh our schema here and now we have this gig saved you and we have images and we have name of the gigs that are saved by the locked in user which is perfect so now we can go back to our app go to this list view here add it back in query and we're gonna select geek save view confirm and what we want to do is actually we have that filter there we still have the user ID filter but now we have access to images and to the name of the gig so let's go ahead and change the images here click save view image and this name do that as well name okay so now let's go ahead and restart our app and hopefully we will be able to see that one gig that's linked to me so that one gig that I hypothetically saved so let's go ahead and run this app all right so here is our app and we have this popular Services that's obviously going to fill the rest of the row here we have this card and we have that single uh gig that's saved with my user ID so this is the gig that I saved here and obviously if I say more gigs they're going to be there but the important thing here is that we are getting all the information that wasn't in that table and this is the first big lesson of dealing with relational databases they are better at some things but they are more painful in others so you kind of have to pick and choose and so as we continue building the sub you're gonna see see me expose some of the other features and techniques when it comes to relational databases such as Super Bass I really hope you're enjoying the video tutorial so far this type of tutorial was requested by many of you who wanted to see a complex built with Super Bass now if you're interested in building apps yourself without writing a line of code whether they're mobile desktop or web apps then you should definitely check out mastering flutter flow which is my premium training and Community for people who are interested in building no code apps with flutter flow the easiest and most powerful no code Builder out there when you join mastering Florida flow you'll get access to high quality video modules that work is step by step through Florida flow's key Concepts and features showing you step by step how to assemble the app of your dreams additionally you'll also get invited to our private Discord Community where myself and other members of our team will help you with any app development issues that may come up regardless if you're a beginner or a seasoned Dev who needs another opinion we've got your back there is really no better time to build the app you've been putting off for a while join master in Florida flow and make it happen today I sincerely hope to see you inside the community alright so the next thing that I want to work on is this detail page because from anywhere that you click on any gig that you click on it's going to redirect here and this is where you can learn more about the gig you can learn about the services offered you can learn about how much it costs and you can ultimately order this gig as well so let's start working on this page right here so this page has an image it has the seller the person who is offering the gig the title description and then some tiers now these tiers uh will have to have a unique way of kind of organizing them by creating another table and then creating another view and this is something that I see right away so this is all going to be covered right now okay so let's go back to our app and create here a new page and we're going to create a blank page and we're going to call it detail okay create page this is our detail so this is our gig detail now the next thing that we need to do because this is going to be a detail page we're going to be passing a parameter to this page so we want to configure our parameters because we're going to be taking this parameter and getting all the uh the gig information okay so this parameter is going to contain the gig ID we're just going to have gig ID like this and gig ID is going to be an integer okay and it's going to be required right because without the gig ID we won't be able to display anything and at this top level we can do a query and get all the gig information right away so we can just come in here and here we can do it back in query at top level super base query and we have gigs here and so what we can do is we can select have a single one add a filter and we are going to be doing ID equals to the parameter the parameter that we're passing and this should be something like this let's double check that filter and that should be gig ID right there okay so now we're passing this gig ID and then we're doing the uh the query the select statement essentially and that gets us all the information so now we are gonna have all the information having to do with the gig assuming that we passed that gig ID the next thing we want to do is start building out the elements on this page so I want to create this image right here that's the first thing I'm just going to add an image image right here let's go ahead and expand it like this and we'll resize it a little bit later next we need this thing here that displays the seller information okay very very important so we're gonna do is we're gonna have a container right here we are going to remove the width so that it expands um to contain all its elements and now we want to populate it so let's go ahead and add a row row right here and let's go ahead and add an image this is going to be even like a circle image because it's an avatar and so we have the savitar next we have this thing and this thing so this is a column okay so we need to add a column and this column needs to be expanded right because the Avatar is just taking up the minimal amount of space and this thing is taking up the maximum amount of this row so we want to add a column here and inside the column we're going to have two text Fields here and this whole column we want to make it expanded so something like this and we want it to be left Justified so something like this and this is going to be the name of the seller and this is um you know their status so in some cases you know they're going to be a top rated similar in other cases there's probably not nothing going to be displayed there all right so we have that let's go ahead and make this can the height of the container like 50. yeah that's a little bit better and let's go ahead and have this scroll something like this okay so we have this image let's go ahead and make this image a little bit smaller so something like I don't know 100 okay that looks better alright so now we have the sub header here okay so we have the sub header and it looks pretty good take a look we got the circle image it looks pretty good let's maybe align that Center something like this and this is going to have the name of the seller now because we are querying our gigs right so if we go to our gigs table right here uh We're not gonna have the user off of the gig we're gonna have the gig information but we're not gonna have the user so this is our gigs table and so obviously we just have gig information okay we need need to have a user ID here we need to have the user responsible for this kick so we can pull up their information and we don't have that here and so what we want to do is we want to add another column that's going to help us to link to that users table so we're going to click here insert a column user ID now the type of the user ID typically it's going to be in 8 for the tables that we create ourselves but for the user table I know that it's a different type it's this uuid and so that's what we're going to select here click save and that's going to create that and that way we can link it so why is this uuid well if you click here you change to the auth schema here and you click on users you will see that this for the user stable the primary key this is the primary key with the key um symbol here the type is uuid it's not int 8 okay so this is important to understand so if we go back here public anytime you want to connect with the user you you want to make sure that you have the right on the right key type primary key so now if we go into gigs we are going to have the user who actually created this gig right the owner of that gig okay go ahead and create another user so let me go into authentication let's go ahead and create another user and that way I am the buyer and then there's another seller so I'm going to create another user right here this is going to be Rob rob.com Rob Rob and we're gonna create this order confirm and now we have this user and this is the user ID right here Rob so I can just click I can copy this go back to our tables here go to gigs and assign these two gigs to that new user just for testing so I'm gonna do this and I'm going to do this okay so now we have two gigs that um I favorited because they're in Gig save so these are saved gigs but they're owned by this raw person okay and so now uh when we need to display this information here we need to create another view that pulls this data as well so this the view that we have right now the query that we have right now does not give us this data and so we're gonna do that in a little bit but right now let me just finish um you know creating this page over here so we need the title we need the description and then we also need the tiers as well uh followed by tier description right so this is different this is tier amounts tier title tier description delivery days all of this is going to be on a specific tier okay so let's go back to our app let's create another container here and let me let me just organize this real quick so this is a user container this is going to be the zyto cytal container something like this and then let's go ahead and clean this up and let's go ahead and add a text go ahead and change the height as well and let's go and see what they have so their text is going to say ah the name of the um the name of the gig okay but let me go ahead then uh so let me go ahead and add a row here I'm gonna wrap it in Aurora which in a row that way it's not it's easier to organize and you have more control over kind of how things are being displayed let's go ahead and change this font a little bit bigger yeah something like this that looks pretty good now it has this division we can kind of do that right now we can just set it on this container here all right let's go ahead and give it some padding this container pattern from the top a little bit all right the next thing we want to do is we want to display the description okay now this container has some padding and so what we want to do is we want to have the right padding we want to kind of do it correctly and for that what we can do is we can create another container so we can do is we can wrap this in a column and then for this row we can actually create some padding on it right so we can do something like this and that's going to create this padding effect so we can do it maybe 20 okay that looks better and now we can create another row and in this row we are going to be displaying the description the gig description so add another text right here and then also create some padding maybe 20. okay so something like this so we have the title and then this is going to be the description so let me put the title and we have this information uh from our query right so we're querying this detail we have this information in gigs because if you go into gigs we have name and we have description okay but the problem is we don't have we don't have the data for the other stock so we will have to create another view and then we will have to get data from this new view and that is why I'm waiting to finish this page and then create the other view okay so the next thing that we have is we have this whole thing here and we have various tiers here okay so we have the first year the second and the third followed by uh various information and so what I'm gonna do is just to simplify things I'm going to add a tab bar right here and inside the tab bar we are going to be displaying different uh tiers but that specific uh tier that we have so we have this tab bar and inside the tab bar you have different tab bar views or pages and inside each view you will have specific information so this is the second tab bar so this is subbar Page this is the first one this is the second one here and then this is the third one right here okay so this is the name this is the label and then this is the the data here okay so let's go ahead and label the these so that it's easier to understand and so what I'm gonna do is I'm gonna say this is um this is tier one this is tier two and this is tier three okay and this is tier one tier two review and then tier three V1 so that way it's easier to kind of find the data that we're looking for all right so now we have this information the next thing that we need to do is we need to create the view that's going to give us all of this data okay it's gonna it's gonna give us everything because not only do we need the gig information but we also need the linked owner write the seller and we also need the different tiers that the seller is selling in and just to simplify things I'm gonna have three tiers I think three tiers is awesome it's uh it's a nice kind of um balance you know you don't want to have once here you don't want to have 20 tiers so three tiers is great and so the next thing I want to do is I want to create another table that's gonna allow people to have various tiers okay so let's go ahead and do this right now we're gonna create a new table now the name of the table is going to be Geeks geek tears and the First Column that we want to add is the gig ID now the type is going to be int a and we're going to create a relation right we're going to say to Gig ID right here we're going to click on save all right so now we have the gig ID and the next thing that we need to do is we need to have the information for each of the three tiers okay so I'm going to add another column and this column is going to be called tier one name and we are going to have the name here it's going to be text next we're going to have Tier 1 description this is going to be text next we have tier one price and this is going to be numeric and we now need to do the same for the other tiers as well so tier two name this is going to be text alright so I went ahead and created all the information for all the three tiers that we're going to be storing for that specific gig ID I'm going to hit save it's creating that new table all right and this is our new table right here so let's go ahead and create a couple of these here is right here so that we can display them so I'm going to insert a new row right here now the gig ID you can just click on select record and we can select a record this is really nice so I'm going to say for this translation gig I'm going to be creating difference here so the first Seer is beginner not a lot of translation and let's say this is five dollars because it's Fiverr next one is intermediate uh more translation and the price is going to be and last but not least is Advanced lots of translation and the price is going to be 50 Okay click save and now we've just created a new record in our tiers table for that specific uh gig which is the translation gig so this is the gig right here and you can even take a look at the referencing record so this is really nice when you link them together you can easily browse and see exactly what's happening here okay so this is our gig tiers say table now the next thing that we need to do is we need to create a view that's going to pull the stuff from the gig pull the stuff from the user and pull the stuff from the tiers as well so that we can display all of that on the same page all right so let's do that right now we're gonna come to the SQL editor right here and we're going to be creating a new query and we can ask superbase I to build this query and this is a really really nice feature just simplifies things a lot alright so this is the prompt that I came up with create the view that displays all the Geeks Fields via the gigs table adds all the data from the user stable via user ID adds all the data from the gig tiers and linked via a gig ID all right so let's see if that will work we're gonna execute this prompt all right and this is what it came up with so let's go ahead and accept this change and it has created a statement that's going to create a view called gigs full view which is the right name and so it's getting all the fills from G then all the fields from U and then a bunch of fields from GT now what is g u and GT well it's telling us right here gigs is G what users is you and geektears is GT and it's uh linking them in other words it's joining them on these IDs and as a result it should give us the data that we want all right so let's go ahead and run this uh SQL query SQL statement to create this uh this view here and it's telling us that column ID is specified more than one so we need to change uh the column idea so this GID I'm just going to say gig ID right here as gig ID let's try this again now it says created that let's go ahead and change that as gig created okay success no rolls returned so this view has been created and now if we go to our uh tables here we should see this new view this Mega view that was created so this is this gigs pool view let's go ahead and try to view this thing to see if we are getting the actual data that we need okay and there we have and we have one record okay so it's joining it but it's only going to get the data it's only going to display it in this view if all the data matches together okay if that makes sense and we all we have a couple of gigs but only one gig has the tiers okay so take a look at this this is the gig ID and now we have all of this information and as you can see we have lots of user information and in fact we probably don't need all of that user information we might only need like the name but we get the tiers we get all the data that we need and so let me go ahead and fix this view so that it's only um giving us the the information that we need so I'm gonna drop this View and this is nice practice drop view gigs full View and then we can recreate it immediately and here what I'm gonna do is uh do we really need the user information let me say and what do we need for the user information for the user information we don't even need that much we may need when it's let me take a look at the user we might only need like email or so I'm just gonna say email so that we know we're getting the right user that's it I don't think we need a lot of data so I'm gonna go back here and I'm gonna go back here and I'm gonna change this to email okay that's it so we don't need like all of this data so let's go ahead and re-execute this running success let's go back here and let's go to this gigs full view okay and so now we only have the email so now we just have the data that we need okay this is perfect and in fact this gigs full view we can leave it at that or we can have gigs detail of you I think I like gigs detail of you um a little bit better so let's go ahead and rename this gigs detail view re-execute this and I'm going to also put this here so next time it's going to be easier to um X execute this query because it's all the same gigs detail of you come back here gigs detailed you okay so now we have a very very nice view that gives us all the data that we need so it's going to be super easy to get flutter flow to display all this data it's going to be super super easy and so all we need to do is come back here go to Super Bass get schema and now we have this gigs detail View and it gets us all of this data isn't um you know sometimes I think that super bass uh relational databases are more complex but other times I think this is awesome you know my background isn't relational databases okay so I I started with relational databases and this is exactly the data that we need so now we can come back here and we can use this as our backend queries instead of gigs gigs detail of you and we have the filters and what are we filtering on we're filtering on the gig ID right so we're gonna say equal to uh the parameter gig ID that's it and we should get the information and so now we can display it so we need the Avatar we're not getting that uh but we are getting the email so let's go ahead and send just list the email for now so this row we're just going to have this email right here this is gig title uh gig name name right here description uh description here and now we can actually display the geek tiers which is awesome so this is the label this is tier one tier one name this is tier two name this is tier three name and then we have the information right so we're gonna go to this tier one this is the text for the tier one this is going to be the description but there's gonna be more stuff right there's gonna be more stuff it's not just gonna be this right so this is the text right here but remember if you come back here there's all kinds of things so we have the title description we have uh the price as well delivery day so we need to add a couple of other fields as well so let's go ahead and just display this information here and right now we only have the text and so we can actually uh create another view here okay so let's go ahead then wrap this in a column okay so now we have a column let's go ahead and add another text this is going to be the title here so this is tier one uh tier one name and then descriptions here one description and then the price right so we can have another and we're gonna we're gonna Fix It Up In Due Time right we're gonna left Justified we need to kind of arrange it but that's that's the easy part like I like to say and then tier one price and then because this is a numeric numeric we can actually specify number formats so we can format it as currency so custom and displays currency isn't that nice we can display that as currency okay and we obviously need to do it for the other ones but let's go ahead and run this first just to make sure that it's displaying it correctly before we spend our time doing it for the other uh tabs here but before we do that let's make sure that um we are passing something to this right we need navigation so we go if we go to the home page we have this recently saved gigs let's create on the card level let's create a navigation right so we're going to say navigation to detail and we need to pass the gig ID and we have the gigs ID we have the gigs ID of course okay perfect let's go ahead and run our app and see if it's displaying the right data all right so this is our app right here we have popular Services these are um categories here and we have this recently saved gig let's go ahead and click on that and it's loading but there's nothing being displayed and that is because we forgot to have the right permission so if we go back to our app and we go to the tables we are not able to get data from disabled because we have not set the permissions on it so if you go into our authentication right here and we're going to policies you see all the tables have this all well it's almost all this one does not and so we need to make sure we set this policy here allow all all true review say safe policy and now all the tables have the right policies now we also want to check that the gigs did tell you we only have one gig that it's the same gig that's also saved so here in our detail view we only have this gig too we don't have that other gig and so when we're trying to filter for that gig we can't find that gig so we want to make sure that we also are displaying the gig as the saved gig as well so we're gonna go back to Gig save and here as you can see this is linked to the first gigs and so here we are going to create a new row although I am saving another gig right because I only have this first gig save that's linked to my user id but I'm gonna do that uh for the second gig as well so this is going to be gig id2 and user d i can paste the user ID but what's cool is I can actually select the records all right so I can select this one and I can also select the second gig which is really really cool for uh quickly connecting them so I'm going to select the second one okay save and now I have two gig saves pretty much all the gigs that we have in the system I have them saved and that way I can click on the second gig and have it show me the information so I have two gigs here saved so let's say I click on this one which is the one that has the tiers I click on this one and we are redirected and there's the detail page okay obviously we need to clean that up but as you can see everything is fine right so this beginner is the only one we have configured it's showing the tiers so now we can complete the same thing for these uh other two tiers clean this up and also display you know the images and as you can see email is here we also need to make sure we have the Avatar connected properly so let's do that real quick but as you can see it works so that's that's the good news that's the hard part right getting it all working together the UI stuff is the easy part so let's go back to our app right here and let's fix it up so this image let's go ahead and fix it up this is going going to be image gigs image we don't have a field for the Avatar we might add that a little bit later and then this thing is going to display whether this is an awesome seller or not depending on some calculation right so this this is not linked to anything right you can you can have this variable set automatically on your back and then Super Bass or you can calculate it on the front end with some you know data that you're getting about this user so right now I'm just going to put something like you know awesome seller now if you take a look at the at the um compiled app here we see that this body is um it's overflowing so we need to wrap this in a container okay both of these right so what I'm going to do is I'm going to select this right here and so I can wrap this in a container here okay and I can do the same thing for this one wrap in the container and that way I can specify constraints I can say well you can only go so you know you can only be as wide as this but I can give you more width right so you can wrap okay so we're going to go to this container and I can say well I don't care about the height I do care about the width so let's say the width is I don't know 300 something like this and the same thing here this container I don't care about the height but the width is 300 okay so something like this and that's going to look better and now we can do the same thing for these containers so what I'm going to do is I'm gonna wrap this in a column wrap in the column and column I'm going to make it left Justified I'm going to duplicate this duplicate this gonna do the same thing and let's go ahead and configure these so this is going to be this is going to be tier uh tool name this is sear and you can even type this here to description and then this is tier two price okay and let's go ahead and format it displays currency and the same thing for that last year I wrap this in a column duplicate I'm a bunch of these all right let's go ahead and left justify it and then I can just type tier three this is going to be name this is description and this is the price let's go ahead and format it displays currency and there we have it okay so let's go ahead and refresh our app so that we can get the new changes all right let's click on this and there it is beginner intermediate okay we forgot to do this did we I don't think we did looks like it's there lots of translation W3 yeah it's there let's go ahead and give it another reload Okay click here okay now it works all right there's something some issue here that we're gonna take a look see what's happening we're gonna fix that but so far as you can see our tables our tabs work now right so we have the tabs working everything working it's just a question of making it aesthetically pleasing okay and one thing that we can do is we can have a button right so we can add a button here and the button could say purchase now okay so let's go ahead and wrap this button in a row so that we can Center it nicely something like this okay so this is here let's go ahead and do this same thing here silent buttons go ahead and wrap it in a row Center the row okay and last but not least go ahead to this view right here add a button and let's go ahead and wrap this in a row and let's go ahead and center now when the user clicks on it what we can do is we can pass the ID of the record in this view because the nice thing about this view is it has all the information it has the name of the uh the name of the gig the um the name of the tier it has the uh the price so we can we can have all of that information to show them on the confirmation page and we have the data to to charge their credit card so we have all of this so all we need to do is pass the ID of the record in this view not in the specific table but in this View and that's going to make it super easy to work with everything okay so this is kind of done it displays everything that we needed to display we still need kind of the circle and let me go ahead and add the circle right here real quick now if you go to our users table and we take a look at the definition just with a quick scan I do not see anything that's kind of an avatar so there's no image there's no Avatar nothing like that and so because this is a read-only table here what you can do is you can create another table that's going to have additional information about the user so what you want to do is you want to stay in this table editor go to public create new and here you can create another table users extra okay and what you can do is you can create add a column and this is going to be Avatar and here you're going to link to the user okay so we're gonna say user ID we're going to link this right here and we're gonna go to auth link to this user and what we want to do is we want to link to this uid but we haven't set the type that that's why it's not letting us here we have the type and now we should have no problem doing it we're going to select all and we have ID right here save and now we have another table with some extra information about the user because if you want to store a bunch of things but you can do it in that in that user's um you know that that initial users table because it has its own kind of data it's a good idea to do it separately it's a good idea to do it separately uh instead of you know modifying kind of changing the data of that that given table so it's a lot better to do it like this and so now we've created a table we linked it back to that original table we're going to save this table oh forgot we're going to give this text right here we're going to save this table here and so now we have this user extra and so now what I can do is I can give this user or any user some extra information so I can say insert a row and I don't have to worry about I can give this user an avatar head over to this website and we can just select a random face let's say it's this user right here we can just save it go back to our storage go to our images bucket all right so we uploaded this image click on this image get URL and go back to our um tables here user extra and then we can create a new role Avatar right here and then the user ID let's say we want to link it to my user and I believe it's yeah this one right here and let's go ahead and Link it to the other user as well because that user is the one that that um is the owner of that gig so we want to display the Avatar so I'm going to add another row same Avatar we can change it later and I'm going to select this user right here and all we want to do is we want to make sure that we have the data from the user as well so we're going to change this view here to pull the data so we're going to say join user extra EU on G user ID G user ID EU user ID and we can also display it here here we can add this other field here and we can say Avatar let's go ahead and rebuild this query here all right so looks like it created a new view and now if we go back to our tables and Views and take a look at this detail view we should have this Avatar being pulled up as well so there's email and there's the Avatar okay so now we've created the new view with the Avatar and so now we can go back to our app Super Bass gets Hema and now we have this gigs detail view now it has the savitar okay how cool is that go back here come back here click on the Avatar and then we can click here gig detail View and we have the Avatar and so now it's going to be the user's Avatar so let's go ahead and reload the app and see if it's showing up correctly alright so this is our app let's go ahead and see if it's gonna display everything correctly click here and as you can see the image is showing up here we have all of this here and then we have this purchase that's going to be redirecting the user uh to the um to the purchase page okay so as you can see everything looks really good we're pulling the correct data we still need to fix it up a little bit make it a little bit nicer but that's really really easy to do all right so the next thing that I want to do is I want to implement search functionality so if you take a look at the screenshot right here this is that home page screenshot you see people can search they can search for specific uh gigs by typing in a specific keyword by describing that Geeks gig somehow so if I type nft this is the results I'm going to get so I'm going to get some related results I'm going to get some specific categories D categories and then the search results so that is what we want to implement right now so let's go ahead and do the UI part and then let's do the um the back end part as well so let's come back here and here we want to have a container that's going to display the search our input here right so I'm just going to clean these things up and what I'm going to do is I'm going to add a let's add a container I'll put it up on top and let's add a text input field here and let's set this container Let's uh remove the width let's remove the height and I want to remove this underline now the idea here is that the user is going to enter their search query here in this box and then press enter and then when they press enter we're going to have an action that's going to execute now in uh fiber here when they press enter they're redirected to another page and on this page they are they are presented with the list of items that they're searching for so this is the home page they enter nft for instance and they they're basically redirected and they have like related results uh some categories gig categories and then the actual results here so it's a it's a different flow it's not being displayed in line it's doing on another page and that's exactly what we're going to be doing so we go to our app and we select the field here if you click on add an action and you type search you are presented with various options here so mainly you can do simple search or algolia search now we don't have a Golia configured if you select simple search and you click here you can only select streams okay so if we were using firebase's firestore you could have searched directly on a firestore collection or firestore documents but seeing how we're using um Super Bass here we can only search on strings and strings are not good for us because what are we going to do with strings we want to search on actual gig records right so this is not going to work for us and so we're going to delete this we're going to delete this action and what we're gonna do is we are going to redirect to another page and on the other page we are going to be doing the search Okay so we're gonna create a new page here new page and I'm just gonna create a blank page search results create page and this is going to be our page let's say it's going to say search results something like this and on this page we're going to be doing the searching now the other problem that we have is if we go back to our other pages right we're doing like a query here let's say we're doing this query um you know we're doing this query from The View everything is good the problem is we can't filter it right so if we select we want to filter by name uh we only have equal to not equal to greater than we can't really do like a search we can't really do like a contains or something like that and this is not this is not going to work for us right because it's just it's looking at different elements now Super Bass supports some very very powerful searching features it's just you can't use them inside of Florida flow but thankfully there's a bunch of apis that you can use to access your database directly and you have these powerful features so you can do is equal not equal greater than so all of this is supported by flutterfo but we can also do matches column matches a pattern column matches a case insensitive pattern so there's a lot of you know very very useful uh searching capabilities right and so if you go back to our database here and you scroll down and you go into API docs here and you select your uh the viewer the table that we're going to be searching on and I think a good view to search on is this gigs detail view okay so we're going to be using this gigs detail view right here and you select bash here instead of JavaScript you have these um these specific requests that you can use directly so for instance this is selects various things but if you scroll down you can actually do filtering right there's all these read rows and then you can do this filtering and that's exactly what we're going to be doing now you want to select your key right here we're going to be using this Anon key here and now we are given a specific operation that we can filter and this means that we can filter on specific Fields exactly how we want very very powerful and so let's go back into our app and let's create an API request that's going to be used specifically for filtering or search we're going to go into API calls create a new API call this is going to be called search search query and what we're going to do is we're going to copy the stuff what we got now I saved my request here and I'm gonna paste it here so as you can see we're specifying gigs detail view we're specifying name that we want to query on and we're saying I like this is case insensitive we don't care about case uppercase lowercase doesn't matter and we're searching for a specific query okay in this case I have translate here but this is going to be a variable so I'm going to add a variable this is going to be here I'm going to add a call and then I can use this right here it's going to be search sure and here we're selecting essentially all the values you can limit this if you want but this is fine for testing now we need to add a couple of headers okay these are the headers API key um this is going to be your Anon key okay the one that it's it's in your uh dashboard config your project config here gonna add this as well as you can see this is exactly what this request is right and then we need that last header this range header here go by here at this one last header here and click save okay now let's go ahead and test it out let's see if it works response and test and let's say we're searching for the field translate so we want all the gigs where name has the word the translate and if we go into our super base here and we go into the main screen here and we select the project and we're going to go to the table editor and we load this detail you here we have one gig that's active right now that has gig tiers and everything is set up that's why it's being displayed here and as you can see within the name you see the word translate so potentially when we run this here we should be able to get that gig there so we're going to do test API call and guess what what we get this exact gig we get the search result so now if I go into recommend it I can select the fields that I want uh to kind of display but right now it's fine I'm just gonna hit save and save this request and so now we have a search query API that given a particular search string is going to go out and actually query the data okay let's go back inside of our ad let's go into this UI here and let's configure the navigation to the search detail page Okay click here navigate to search results we need to pass a parameter this is going to be search query string required of course and now we can pass a search query and now we can widget State input search here okay so now we're passing something now on this page here what we can do is at the top level we can execute that API call back in query API call search query and we can actually add the variable right search string and this is going to be search search query here which is the parameter okay so now when the space loads it executes that API call and it should have this data available everywhere okay so now what we can do is we can create a list View and display the data all right let's just test it out let's just create a very very simple list View and this list view is going to be based of a result and let's see this is the search query result here and here we can just do json's body okay we're getting this Json body and then we can say items confirm and then we can pull out the items that we need right so for this text right here we can just do search item and then we can do Json path and I think we can just do name I believe name is one of them okay yeah it should work all right so let's go ahead and run it and see if it works okay so let's see if that works let's go ahead and run our app alright so here's the app and we have a nice search input field here and let's type translate okay press enter and guess what the redirect and it displays that one gig okay so even though it couldn't do it um the flutter flow way right flutter flow cannot do the filtering using Super Bass we were able to do it using the API way and this is perfectly fine sometimes that's exactly what you have to do all right so this functionality Works which means this is the hard part is done now and now we need to make it a little bit nicer we need to display the nice um the nice UI maybe display some categories things like that and thankfully because we have all of this data in that view right so if I test this view right here you see we have all of this data we have everything that we need it's going to be very very easy to display this in a nice kind of UI way so let's do that right now all right so right now let's go ahead and uh configure our page here let's fix it up let's make it all nice and beautiful and we are going to be mimicking this search results page okay so we have this search input field here again which is pre-filled with the search query next we have some related results we have the gig types the user types or I don't know some filters here we have uh the categories of the results and then we have the actual results uh in a kind of this list format with this these cards here so let's go ahead and start here and then we're gonna create uh some of these other features as well so we're gonna go back into flutter flow and what I'm gonna do here is I already have my list view here okay so all I need to do is I need to make it nicer so instead of just the text I'm gonna get a I'm gonna have a container here we're gonna replace text and inside the container what do we want to do well first of all we have this image here we have this image and then we have some text so this is a row with two columns right away right off the bat so we're gonna come here and we're gonna add a roll and inside the row we're gonna have a column and another column I'm going to just duplicate this and let's go ahead and uh let's go so we have this container here and we don't really need the width and height because it's gonna take up the amount of the Inner Elements here it's going to expand or contract automatically and for this row let's see if we can Center it maybe something like this and this column here this needs to take up the the entire space now here what we have is almost kind of 50 50 right so we have this thing taking up almost half and then this one taking the rest and so what we can do here is give this maximum and then the image is going to take how much it needs essentially right so for the image we're gonna add an image here and this image is going to take exactly what it needs so let's say it needs a hundred by a hundred perfect and now we have something like this maybe even a little bit bigger let's say 125 25 okay and then this is gonna take the rest which is exactly what we want now let's go ahead and do this one so here we have a um we have some like a card here a column with three rows one two three essentially that's all they are three rows uh let's go ahead and do that so we have a column we have a row we have a row and we have a row now the first row is uh the ratings right we're not storing any ratings or reviews as of yet okay we're not doing that yet so what I'm gonna do is I'm gonna add a text and I'm just gonna put some dummy data okay we're gonna I'm gonna show you how to do that later so I'm just gonna put 4.8 125 something like this this one right here is going to be the um the the name of the gig okay so this is going to be the name of the gig and then what do we have uh then we have the price which is right Justified so this is going to be the price and I'm just gonna write Justified right here perfect okay that looks awesome looks really really nice I really really like that so we can also do something like this all right and then for the name let's go ahead and fill it in because we have that information search response custom tab name right here now this right here is going to be the price of the first tier right so this is going to be the lowest price tier and that's exactly what we have here it says here from 10 so that's assuming the lowest price here in our example this is going to be the first tier okay so let's go ahead and do that as well a response custom and we're gonna say tier one price okay so something like this all right so that is what we have so far let's take a look let's give it a little bit of padding so we can pad on this row level let's do 10. now another thing that we can do is we can wrap it inside of its own internal container and then on that container we can do some borders so I'm going to remove this here we're going to do a padding on this container and we can do a border radius of let's say 10 okay there's the Border radius and then on the roll level we can do more padding right so let's say something like this or maybe yeah that looks good maybe a little bit more and that way we have a really nice effect okay so something like this okay that's starting to look better and let's take a look at this column we can have a kind of a left padding something like this okay that's kind of starting to come together so let's go ahead and run the app and let's make sure everything is displayed correctly so let's go ahead and start a new um testing session all right so here's our app let's go ahead and type translate which is the a search term for the gig that we are trying to find we're looking for a translation gig and if I press enter it's going to redirect then it's going to do a search all right so we got here one results but this is not correct so we're probably not fetching the right Fields correctly so we're gonna double check the fields and we also need to make sure that this image is not overflowing uh the constraints inside this container so let's go ahead and check to make sure that we are setting up the query correctly let's do a test on the API all right so this should be an underscore right this should be tier one name and underscore tier one price all right so let's go ahead and fix that to make sure that it is correct tier one price right here and this is the name of the gig and as you can see the image is too big it's 125. let's make it a little bit smaller let's do 100 okay let's do it do something like 75 75 okay that looks a little bit better that will actually that looks a lot better now right and fact you can even remove the height here and the image is going to fit in perfectly we can make it 100 by 100 it's automatically going to fit in all right so let's go ahead and reload the app and let's see what happens all right let's type translate press enter now we're still getting no here and the reason we're getting no is when we are specifying this element we are going off directly search query response we should not be doing that we should be going off items right we should be going off items and then that's going to find us because search query response is a list of items right we are getting individual items but we need to go through items right here so we're going to change this to items we're gonna put tier one price and that should work let's go ahead and reload this and now we should see if the actual data being filled in correctly all right there's the app let's go ahead and insert all right and there's that and as you can see now the data is showing up correctly we have the name of the gig and we have the price we still need to format the the price and I'm going to show you how to do that shortly but right now we are getting the right search results so let's continue working on this let's go ahead and add this input field and that's really easy to do we can just go over here we can go into column we can create another container and let me rearrange this put it right there and remove the width the high text the text field and let's go ahead and create like a nice border around it so I really like this outline okay that looks better let's do a little bit of top padding from the top perfect let's do a little bit of padding on the container on the text field right here something like this okay perfect this label we're going to remove because I only want the initial value whereas this label right here and I just want to put in an initial value and that's going to be the search query parameter that we have there so that's the initial value right there now we need to make sure that when somebody clicks on it it's going to redirect to the detail page okay so let's do that now let's expand this let's do it on the container over here add an action navigate to detail and let's pass the gig ID because we have that and let me go ahead and do that from the items Json path and I think it's well not mistaken let me double check yeah it's gig underscore ID there it is gigs gig underscore ID right here and that's going to load uh details okay so let's go ahead and reload and see how that looks okay Translate There It Is click on it and there's the detail okay and then you can kind of purchase the right uh tier for you the right type of gig so as you can see that works perfectly really really nice now there's still a couple of things that we can improve on uh another thing that I want to do is I want to display the categories right so in case the user just wants to click on the categories and look at gigs they can do that okay but the problem is we are not getting any categories uh in this query right so if you have this gigs detail View to go to the definition we are not pulling any categories right now let's take a look if that gig has any categories up for it anyways we have these categories here and we have categories view but we don't have the actual table that links gigs to categories now assuming that a gig could be in multiple categories we can't just add a field on gigs right because anytime you have many too many or one-to-many relationship you need to add another table okay so let's go ahead and create a new table this is going to be gig categories and we are going to be adding couple of columns so this is going to be gig ID and eight and then we're going to link it to gigs ID and we're going to add a column this is going to be category ID okay and so that way we can have as many gigs linked to as many categories as we want essentially let's give it a and eight here and then we are going to say this is linked to categories ID okay and that way you're gonna have your gig ID category ID there and you can assign it and you can look up this table and get category information so let's go ahead and save this table right here all right so now we have this gig categories here and let's go ahead and add a uh category gig linking essentially putting a gig into a specific category so I'm going to say insert row and I'm gonna pick a gig and I'm gonna pick this translation gig and for the category I'm going to select translation makes sense and so now this gig has a category information attached to it and so when we have this gigs detail view right if you click here we can modify to pull up different categories okay so let's go ahead and do that right now let's come in here we have this uh gigs detail view there right there and let's go ahead and change that so update the view to include category name from the category table okay let's go ahead if that works let's execute our prompt here and let's see what happens all right and this is the response and as you can see it's getting the name from category name which is perfect and then it's also doing the joins right so it's doing on gig categories by the ID and it's also linking on categories so let's see if that works let's accept the change and let's go ahead and run this query let's go first we're going to drop that query gigs detail view okay let's go ahead rerun it okay so now we've created this new view here let's head over to our tables take a look at this View and let's see if it has the right categories all right so we have this and I think our category there it is translation okay so now we're getting categories so that AI element is really really nice that uh your gpt3 or whatever they're using in the back and it works really really well so now we have the category here and so what this means now is that if we get data from detail view we're going to get a list of categories and we can list them in the search results so let me show you how to to do that so let's go back into our app here get schema refresh our schema and this is our gigs a detail View and now we have category name okay so now we have category name and so now if we do that API call we're gonna get the name of the category right so now we have category name so if we have a lot of results we can get the the name here the list here and so what we can do here is we can generate a list of categories and have another listview here that allows people to select categories and categories are important because um we are we have we're going to have another separate uh view with category flow so they're gonna select different categories and they can click on it and see the list of gigs in that category so let's go ahead and create that list container that list view that displays the category so let's go ahead and fix this up right here I'm gonna add another container inside I'm gonna do a list View and I'm going to drag it right there like this perfect and let's go ahead and rename it this is our category this is our search and this is our um main list okay this category list let's go ahead and delete the height now let's go ahead and fix this up let's go create uh change our height maybe make it a little bit uh not as tall like 50 maybe 75 we're gonna expand that all the way okay that looks really nice now let's do a little bit of padding on the list you here so something like this that looks really really clean okay that looks good now I want to test out the categories but before I can do that remember we only have one gig with one category we need multiple to make sure that um they're gonna display properly so I want to create another gig I want to create the tiers and everything there and that way we can have multiple gigs with multiple categories so let's go ahead and do that so in our gigs detail you right here we are only seeing one gig okay and just translation here so what we need to do is we need to create another tier for another gig and another category for it so that it can be in this gigs detail view so let's go into gigs now in the gigs in the main gigs table we have two gigs so I will edit your YouTube videos for you but this first gig with the gig idea one it doesn't have any tiers all right so we need to create tiers for it and we need to make sure that um everything is done for it otherwise it's not going to appear here which is kind of what we want and so I'm going to create another record here and this gig ID is going to be this other gig ID this is this edit videos here it's your name is uh let's say I'm just gonna put tier one tier one description Just Gonna Keep it really really simple 10 tier 2 tier 2 description uh 20 tier three and this is 50. and we have that so it should appear in our gigs detail view so let's go go ahead and refresh that okay let's take a look so it's not appearing here and that's because it's missing some data from the the other tables that's important so if you took take a look at the definitions we are probably missing user extra because it's we need to make sure that all the data lines up here so let's take a look and let's make sure so if we go into categories we have video editing so if you go if we go to this gig right here you need to make sure that uh everything it has all the information here so let's take a look the user ID is the same so that's not an issue it has the tiers it has user extra here so if you go into user extra it should have that because that's used for the Avatar okay so these are the user extras that is there what it's missing is the gig categories okay it doesn't have a category assigned to it correctly so we're going to add another row here and this is going to be the gig ID this is this edit your videos category ID video editing okay now once we add that it should have all the data hopefully let's wait for this record to be added let's go into gigs detail View and there it is okay so now it has all the data and so it's being displayed correctly and so now we can go back to our app try this API call with multiple records now right very very important as this API call and we're still getting one record and that is because um we are searching for translation but let's say we modified the name so that it's it's matched by both uh so that this the search query matches both um both records here but we have will so we can search for the word will okay so we can come in here and I'm going to put will so now we should get two record two results and we are getting two results and so now if you're going to recommend it go into category name here we have a list of categories which is what we're going to be getting so what we want to do is we want to make sure we select this come back to select it and give it a name and we're going to say categories and so now we have access to a list of CAD categories that we can use right so let me show you what we can do so we can go back to our app here and in this list view we can load it up with category names right so and here we're going to select categories right categories here and just put category item or category name be more specific okay and then this list view here is going to give us a list of categories uh there okay so let's go ahead and add a just something to show and make sure that the list view is actually horizontal not vertical okay perfect and let's give it some padding so that it's not all squished together okay perfect okay so this should this way the categories for the search results so let's go ahead and reload the app or start a new session all right so here's a wrap now let's say we search for something that's going to Match multiple gigs so I'm going to type will and I'm gonna press enter okay redirect and as you can see it matches both um both items here now now we need to make sure these are formatted correctly but two are displayed because it's essentially matched both and as you can see they're displayed here for us let's go ahead and fix that right now from this text right here we're gonna go into category I have no further changes category item and that's it okay so let's go ahead and reload this all right now let's say put will press enter and there are the um the names of the categories now there's still a few things that we can do with them we can put them in alphabetical order we can do a bunch of other things and we will do all that but right now I want to kind of fix this thing I want to make sure that it expands all the way and so what I'm gonna do is instead of having text I'm going to have a container there gonna have a consent and we're gonna replace it then I'm going to add a text and for the text we're gonna do category name no for the changes and you can do a little bit of padding on the text so maybe like 10 okay something like this and you can also stylize the container itself Maybe with the Box Shadow something like that let's go ahead and reload this see how our app is shaping off okay type will okay and there we have it okay so it's a little bit nicer and when you have more of these you have more gigs more categories it's gonna fill up the rest of this row and it's going to be scrollable as well so obviously you can click on any of these and it will it will redirect you to the detail now there are a couple things I want to fix I want to make sure that this is constrained this uh name of the gig here and I also want to make sure that this is actually going to be formatted as currency okay and there's a little trick to that so let's do one thing at a time this thing right here I want to make sure that um it's actually constrained and for that we need to put it into a constrained type widget we're going to wrap it inside a container and this container is going to have a set width so we're going to remove the height but the width it may be 200 pixels something like this and now how do you um how do you make sure that this this is actually formatted as a number well the reason it's not is because this is just Json right that doesn't know what this is and you want to wrap this whole thing inside a code expression here so we're going to add an argument the argument is going to be an integer we're going to be passing this argument and this argument is going to come straight from the item right so this item Json path this is our item and the return type is going to be an integer and this is going to be our war one and because it's going to be an integer we have an option to format it as a number right right there and so we're going to say custom formatting this place is currency okay now this is going to be displayed as a currency and so as you can see this app is shaping up really really nicely now the next thing that I want to work on is this category flow okay and it's a little bit complex it's a little bit more complex than you think so what's happening here is we have this top level category so like Graphics and Design digital marketing writing and translation and if we scroll scroll down uh then you have these child categories here and then when you click on the category like logo and design you get your familiar um um the the gig view right and this is the view that we used for the um for the search screen so we can replicate this without the search bar and so what's tricky here is this is a two level Design This is a multi-level design where we have a kind of the the main category the big category and then there's a bunch of sub categories that we want to show that fall under that main categories and these subcategories are clickable and then the user goes and they see the list of gigs in that um in that specific categories now how do you implement that with a super bass well the way you do it is we have here this categories table and what I decided to do is and I explained this uh in the initial stages but chiefly what we're doing here is we have this parent ID field here right so if you go to data definition you can see that we have this parent ID and the purpose of this parent ID is is twofold one is to specify what kind of category this is is this a top level category or is this going to be a child category so if parent ID is null then there is no parent that it's it's a top level category if parent ID has something then it's part of that it's a child category of that parent category now the gigs that we're going to be assigning to categories they're only going to be children uh they're only going to be assigned to categories that are child categories okay so here technically this is never going to work because in our gig categories we have gigs assigned to these categories but these are top level categories okay so we have to kind of change some things around and this is important because when you're displaying the data you want to display the parent category and then a bunch of children and the parent and a bunch of children for that parent kind of what they're doing here okay so let's go back to our database and let's clean this up so this should be children of something so this should have a parent ID and so what I'm going to do is I'm going to create two more top level categories and these categories I'm gonna assign them to top level categories okay so let's go ahead and create kind of this big category for video editing right so I'm going to add another row here and this is going to be video everything okay so that we know this is a top level category video or and no there's no parent ID and the image URL uh we'll we'll add that later we'll add that later and I'm gonna do another one for translation job so text text based things right I'm gonna add a row not a column But a row and we're gonna say text everything okay so video Everything text everything kind of makes sense and no parent ID I'm gonna add the image later and for the parent ID I can have a reference that let's link back to one of these records and first I want to edit this column right here and I want to add a foreign key relation okay so I'm going to add it back to this category ID here okay saved it here and now what I can do is I can edit it and I can select the records right so this video editing and translation is going to be linked to video everything and text everything uh respectively right so video editing is video Everything uh translation is going to be text everything so now we have four categories and these two categories without the parent ID is is these top level categories okay and these are children categories right so we can get the the top level categories if we need to and we can also get the children categories for specific parent categories if we need to as well now let's go ahead and start building the UI so here we are back inside flutter flow let's create a new page let's create a blank I'm just going to put categories create page let's take a look so we're going to create a couple of pages right so we need like three pages top level categories um sub categories and then a um the actual list of widgets okay so this is going to be our top level category so very very easy come back here let's do a list view here let's put categories here let's do a list view let's put a container and how we're gonna do that so we have an image then we have the main category and then maybe a couple of subcategories let's just do main category right now and so what we're gonna do we're gonna have a row and we're gonna have two columns okay now we don't have any images yet for top categories we're gonna add them later but the most important thing is the structure right so let's go ahead and fix this image something like this because we don't have a um we don't have a container and that is why it's it needs to have some some boundings let's make it really small and this thing is going to contain tax okay so something like this and this column is going to take up the rest of the space let's go ahead and wrap it inside of a row all right looks good let's go ahead and maybe yeah let's go give it some padding maybe 10 okay that looks better yeah maybe give it a little bit of padding all right let's make this a little bit bigger okay all right so these are going to be our categories now what's going to list View and let's feed these our categories coming here super bass query now which table do we want to do we can just do categories right we can just do categories and what we need to do is we need to create a filter where parent ID is null right parent ID is no and unfortunately we don't have a way to do it right equal to not equal to less than greater than we're not we don't have that option right we don't have that option of creating of just getting the list of categories where parent ID is null and so what we need to do is we need to go into Super Bass and we need to create a view that gives us a list of top level categories and so let's go and create this view create view that displays categories where parent ID is null okay let's try this it's thinking okay except the change and there it is so from categories and it's giving us all the fields okay so let's go ahead and create this view categories parent view we're going to create this view right here and now if we come back here we have this categories parent view okay and as you can see it's only displaying top level categories okay there's a description which is fine in fact we needed a description we can actually display this description but everything else uh this is null and this image URL is uh null because we haven't set the images and that's fine and so now we can display these categories uh in our list to come back here and let's go ahead and add a uh so we have this column let me duplicate it this row here and this is going to be the description right so this is this is um this is the name and this is the description okay let's make it a little bit smaller okay so something like this now let's go ahead and feed these and let's refresh our uh schema and get schema it's gonna overwrite and if we go into categories parent view we are going to be seeing just top level categories so if we come back here uh we have this list to add backend query Super Bass and categories parent view all categories per okay so now we can just display so these are our top level categories and if we have the image we would display the image as well so let's go ahead and run the app but before we do that this needs to show the nav bar we are just setting up the nav bar it needs to have the nav bar in fact everything needs to have enough bar so let's uh let's create a home page to have a nav bar okay so now we have a home page and we have categories let me give it another icon maybe something with categories oh there's categories all nice it even has a category icon uh detail doesn't need categories home page and yeah that's it search results doesn't need categories okay so let's go ahead and restart our session all right so here's our app and we are getting an error here uh on the home page and if we go back to our app the reason we're getting an error is because we have all of these categories here right this is this categories view right here but some of them don't have images okay that is why we are getting an error right and so what I'm gonna do is I'm going to copy these images here just so that they're they have something there and let's go ahead and reload our app all right so here's our app and we don't have an error anymore and as you can see we are displaying all the categories because we need to set a filter to just display uh the child categories in this case so that we can we can um click on them and see the gigs now let's go ahead and click on the categories see this works perfectly and this was uh not really practical to do in Florida flow because we needed to make sure that the value is set to something of course we could have set the value to some zero or something else and just query it by zero but this is another way of doing it okay so now we have these parent categories and the next thing that we need to do is we need to display these child categories under them and that's relatively easy to do because now we can simply query categories table directly using the ID for these child categories as a filter okay so let's go ahead and do that right now so we're going to wrap this in a column and now we have here a column we can collapse this container and we can add another list review okay so now we have this list view under this container okay so let's go ahead and expand this one right here okay so that it's all visible and in fact we can probably set a height so maybe 100 I think 100 is not and so for this list view we can display a container and inside the container we are going to display um the specific um child category here okay so this container we're gonna clean it up a little bit delete the height delete the width and give it some padding so something like this and now we can have a list view that goes off this parent category all right so add a backend query Super Bass query we're going to be doing categories and we're going to add a filter where parent ID is equal to guess what it's going to be this parent view okay so this ID here okay so now parent ID is going to go off that main um top level category okay we're gonna say confirm firm and then we can just set the value to our categories name here okay so this is going to display the name the child categories for this main category let's go ahead and reload this all right there we go come in here and guess what we see text everything translation video Everything video editing so as you can see our hierarchy structure works perfectly does exactly what we want the last thing that we want to do is we want to create another view that will display the Geeks for that specific category and thankfully we already have a view that kind of does it search results right so I'm going to take search results I'm going to duplicate it I'm going to rename it and this is going to be gigs list or just list gigs and we're gonna remove the query here from this list of gigs we're gonna remove these categories because well it's going to be only one category and what we want to do is we want to have a filter that's filtered by that specific category ID and so instead of a search query we're gonna have a category ID category ID here which is an integer it's going to be required and we're going to remove the search query because we don't need it anymore and let's take a look at our query here it's not going to be an API call it's going to be super based query and what we're going to essentially do is we are just going to query the uh the actual gigs in that specific category ID so what can we query let's go back here we have this gigs detail view which is awesome can we query that by category ID let's take a look we have category ID but we are not displaying it here okay so we have category name but it's better to do it using category ID and so what I'm going to do is I'm going to copy this and we're gonna go back to SQL editor and I'm going to paste it and I'm going to drop it first drop gigs detail view drop view gigs detail View and then I'm going to recreate it but I want to make sure that we actually get the category ID here right the CID I want to make sure that it's there this is this category C so I want to make sure that CID is set is displayed as well so I'm gonna place it right here CID as category ID and let's go ahead and re-execute this no roles return success this is our gigs detail here let's go ahead and see if it's actually doing it let's run our view all right and we have category IDs two and one right so if you go back into categories two and one right so these are the right categories okay so now we can go back to our app and we can refresh our schema Super Bass get schema okay now we have this uh categories we have this gigs detail View and we have category ID here okay so we can filter on that category ID that we are being passed okay so this is our main here this is going to be super bass query uh gigs detail view filter by category ID equals to category D page parameter okay so now we have a list of gigs for that specific category and we need to make sure that we're passing it correctly so I'm going to go into categories here and I'm going to make this clickable this container I'm going to make clickable I'm gonna do another gate to list gigs I'm gonna pass the category ID here categories row category ID and here what we want to do is we want to take this back-end query here we want to copy it and we just want to feed it in our main list okay we're gonna come here paste this back in query and remove it here because we don't need it at that level anymore and now we can just display the right Fields right so these are our gigs gig detail you name this is the number we can remove this and just uh displayed the um the price directly well it's going to be from a certain price which is tier one we're gonna format it as a number as a currency custom formatting display okay what do we have here passing and this thing here when you click on it it's going to redirect to the detail view but except here we're not going to be passing this gig ID we're going to be passing this gig ID right here all right no issues let's go ahead and reload our app and let's see if it works all right here is the app let's go into our categories let's click on translation we're not seeing anything let's double check to make sure that we are in fact displaying the right categories all the issue is we're not passing category ID for some reason let's go ahead and pass it correctly this right here is this list you here and we're querying categories so we need to be passing this category ID here from categories ID okay now we're passing category ID let's go ahead and reload our app all right here's the app let's go into our categories translation and we're seeing the category ID and this is our translation we can click on it and we are in the description in the detail page here and our detail page needs to have always on um navbar so let's go ahead and do that right now before we forget and we need to change search results here because this is a category view so we're gonna go to list of gigs and change this and here we can put a list of gigs let's go ahead and reload this real quick all right so now we have the category View and we also have the list of gigs for that specific category right so this is translation all the translation stuff and this is video editing right this is the video editing gigs here now the next thing I want to work on is this order screen right so we have this manage orders and we have a list of orders here and if you click on the order it's going to show you you different status changes right so when you submit the water when the person begins working on the order when they complete the order they might ask for some more information so when you click on it there's just a bunch of status changes and so I want to create a couple of screens this screen here that's going to display all the orders and now when you click on it you can see all the different status changes that are taking place uh within a specific order okay so if we go into our super base we have this orders table here that we created when we were initially designing our database and this um table here has notes which is uh the same as requirements so order requirements and we have the gig ID because when you think about you have gigs as a template and then an order is what comes from that gig right gig by itself is just a it's it's a presentation but if you want that gig to be completed it turns into an order but we are missing what one particular uh column here we're missing a particular field and that is the user field because you know we have an order it's tied to a gig but it's also needs to be created by user in the gig we have the seller but we don't have the buyer now I see that the gig ID is not linked it's not linked to any foreign key relation so let me go ahead and fix that first let me go to this gig ID and I want to add this column and I want to link it to a specific uh to a specific uh gig table so I'm going to edit this column and we are going to create a foreign key relation to our gigs right this ID right here our main gig tape now because each gig can have multiple tiers we also need to store that information as well so we are storing the gig ID but we also need to store the actual tier that that person decided to purchase so for that I'm going to be adding another columns I'm going to call it gig it's here this is going to be numeric and I'm gonna hit save alright so let's go ahead and create our first order here for notes I'm gonna say please do a great job gig ID is going to be let's say we need translation user ID is going to be us and the geek tier is the first tier right this is that lowest tier that we want I'm gonna hit save okay so now we've created our first order let's go ahead create another order so I'm going to say insert a row do a great jobs the same thing gig ID this is going to be a different editing user ID is going to be us our second order and geek tier is three this time okay because we are looking for you know top of the line gig uh editing gig right we want really really good uh good editing job to be done all right so now that we have two orders here the next thing I want to do is I want to display this data in our app so we're going to go back to our app and we're going to create a new table here and if we take a look at the screenshot right here it's very very similar to our um our list of gigs so we can duplicate one of these list of gigs in fact we can duplicate this one I'm just going to duplicate it okay so order list right here and so this is going to get the data now we need a lot of things right we need the the seller's um Avatar the gig sellers Avatar we need uh what else do we need the price the date we have the date stored on the table and the notes as well so we need a lot of things and we also need the status right whether the water is completed or not now for the status which is something that we need to show in the details screen here we need to create another table okay and that table is going to be the the status of the orders so I'm gonna come in here I'm gonna do another table order status we have ID and what do we need well we need to order ID and this is going to be in eight let's go ahead and Link it and we need the actual status right this is going to be text all right so now if we have the water ID we can get all the statuses as well as the the the dates as well when that status was updated okay so for instance I can create a new record here and I can say well this is the first order this is for the first order I think uh row order id1 was I think for translation right so we're going to select that status is um starting let's save okay so we have something here and it automatically created a timestamp for us which is perfect okay if we come over here to our orders view page right this order stable here we have a lot of um foreign Keys which are primary keys on different tables and so what we need to do is we need to create a view that's going to display all of this information more specifically we need to display the seller's Avatar the seller's name and then we also need to display the last status so there's a lot of information and for that we need to create a view so let's go ahead and create a new view come here and we're going to create a new view create view to display order status order data and include order status order status time stamp and gig owner Avatar gig owner user name and what else do we need and the price the order price and that's it let's see what happens let's see if it's able to do it for us by creating this uh complex join here all right what do we have order details real nice border ID order created ID notes gig ID okay so we have all of this order information then we have OS and Os is order status we have gigs we have user extra and users and so this is awesome this will take some time to do manually so this is a really really nice last feature let's go ahead and save create this view here okay so we have orders detail view let's go ahead and view this and what do we have okay so we have one order uh one record in our order details view uh created this is perfect right we have ordered here we have everything so let's go ahead and display them uh in our app right so we're gonna go back here this is our list of orders and we can simply display them using actually we need to refresh the data Super Bass get schema refresh the schema and we have this orders detailed view look at this beautiful absolutely Game Changer this this functionality so let's go ahead and display order details here okay a list of rows and we should filter these orders uh on our username right so we should the only ones that should be seeing these orders right so what I need to do is I have this user ID I'm going to set it equal to authenticated user ID and let me double check yeah we should have that user ID there it is okay so we should have a result because that is my logged in user ID and gig owners email is robertrob.com so that is the person that created the gig and I am uh I'm the one that ordered this gig so let's go ahead and uh double check everything here this should be the well we're gonna have the price and also some text so this should be some information about the water let's go ahead and see so we have notes um gig ID status we also need the gig name okay we didn't get the gig name let's go ahead and uh get the gig name here okay order details and gig name we can add it ourselves gigs G so it should be G name okay that should do it let's uh drop this View and let's regenerate it drop view order details okay let's rerun that okay come back here or order details view we should see the gig's name and there's there's the name in fact we should probably change that so that we know this is gig's name there's lots of names there and we should do it like this G name as gig name okay because as you can see it's pre-pending that okay let's rerun that and I know it works so we're gonna go back to our app come back here get schema refresh this and we have this Auto details view and we have gig name perfect beautiful I really really like this feature come back here uh we should have gig's name right here okay so that's the gig name uh we can delete that and this should be the date uh the date there as well let's see geek order created so this could be the created date let's uh format it and this should be the image of the uh the gigs the gig owners Avatar the sellers Avatar essentially so let's come in here and come in here gig owner Avatar perfect so we have the Avatar we also need the owner's name should be under it right under the image so let's go ahead and fix it up we have this row so it should be yeah it should be under the image so we have this row here and we have this column and it should be over here or in fact it could be under this one so what we can do is we can wrap this inside of a column and then I can add another row and now we have another row and we can give it some padding something like this and I can have a uh owner uh the actual a seller so this is going to be the gig owner email okay so yeah gig owner email that's what we got right now let's use that let's use that for now and let's see what this looks we don't need top padding perfect we do need let's fix that we do need the bottom padding but we don't need top padding okay perfect all right so we have the gig uh the sellers Avatar the sellers emailed the name of the gig and we also have the the date created the order was created let's go ahead and run this and see but before we do that I want to make sure that it has a nav bar okay just want to make sure that this thing has a nav bar all right there's the nav bar let's give it an icon this is going to be our orders all right so we have a list of orders so we need to delete this category because we duplicated the page so we need to remove that all right so this is our list of orders let's go ahead and run this app and see what happens all right so here's our app and if we click here we should see our orders and as you can see these are our orders right this is our order right here I will translate your documents and this is the owner's uh this is the seller here and this is the seller zema we can display name uh that's the date and that's the information there and so as you can see in the back end we are able to create a view that pulls all this data together other and shows us our orders now there is one thing missing here and that is the price right so with the price we need to look at the tier and depending on the tier we need to display that price for the specific tier so let's go ahead and do that real quick so just so you know that this is this document translating order right and this is this gig right here if you take a look at this gig here we can see that this is the the gig right here this is the gig ID and this is this gig right here the gig ID is two this is the order that's being displayed here and as you can see the tier is one and so what that means is that if we go into our gig tiers and we take a look for this uh geek tier for Gig number two which is the translation and we take a look at the tiers here tier one price is five so it should hypothetically display five otherwise for another order it's 10 okay the first tier so we're gonna go back here and in this case what we can do is we can create a stack that that will display the right value depending on the type of tier that we're dealing okay and so the price can't be displayed above this right here so we can display the price right there and so for that we can simply create a new row and this is going to display the price so I'm going to give it a little bit of padding so something like this and what I'm going to do here is I'm going to wrap this in a stack and I'm going to duplicate it three times and I'm gonna say this is tier one this is tier two this is tier three and depending on you know which uh tier that you know our order is in we're going to be displaying that price now what we need to do here is we need to populate this data with the tiers right so unfortunately we do not have the tiers we have the geek tier ID and so we need to add the tiers to our view there right so we're going to go to the order details view and we're gonna come here and I'm gonna sell the UI to update this view update the view to add different tier prices for this link to a specific and gig series okay so something like this let's see if that works all right and there it is tier one price tier two perfect this is really really good so we're gonna click on accept change and now we have the prices for for all the tiers right and I need to add that drop order details view here we're gonna re-execute this and let's go ahead and see that should hopefully work order details view and we should see all the tiers and there and there are the tiers Perfect all right go back to our app refresh the orders the um Super Bass schema get schema update it go back here and now we can populate it the tiers here and then only display the right tier that's specified okay populate this tier one price and of course we need to format it as currency CR2 and tier three all right there we go now let's set conditionals okay I'm gonna set it conditional this is only its tier is set to tier one right we're gonna say order details view and gig tier equal to one okay perfect I can even copy this come back here conditional this is going to be two all right let's go ahead and reload the app start a new session all right so here is our app and if we click on orders you will see all the information here so as you can see we are showing the price uh for this specific tier so we have the we have the gig we have the order and we have the the gigs here that we ordered so this is five in this case and so as you can see it's displaying one order that has all the information set there correctly now let's go ahead and create another order real quick so we are gonna go in here and we're gonna come into orders now we do have another order but that order is not being displayed let's go ahead and see what's happening here so this is the translation order this is the ID here for the gig id2 that's being displayed but this order git here for this geek tier 3 is not being displayed so let's go ahead and see what's happening here so it's something having to do with either the gig or it has to do something with the gig tier and the reason the other water is not being displayed is because it doesn't have an order status so let's go ahead and create the order status for that second order that I have we're going to insert this row right here Order ID let's pick the order ID and this is going to be with this gig tier 3 and the status is almost and the status is completed click save and now if we go into our order details view we should see that second order now that it has the status and if we reload this we should also see this um the second order in our order status on the app as well okay let's come in here and there it is okay so I will edit your YouTube videos and I will translate your documents this one is the tier three 50 and this one is five okay so as you can see the list of orders is being displayed correctly now the next thing that we want to do is we want to create another page that's going to display the status changes right the various status changes that are happening with the order okay so we're gonna go back here and we're gonna create a very very simple page that's gonna list the status changes so I'm gonna create a blank page order status create and we want to pass the order ID here which is an integer and this is going to be order status and all we're going to do is list the various order statuses for that auto status ID okay so let's start out in very very um with a simple UI just to get things working this is our list view this is the back end super based query let's do order status inside a filter order ID equal to and parameter order ID infirm and let's go ahead and display it here this is the status and we can also display the created when was that status created so I'm going to wrap this uh wrap this widget in a row and add another one duplicate this and so we have status and we have this one is status and this one is going to be created at and we can format it all right let's go ahead and maybe something like this I don't know something like this I guess and now when you click on this ordered list you click on this container we're gonna redirect the user uh this is going to go to order status okay pass order ID that we have order ID we should have order ID right here and let's reload the app and see what happens all right let's click here we have the orders let's click here and we should be seeing statuses but I think we forgot to set the right permissions so if we go back here we go into authentication policies we probably forgot to set the policies we have not created the policies yet so that's what we need to do a new policy real estate policy okay now order status has a policy let's go ahead and reload this Okay click here click here and we have the order policies and we can do the same thing for the other order and this one started the job so if I add a new record into our order status for the you know particular order ID so let's say for uh order id1 I'm gonna add a new record like you know needs clarification or something like that and this is for order id1 I need clarification we should show both of these okay so let's go ahead and reload this all right click here all right and there we have it started the job need clarification okay and obviously we can sort it by the the date here right which is probably a good thing to do so order status we can sort this come in here and we could order these all right so you can order this by created that and you want to order it maybe in increasing order and that obviously depends on your specific use skill and so at this point we have the order list here as well as the order of statuses for each specific order all right now the next thing I want to do is I want to implement this real-time chat functionality this is very very important it allows buyers and sellers to communicate so you can always chat with your seller with your provider sell them that you want something to be done this way and that way and it kind of I instills trust in the platform so a very very important feature so let's talk about this functionality now typically the way you implement chat in any app is you have a couple of screens right so the first screen looks something like this where you initiate a chat with a contact or some random person and then on the second screen is where you are exchanging the messages okay but in this app the flow is going to be slightly different because we already have this chat screen here if you recall this chat screen is the same as the word screen essentially because with the people that you're placing an order these are the people that you're going to be chatting with typically and it's the same thing on the other side people that you know if you're a seller uh somebody buys an order from you these are the people that you're going to be interacting with in any case and so this saves us a lot of time because we essentially have this initial chat screen to begin with the only thing that we really need to implement is the chat messages screen and this is the screen where when you click on one of these um chats here you're going to be redirected there and you know you can type a message and the user can type a message and you're going to have these alternating messages uh displayed on the second screen and so all right so let's go ahead and implement this chat screen now the first thing we're going to do is we're going to take this order list and we're going to duplicate it and we're going to use it as a template for our chat screen I'm just going to say chats and so this is going to be the same screen essentially where you can initiate the different chats we might change a couple of things here and there but the bottom lion is when a user clicks on one of these chats we are going to get redirected to a chat messages screen with the specific chat ID and from there on the user will be able to communicate with the the buyer or the seller depending on who they are so I'm going to rename this to chat okay and what's gonna happen here is when they click on it when they click on a um any rows here it's going to do a navigation to uh chat messages and we're going to be passing the order ID so essentially the exact same flow except it's going to get redirected to another screen so let's go ahead and create this chat messages here blank chat messages and here we can just call it chat now this page is going to be accepting an order ID parameter so that way you can look up and understand the messages the the chat history etc etc so we're going to be adding a parameter called order ID and this is going to be an integer it's going to be required obviously and from that order ID it's going to look up all the messages that each one of the parties are sent to the other party and then we can display them here now before we can display the message and do everything that we need to do we need to create this special table and so we're gonna go back to Super Bass and we're going to create a new table called chat messages and this table is going to have the following Fields so we need the order ID okay so we're going to say end eight we're gonna link it orders right here ID save the next thing that we need is the user ID right and this is the user who sent the message we're gonna give it a type called uuid create a key relation users click save and last but not least we need the actual message okay this is just going to be text okay and we're done we're gonna save this all right that table has been created now as always I like to create some dummy data so that I can see what the data looks like and I can see how I can display it and to make sure that I'm able to actually get the data and display it in the app properly so I'm going to click here I'm going to insert a row and the order ID let's go look up one of our orders how about this order right here this is with the gig ID one okay so we at least can look up that gig ID user ID this is going to be me okay so this is James and my message is here is some additional order instructions okay so maybe I sent a message to the seller I you know gave him some additional instructions and then I want to create another message and this is where the seller replies to me basically they say okay sounds good or you know Etc insert a row order ID this is gig id1 I believe order id2 let me double check is that yeah order id2 right here so the same order ID user ID is this is the seller okay sounds good working on your order alright so now we have two messages for the same order right that has the same order idea so now we can go to the app and we can create a page create a screen for this and see how we can display this data from this table here okay so let's go back into our throttle Flow app and we have these chat messages right here and well the first thing that we need to do is we need to go into uh Super Bass here and refresh the schema so I'm going to get the schema and we have chat messages here okay so I'm gonna go back here and here I can build the UI to display the messages to input to have an input for new messages etc etc so let's go ahead and do that right now chat messages comment here back-end query super based query and we're gonna be doing chat messages and what we need to do is we need to filter by that specific order ID because we don't want to display all the messages with all from all the waters right we need to filter right so we're going to be filtering order ID equals to and that parameter right what we were passing okay so now we we're filtering by the order ID and this and in this case we're going to be getting those two messages because that's all the messages that we have and they're linked to that order ID okay the next thing that we want to do is we want to create a list View and on this list view we're going to be doing a back-end query Super Bass uh chat messages filter is going to be by the order ID and we're going to be calling it to order ID right here confirm confirm and then let's put a basic text field here and let's put the chat messages and we can display the actual message now at this point we're just going to see all the messages we still need to format it but right now I want to make sure that things actually work okay now let's go back to chats let's give this chats page a nice nav bar icon here search something like this that looks nice and now let's do a navigation okay so this is no longer order status this is going to be chat chat messages okay and we're going to be passing this water ID and the order ID is order details right here is the order ID alright so when they click on it it's going to go to the chat messages and it's going to filter by the messages for that specific order ID all right so let's go ahead and run our app here alright so here's our app let's go ahead into our chat screens now here on the chats page I'm seeing two or as they are from the same seller but they're different orders and so I can have a different chat with the same seller but regarding a different order so if I click on this I should be able to see the messages for that specific order now I'm not seeing anything and that is because we forgot to implement security policies right so if we go back to Super Bass and we're going to authentication we're going to policies we need to create policies for chat messages okay so we're gonna go back here new policy click here I'm gonna say allow all all and we're gonna say true here review save policy okay so now we have an allow all policy for chat messages okay so now if we go back to our app and we refresh it and we click on one of our chats this is actually the chat that we have the messages we see that we have the messages so here's some additional order instructions okay sounds good working on your order right now and so as you can see we can click on one of the chats here and it opens up the messages so the next thing that we need to do is we need to build out this page we need to make sure that the messages are being displayed correctly namely my messages I want them to be displayed on the right hand side and the other users messages I want to be on the left hand side and we also need input for the user to enter and send their messages so let's go and do that right now let's come back to chat messages and let's go and fix this up so we have this column here and what we need to add is we need to add an input box right so we need to add a text field here we need this text field on the bottom with this list you here taking up the rest of the space and how do we do that we come in here and we do expansion here so for the list view let's go ahead and make it a little bit nicer let's put uh send or enter message here and let's go ahead and wrap it in a container widget container okay go ahead and fix this up let's make the width like this and let's go ahead and wrap this container in a row and what we can do is we can add another button here right so this button is going to say click here to send the message something like this and let's go ahead and fix this container up maybe expansion remove the width remove the height as well and now we have something like this let's remove the underlying none okay so now we have a message box we have a send button here and for the send button right we're going to be adding an action search for insert insert row table is going to be chat messages and then we can simply specify the fields so we don't need to specify the first two Fields order ID we have the order ID this is the page parameter user ID well this is going to be the authenticated user ID and the message well the message is going to be the input right this is the widget State text field and I'm just going to rename it real quick input message and let's let's remove these ideas because they're going to be automatically filled in for us all right so now we have this when we enter messages they're going to be displayed right here another thing that we want to do is we want to make sure that we refresh the database here okay so we're going to go on here we're going to open this up and what we need to do is we need to make sure that new messages appear there we're going to add another action and this action is going to be refresh database request we're going to specify this list view here and that way the data is automatically going to be refreshed when we add a new message here okay so we have this now the next thing that we need to do is we need to make sure this message messages are displayed correctly okay so how are we going to be doing it well what we can do is we can wrap this in a container right to make it a little bit nicer and we can wrap this container in a row okay so that way we can specify where exactly do we want the message to appear so we have a row we have a container just to make it nicer let's remove the height let's give it a height of something like this and let's give it a width of maybe 150 okay so now we have this row that is going to display the actual message and the next thing we want to do is we want to wrap this row inside of a stack and that way we can have multiple rows now this row here let's say this is these are my messages okay so I'm gonna say my message my row okay I'm going to duplicate this and this next row is going to be other row right this is another message and the reason we do it is because depending on the message we need to place it either left Justified or right justify so my row is going to be right just find okay so we have this row we're gonna write Justified like this other row is going to be left Justified all right and my row is only going to be displayed if we are displaying my message so I'm going to set a condition here we're going to do a condition here and I'm going to say single condition I'm going to say um chat messages row I'm going to say user ID equals to authenticated user okay so this is my message and I want my messages to be displayed on the right and I'm going to take this we're gonna copy this whole thing and I'm gonna go to the other row we're gonna do a conditional and I'm gonna paste this okay except this is not going to be equal to not equal to okay so this is another person and so this should create kind of an alternating um display of messages right so like my message their message my message their message etc etc okay so let's go ahead and run this app and see what happened all right let's go into chats all right let's click here and there we have it so here are some additional order instructions okay sounds good and let's see if this works enter a message so this is my message it should appear right here looking forward to it Okay click Send and there's the message perfect so it looks good we still need to format it a little bit nicer maybe give this padding uh give it a little bit of padding and the other thing that we can do is we can display when the message was sent because on the messages table on the chat messages every row has a created field that's automatically created right so this this knows when that message was was essentially you know written and when it was saved uh to the database so let's go ahead and fix this up real quick these are some minor minor things uh let's do a little bit of padding this 10 too much not 10 looks good let's do we can also do a on the container you can give it a border radius maybe a little bit more maybe 10 and same thing here 10. all right all right actually no this one doesn't have it oh Patty English 10 okay border radius is 10. all right let's go yeah let's give it some padding padding is 10. okay all right and let's give it padding on the container as well sand is a nice number perfect okay so that's starting to look really nice and now let's go ahead and create a text field that's going to display them at the time it was Sam so we have a container we have a message what we need to do is we need to wrap this in a column okay because we want that the the the time to be displayed under the message okay so we're gonna wrap this inside of a column something like this and I'm going to add so I'm going to duplicate this okay so this is going to display under it and let's increase the container make it a little bit higher okay there you go okay in fact we can even remove the height and this thing is messages this thing is going to be the time right so we're gonna say created that and now we can format it and we're going to be doing I like relative format you know five seconds ago 10 minutes ago one hour one hour ago that looks awesome okay that looks really really nice and let's do the same thing for the other one let's wrap this in a column and let's remove the height because we don't want we don't need the height and let's duplicate this text field all right so we have this text field let's do a created uh date time format uh let's do relative all right looks good we can even make it a little bit smaller text this is 14 let's make it let's do the same thing here let's make it body small all right let's go ahead and reload this see how our new UI chat messages screen looks like click here all right so it looks good you could probably Center it a little bit here and there some you know cosmetic changes but as you can see 24 minutes ago 24 minutes ago six minutes ago it looks really good and I could send another message okay I'm very excited about this order okay send another message and there's the message a moment ago so it looks really good you can you know give it it some nice formatting as you wish it's up to you but these These are minor things the most important thing is this works okay so now if you go back if you click here there are no messages here and what you want to do is you want to display some kind of a message and you can easily do that with this list you widgets so if you click on this list the widget you have this empty list view widget right and so you can display an empty one and here you can create a component right so we don't have any components we can easily create another component here I can just create a new component and I can just search for something like empty okay so we can use something like this empty list create and we can change it seems like you don't have any messages okay and then you can delete that because there's a button enter a new message below okay so something like this change this to something else messages okay perfect very very easy then you can go back here with your widget and then you can select your component here here and now when you reload it you should be able to see that there are no messages that there's actually something being displayed telling and that's important for users because if they see an empty screen I think there's a box somewhere that they're they think that there's a problem with your app all right here's the app click here click here and there's the message it seems like you don't have any messages under a new message below hey how's the water how's the water coming along I want to check send message and there's the message and the other user they're gonna see the same thing they're gonna log in and they're gonna see the messages because they have access to the same orders right they're they're part of that same order as well it's a it's a two-party system so they're gonna see the new the new message now I do want to remove I want to clear this right so when you send it you want to clear this input very easy to do click here and you want to just clear this type clear clear text fields and input message and that's it so when you uh send a message you press enter it's gonna send the message and clear this input all right so the message messages system is now done alright so the next thing I want to do is I want to do this flow when they're ordering the product right so the user ends up on the gig page they choose the tier that they want one of the three tiers and then they press the button and this is where they order the actual gig here right so this is where the gig with the tier becomes an actual order now there are a couple things that we need to do but mainly it's about inserting a record into the right table okay so here we have the orders table and so we have the orders table and we have the gig ID here the user ID gig ID and the gig tier so all the information is here so all we need to do is create another record in this table here all right so let's go ahead and do that so let's go and check out our detail page here and as you can see we have that stack with uh three different buttons depending on the tier and this is great because now we can have a a glow here so for instance we can just add a flow insert row and we're going to be inserting it into orders and then we're going to add the fields and we're going to remove the two first Fields because they're going to be automatically uh the notes let's just uh not worry about the notes as well and now we're just gonna put the gig ID here so we have the gig ID which is the detail parameter that's being passed here user ID as well user ID is authenticated user user ID and the gig tier is going to be one okay so this is going to be one here and now let's go ahead and test this app and see when we press purchase uh if the new record is going to be created there okay if it is then we can just have the same flow for the other two buttons as well so let's go ahead and start our test environment and see what's going on all right so here's the app and let's say I go into categories and I see this translation gig translation category and I see this trans installation gig okay so I click on this gig and I see this purchase button I'm going to click on this purchase and now let's go ahead and take a look at our orders and as you can see we have a new record that was just created this notes field is no because uh we are not saving this field as you can see the gig gig ID is 2 and gig tier is one so we're saving all of this information and so now we know that the record is being created no another thing that you want to do is after you create this order you want to get your order ID right here so you're going to get your order ID back and you want to create an order status row right there so you're going to type insert row and what you want to do is you want to select order status and then you want to create another status that's going to be very very important because some views rely on order status in order to show you everything so if you don't if your order doesn't have order status you're not going to see any data in there so that is very very important so we're going to remove this order status is right here this is action output we have an order id id right here and for the status you can just have something like started order something like this okay and so here you're getting back your water record and here you are looking up inside that order record the order ID that you just created okay and so now if you run the app you will see that not only will we create an order record but we will also create an order status record for that specific order and that is very very important all right so here's the app and let's say you're browsing some gigs you like this gig right here and you want to purchase the third tier for fifty dollars you're gonna click on purchase you'll see that we have a new order status for this order ID number four here okay and we can also go to orders and you're gonna see this fourth order right here for uh gig for the gig with gig ID number one and gig tier number three and so like I said this is very very important because a lot of views rely on this information in order to display it all properly another thing that I want to quickly do is I want to create a confirmation page and redirect the user to the confirmation page so let's go ahead and do that right now so let's create something quick and easy blank confirmation and here we can just put something quick and easy text let's go ahead and Center it put that inside of a container something like this hide something this and give it some padding off the top give it a border radius and we'll also give it some padding okay so something like this make it a little bit bigger and maybe the container a little bit wide thank you for your order okay so something quick and easy you can customize it as much as you want maybe even have a flow where you're sending an email to um to as an email confirmation so that's all we need let's go ahead and go to our detail open this flow and we're gonna do redirection confirmation and what I'm gonna do is I'm gonna copy copy action chain and we're gonna duplicate it everywhere right so we're gonna do it here open paste and obviously we need to change the gigs here because this is now tier two and then we're gonna do the same thing here open paste all right so now we have a confirmation we have an order that's being placed everything looks good now in the final step I want to do a quick walkthrough of the app and see if there are some issues that I need to fix because I noticed there's some formatting issues here etc etc so let's go ahead and reload the app and just fix things that we did not fix before all right so the first thing we need to do is fix this overflow we can easily do that this is this home page and what you want to do is you want to go on the column and you want to enable scrolling okay so let's go ahead and reload that I should fix that all right there you go so there are no issues now right we have we had a little bit of overflow because this part wasn't fitting in and now that we've enabled scrolling we have all of these uh we're seeing all of this here okay another thing that I want to quickly do is I want to make sure this thing is only displaying the actual child categories not these um you know parent categories and it's clickable as well so let's go ahead and fix that right there and for that what we need to do is we need to create another view that only shows the children categories okay so we're gonna go back here and we're gonna select this view here and as you can see this only shows this null we need to create another view that's not no okay I'm gonna come back here show child view is not known okay run this and now we have a new child view come back here super based refresh schema and now we can go by here edit background query super base query and this is going to be child view okay so we're gonna get the just the children here okay so we're gonna say confirm and this is still gonna be name Yep this is fine and let's make this clickable so that we can redirect the list View and pass the category okay so we're gonna come here this is the card we're gonna add an action navigate to gigs list and gigs list expects a category ID which we have as part of this this is this ID right here let's go ahead and reload this all right so here's our app and as you can see we're only seeing the actual child categories right and these are the categories that actually are tied to a specific gig so if you click here we see this uh this gig here we see you click on translation we see this other gig here and so as you can see this works perfectly there's not a lot of issues I can search for something translate and there's my translation category and my gig here and I can also purchase these categories and it's going to show me the confirmation page it's going to add it I can click here and I can this is my categories view I can click here this these are the list of orders here I can click on messages and I can see various chats so as you can see I have some existing chats here and if I click here I'm just asking the the seller on the status and they can update me when they log into the app alright so now I want to talk a little bit about my experience building this app things I learned and things that I would have done differently now this app is fairly similar to the apps that we built before it has list views it has detailed views it has authenticate Asian these are these are all the things that we've implemented previously the major difference here was that I used Super Bass as our database backend and that is because many of you have requested for me to use super bass when building a big app and in fact I was curious myself of what it would be like to use super bass when building a complete app as opposed to firestore DB as was the case with the previous apps now the biggest difference when using Super Bass is that you're dealing with a relational database okay so you're building various tables that contain different pieces of data and then you have to link those tables through a process called adjoining and so if you do not have experience with relational databases and you only have experience with nosql databases as is the case with firestore DB then you're gonna realize that things are done with very very different personally I come from a relational database background so when I started with said when I started with programming I initially was using relational databases but still it's been a long long time since I use relational databases and so it took a little bit of time to kind of get used to it now there are a couple of things that I really really liked about Super Bass the first thing I really liked about Super Bass is the UI it's very very easy to use it's very very intuitive and it's really easy to hit the ground running very very quickly I especially like the fact that you can create various tables and then you can create special views that display various pieces of data that's important for you for a specific situation so if you're building apps that have to bring various pieces of data from different tables together and display them on a particular page or on a particular screen then creating specific views is a natural workflow I really really like that workflow because I can can create my tables independently and when the time came to actually display that data I can create a special view that displayed only the data that was required for that special page or that special screen so I found that functionality very very useful another piece of functionality that I found extremely useful is super basis AI assistant I didn't really think that AI assistant is going to be that powerful and really allow me to create amazing views by generating fairly complex SQL statements and so if you didn't have this functionality you would actually have to learn how to create the right SQL statement for your views or to select the right pieces of data or especially to join various tables together so that you have the right data ultimately being displayed for your users and while that is certainly doable having this amazing AIS assistant makes the whole process 10 times easier if not a hundred and so being able to create specific views that capture the right pieces of data for your UI coupled with the powerful AI assistant really made developing with Super Bass a joy I liked it so much that I definitely plan on making more app tutorials using Super Bass in the future now if you guys enjoyed this tutorial the next logical step for you is being able to view and or clone this app and you can do just that from my patreon page and if you're not yet a member of our amazing rapidly growing patreon Community then you're definitely missing out because when you join you will be able to view and or clone not just this app but all the apps that I built on these channels and so that means you'll get access to 100 plus ads that do pretty much anything and everything and so regardless where exactly you are struggling on your no so-called Journey chances are I built an app that solves that specific issue that you may be dealing with right now and plus you're also going to get access to additional content such as Q as live streams behind the scenes content and our patreon supported Mass requests a series where I do a deep dive on a specific topic that the community votes on and in fact we're going to be doing another installment of our masterclass series very very shortly and so if you do not want to miss out and you're looking to take your no code Journey up a notch whether you're looking to build apps for yourself or build apps for clients or even start your own software company then joining our amazing patreon Community is definitely the right thing to do and so if all of that sounds like something you might be interested in you can learn more about our amazing patreon Community via the link in the description below the video I looked very very much forward to seeing you being a part of it

Channel: James NoCode

Views: 26,041

Keywords: fiverr clone, freelancing app, gig app, freelancer marketplace, supabase nocode, supabase app, flutterflow supabase, flutterflow training, supabase training

Id: 1n4UGyNDAis

Length: 185min 33sec (11133 seconds)

Published: Sat Sep 16 2023