Bubble.io Crash Course: Building A Real Marketplace | Bubble.io Tutorial for Beginners 2020/2021

what is going on guys and welcome back to another video in this video we are going to be building a marketplace using bubble and so the idea is that we are going to be building a place where buyers and sellers can meet and sell a certain type of product in this example this is going to be a car marketplace so hypothetically somebody can go on there list their cars and somebody can go on there and buy their car so let me show you how i have a structure how it's going to work together them all the moving pieces and then we're going to go deep into bubble and start building it from scratch all right so here i have a diagram of how this is going to work the first thing you want to pay attention to is the views we have the general view this is for not logged in users so somebody who is browsing around what are they going to see what are the functionality that's going to be available next we have the buyer view and this is if you register as a buyer let's say you saw something that you like what are the options that's going to be available to you what is what are you going to see on your buyers dashboard and last but not least we have the seller's view and this is what the seller is going to see what their functionality is gonna be what will they be able to do and so they're gonna have a dashboard of listings they're they're gonna be able to add a listing they're gonna be able to view a listing edit a listing delete a listing and the buyer is gonna log in and there well first of all they're gonna see the home page they'll be able to buy a car and they could send an inquiry to the seller and then the seller might need to approve that inquiry as well and the general view is going to be basically a list of cars and you can click on view listing and beyond that you know if you want to send an inquiry or do anything like that you need to create an account and you need to log in or register as a buyer okay the other thing you want to pay attention to is the data types we're going to have now we might have more data types as we start building this app but initially we're going to have a user and this is somebody who's who's logged in and this is taken care by by bubble automatically and the user is going to have a listing so if they're buying they're going to have various you know if they're buying multiple cars they're going to keep track of the listings that they're buying and also the if they're a seller if they're on the other side of the equation they'll be able to sell cars and they're gonna have you know various listings of the cars that they're selling so they can be both they can buy it and they can sell it they can do both of them at the same time or they can do one or the other okay so there's various combinations here i can be both a buyer and a seller such as the case if i'm a private dealer maybe or i can be just a private buyer or i can be a private seller any one of those options is going to work perfectly and the other thing i wanted to start talking about is when we are building this listing i wanted to quickly list the states of the listing and i have i've come up with the following states we have the selling so it's an active listing we have a listing if it received an inquiry we have a listing that has a pending payment so somebody is ready to buy it maybe they already sent the money but it hasn't been confirmed yet and then we have a listing that has been sold and then we have a listing that's not selling okay so this listing is not active and we can modify it as we start building the app okay and so this is kind of what we have so far and so what we need to do is we're going to start from the data layer we're going to start building out our our data structure and later on we're going to start building the views and then we're gonna build the logic to tie the views with the data layer so all the logic is gonna manipulate you know whatever we do on the views is gonna manipulate the data okay and that's your typical mvc which is a model view controller framework that you should probably be aware of if you're not yet because it's very very prevalent it's pretty much ubiquitous uh throughout uh this kind of things okay and so let's go and i started a brand new app this is a brand new we just have a header that's about all we have and we're going to go into our data and we are going to start building our data types okay and so we have a user here and this is all built-in fields okay so we're going to create a new field and this field is going to be by okay and this is going to be well actually before we do that we need to create the listing field okay because that is the the the data type that we're going to be tying back to the user and this is the new type listing we're going to click create and now we have the listing type and so this is essentially what the listing is going to have so let's think about some things it's going to have it's going to have a name of the listing so the actual name and this is gonna be a text field okay we're gonna do that next is gonna be a description so this is also a text field here next we are gonna have some statistics about the car the car in question okay and so this is gonna be a brand it's gonna have a text field we're gonna have the model also a text field uh maybe miles miles or kilometers i'm just gonna put miles and that's gonna be a number meaning like how many miles does the car have we have that what else do we have next we are gonna have the the type of listing remember the listing can have various states and before we do that of course we can create a type like this or status actually it's going to be called status and we could just make it a text field but there's a better way of doing it if you go into option sets we're going to create an option set for a status and what is an option set well an option set is really a def it's an array it is it's essentially a an array of different options okay and an option set is one of them so you can create multiple option sets that represent different things okay so we're going to create an option set called status we're going to click create and here you have attributes we're not going to mess with it right now because it's not it's not required right now and then we're going to create a bunch of options so if we go back to this diagram we have selling inquiry pending payments sold and not selling so let's go and create those we're going to do selling inquiry pending payment then we're gonna have what is that uh sold and not selling sold and not selling okay and so this essentially defines the status okay the status needs to be one of these fields and that makes it a lot easier and kind of keeps things very tight when we are building our data types okay so we have the listings we're going to create a new field and this is going to be called status okay and the field type if you scroll down you're going to see status now one thing i want to do is i want to go back to our option sets and i want to put it into a capital so i want it to be with the capital uh that way i know that this is an actual data type it's not a simple data type it's it's a it's a data structure because this is a data structure it's not like text or something and that way when i when you go back and create a new field so if i do status when i choose it here it's going to be capital just like the user with the capital u capital s so we're going to create and that way when we are you know manipulating the listing uh it's going to be easier because we can just manipulate um the different statuses from the option set okay so what do we have so far we have name description we have the brand miles model okay so and then we need the image as well so we're gonna put image and then we are going to go here this is an image in case they want to upload you know an image for the car okay we need the image and that's enough to get started and so when we start building it maybe if you remember another field we can go out and set it up uh very very quickly okay so we have the listing next the user so the user is going to have listings that they're possibly buying and listings that they're possibly selling and this might be one or more they're not just limited to one right this could be one or more okay and so you want to create a new field and this is going to be buying i'm just going to call it buy and this is going to be a listing here and we're going to say multiple entries and same thing for sell okay we're going to go here we're going to go to listing and multiple entries and that way it's easy to track what a specific user is doing is this user a seller great they're gonna have multiple listings oh in this cell field is this user buying multiple cars perhaps maybe they're buying for a whole family or maybe they're expanding their car you know car garage and they want to have multiple cars then they're going to have a multiple listings of buys or or maybe they're just going to have sell or buys so it's really up to them and so this is the user here and for now this is fine okay so we just created our just two basic data types just to get things started and we are ready to go out and create the actual views the things that people are gonna see so the first thing that we wanna do is we want to create the dashboard i always start you know from left to right this is kind of why i designed it like this and so what we're going to be doing is we're going to be creating a dashboard that's going to display a list of cars and then we're going to have a view detail okay so they can go out and view now this list of cars is not gonna go come from anywhere it's gonna come from sellers okay it's gonna come from sellers so keep that in mind it's not stuff that's just there somebody needs to put there so it's gonna go from the from the sellers uh from there from the seller accounts okay so let's try this so let's go in so let's drag a repeating group here so we're gonna do that here we're gonna drag it we're gonna select it drag it here double click it i'm gonna make it i don't know eight rows or something just make it a little bit tighter maybe even 10 rows probably a good number so we have 10 here next is we are gonna uh put type of content is gonna be a listing all right and the next thing that we need to do is we need to create our columns and we do that by dragging the text field now you do not want to drag it on that on on the underline here because if you do that it's going to think that this is actually part of the data that we're getting this is simply a header field okay so we're going to click here and we are going to call it a we're going to call it the name okay so let's think about what kind of fields we want to display we're going to have this as a name field okay and we are going to have this is the name of the listing or it could be the brand well i'll just let's just call it a name and see how that goes maybe we'll add new columns later on this is going to be a description of the listing and maybe a picture as well so we're going to drag another one and this is going to be a picture right here we're going to double click image and let's align them and then last but not least is um we're going to have a so we might have so we're going to have some call of action here call to action actually and what we're going to do is so maybe they want to buy it okay maybe the action is going to be to buy it and remember this is the front page this is what people are gonna see when they're just logging in so let's drag a button here and actually let's do this let's uh let's leave that alone okay let's just arrange it nicely and let's create this data type let's create this repeating our repeating group here so let's drag the first field and this is the beginning of the our dynamic fields and if we do that so we want to send this back send it back so we can edit these fields and so this is the name we're gonna pick name here and we are gonna say okay we're gonna do the same for the description as well we're gonna drag that there and we're gonna do the same thing for the image as well and we are gonna change this to description okay description here and this is gonna be the image so we are gonna let's go into our elements tree here and we are going to select this and we are gonna drag it correctly so it looks like it's part of the repeating group we're going to double click on it and we are going to change this to image image here okay so now our repeating group is set up there it's basically loading all the data from the listings it's going to display all the listings all the active listings actually remember these are all only the active listings actually and so let's uh let's see if that works so if we go into data and we're going to create some sample data we're going to go into listings and we're going to click a new entry and we're going to create a new listing so let's say this is bmw model is m3 miles 20 000 miles status is selling description is great car slug we don't need name is bmw m3 for sale and we are gonna do that and the image let's go and find an image somewhere let's go to unsplash.com and find an image of a bmw so here is a bmw let's get an m3 m3 okay so how about this one we can use this one we just save the image okay and then we said we upload the image here and let's see if it's displaying properly all right now we click on create and the entry was successfully created we got it so we have one entry that is here and we need to tie this entry to us now it needs to be tied at the user but right now that is not important because it doesn't really matter who is tied to it is an active listing so that's perfect enough so let's see if this if this listing is actually showing up right now as you can see it's showing up right now except the image is not showing up properly but we're going to fix that later and so this is the beginning one thing i want to change is i don't want to make it a body copy i want to make it a maybe a heading or actually a dark let's do that h2 dark so it stands apart a little bit h2 dark here i'm gonna drag it up a little bit okay so this is kind of what we have so far so this is yeah this is the problem i had it wrong here this should be an image that is why it wasn't showing up properly let's drag an image actually it should be it should be an image like this so we're gonna go in here we're gonna drag it here we're gonna bring it front arrange bring to front so we can play with it and now we have an image here okay and so let's make it a little bit longer that way it expands it and let's go to this image here and we are gonna make it something like this and now it's a dynamic image insert dynamic data it's gonna do a repeating group listing it's gonna do list of listings it's gonna get the image okay and we have that there okay so now let's see if it's showing up correctly and now we have the image showing up correctly obviously it's a little bit on the small side let's see if we can make it a little bit bigger so we do that let's make it five okay there we go and let's ex expand the image let's make it something like this just a bit bigger and the other thing i want to do is i want to change the names of these fields okay so this is actually a listing name we're going to do that this is actually a listing description okay now our dashboard is working perfectly the only thing we need to do is we need to make sure that it's only showing listings that are only that are active that are that are not inactive okay listings that are only active okay and we do that by coming in here and you want to do you want to basically do something like this you want to click here and you want to do a search and you want to do listing and you want to add a constraint you want to put status equals to active selling that is the ones we want not selling inquiry so i'm just going to put selling that is the only listings that i want so we have a constraint there and then what we want is the name search for listings there is going to be the name the name okay that's what we want and we want the same thing for this as well so we're going to do do a search for we want listing add a constraint this is going to be status equals to actually let's do it another way so we click on the repeating group we can do search for listings and we can add a constraint on the whole repeating group okay so we're gonna put status equals to selling okay that is the only thing we care about and we are gonna place these backs we're gonna put these how they were before clear we're gonna put insert dynamic data current cells listing name this is going to be current cells listing description and this is going to be current cells listing image okay so it's all nice we are getting only the active listings okay and so this is pretty much complete let's run and see if it's actually showing what we wanted to show okay so if we play it if we preview it it's showing it correctly let's see if it's actually doing it what we want let's go back to data and let's modify the status of this okay let's click on the status let's click on this and let's modify it so it's selling let's say it's not selling and let's see if it's working if it's it should not be this it should not be displayed anymore and if we go into preview we should not see it okay there it is it's perfect and so yeah we should say something like no listing's fine but typically there's going to be listing listings that are going to be displayed at one point or another so let's go back and change this to how it was before this is selling they're still selling this car so this is still selling we're going to do that here and so this is correct now the only thing the next thing that we want to do is we want to add a buy button okay we want to add a buy button we're going to click on buy here we're going to click on the button here we're gonna expand this a little bit and we are gonna get to see if they wanna buy it okay we're gonna put it here and this is gonna be the buy button and we're gonna call it buy buy car okay and this is going to essentially get the user to log in create an account and this is gonna redirect them to another screen where they're gonna mark the car as sent an inquiry and it's gonna appear on the seller's side as a car that's somebody has an interest in and then they can work things out from then on so we're gonna fix this here we have that so right now the preview is done oh the only the other thing we need to do is we need a detail we want to add a detail page as well so we're gonna drop another button here we're gonna call it more info more info something like this and they can learn more about the car and they can buy it right away and this more info is going to take into the detail page which is going to have a little bit more information because we can't list all the description and probably we shouldn't be listing the description here uh because description is going to be typically very long it's going to be like a paragraph in some cases so you typically don't want to list it here you want to list the name so so what you want and this is something we're gonna do later on in that is you want the name you want uh the brand and the model okay that's kind of what you want actually let's fix that right now so we want the name we want the brand let's click here appearance brand and we want the model so i'm going to copy and paste this real quick and we want the model just something very quick model so bmw m3 we're going to copy and paste this here and this is going to be not a description this is going to be model and this is going to be a brand here very easy brand okay so that's what we have so far let's make it a little bit bigger okay so we have name brand and model which i think is ideal for what we're trying to do here we can even expand it a little bit and we can move maybe the image here a little bit then we can make this a little bit longer so we have name brand and model and we have an image we can make this a little bit something like this make the image okay and that's kind of perfect for what we're looking for the next thing we want to do is we want to create the detail page okay here's the detail the view listing page and we're gonna go in here we are gonna go and add a new page and this is gonna be a detail okay we're gonna do that we're not gonna clone it from anything we are gonna create it from scratch we are gonna add our header here to the top okay we have the header and then we're gonna have the detail page so we're gonna add a a text field here text field and we are gonna have just sample stuff we are gonna have the name of the listing actually the name might be even as the title i think that's a much better approach so we're gonna actually make it as the title we're gonna make it h1 dark okay this is the name here we're gonna center it horizontally and then we're gonna have so we're gonna have let's see what are we gonna have we are gonna have the uh the brand we're gonna have the model we are gonna have the miles we're gonna have the picture so brand model picture miles miles picture and then a description and then a description here okay something very very simple and so the brand is going to be another field here we're going to put it here we're going to put the model here the miles here the picture is going to be the picture is going to be obviously different the picture is going to be an image we're gonna do that here actually let's swap these let's put a picture on the bottom and the description here that way we have more room for the picture and we're gonna drag this a little bit lower okay and we have a picture here okay we can make it even bigger and for the description we want a we want a multi yeah we want a text field that's fine we're just going to make it a little bit bigger i'm just going to make it a little bit bigger something like this and then we're going to we're going to fix the fields before we do that we want to make sure we're passing the correct fields properly and so for this we're not going to say anything we're not going to say name this is going to be all dynamic data okay so we can actually do dynamic data but before we do that we want to make sure we're passing the fields correctly and for that we are gonna go back to the dashboard and we're gonna click on more info and we're gonna start a workflow and this workflow is gonna do navigation go to page and the page is gonna be detail and data to send is gonna be current cells listing very easy and so detailed content is not set we need to set uh the content for the detail page we're gonna do that here we're gonna double click on the page and we are gonna go to the type of content it's listing yeah it's set correctly and so we are gonna go back to our index go to workflow more info we are gonna do that and we're gonna go to this step here and current sales listing that's perfect okay so yeah it's telling us that we need to we're gonna do that right now and so it's it's passing the data correctly and now we have to display this data that we are passed through and so this is going to be dynamic data and what is this going to be this is going to be current page listing brand okay this is going to be current page listing current page listing model model this is going to be current page listing miles this is going to be current page listing description this is going to be the picture dynamic image current page listing image and now we see it and now what else do we need so we have this we have that we need a call to action and the call to action is gonna be buy or maybe go back so we're gonna drag a button here and this is gonna be another buy button here and we are gonna horizontally center it we have this and then we are gonna go back to we're gonna add another button or maybe just leave one button for now this is gonna be buy buy car okay and that's all we've done now when they buy it what is the action what is the flow and the flow is going to be very very simple it's going to change the status of the listing that is also we have all these settings it's going to change it to inquiry and that way on the seller side they're going to see that they're they're going to see all these listings that have a status of inquiry okay so we're going to go back we're going to go back to the app and we are going to go in here and this is the simplest workflow ever start edit workflow and it's gonna do a data make changes to a thing thing to change is current page listing and we are gonna do change another field this is going to be a status is set to inquiry okay so when they click buy it makes it it takes it away from the main dashboard and it lets the seller know that somebody is interested in it and that's all we have to do and it's also going to display something on the buyer's dashboard they're going to see the cars that they've made an inquiry and then they can possibly even change that inquiry or cancel their interest cancel the inquiry as well and so very very simple so we are going to go in here we are going to go to the index and we are going to do the same thing to this by by car it's going to start an edit workflow we are going to do change things make a change to a thing think to change as current sales listing we're gonna put status status is gonna be inquiry and then we are also gonna actually let them know so for instance we're gonna do something like this where we are gonna display a little pop-up or a little alerts that so they know that something did happen okay and so we're gonna go and find an alert to display we're gonna go in here we're gonna drag this alert and we're gonna display it here on top somewhere around here and this is gonna be we're gonna center it horizontally and this alert where i'm just going to call it alert main or like alert main or something like this and that way we can reference this very easily okay so we have this it's not being clipped by anything okay and then when we are doing the workflow whenever they so for this in this case if we click on buy a car we are going to create we're going to have an alert and the same thing is going to happen at the detail page as well so for instance if we go in here we are going to go start edit workflow make changes to think and then it's going to change the alert so we are going to go into element actions and we are going to go display show show element okay and this is gonna be this main alert so we're gonna go in here ah we have it as a pop-up let's go back to the design what do we have it called alert main and this is here alert main alert main main text image okay so we're gonna go back into workflow we are going to do a element action and what we want to do is we want to show a message in the alert main and that's what they are for that's what the alerts are for we're going to delete this so make changes to a thing and then show the message in the alert and the alert is gonna have a message so we're gonna go in here and the alert is gonna say actually let's go back to the workflow for a second alert main element change alert so we can change the message okay so we can change the message and the message is going to be your request by inquiry has been forwarded to the seller so that is what we have right now and we can preview let's see if things are working the way we want them to okay so we have this thing here we have this we can click on more info let's see and this is more info it's it's not displaying this which i'm going to fix in a second but if we click on buy car it should specify an alert so let's go back we're going to fix that in a second and we click buy car and it says that the buy inquiry has been forwarded to the seller and this has disappeared it's no longer it's no longer available now this is an interesting thing actually come to think of it it's probably a good idea to have it go through two steps and it's actually up to you in this case we're gonna take it off the market whenever somebody sent a buy inquiry but i think later on a much better strategy would be to have a uh be taken off the market whenever the the payment has been confirmed so later on you can make that change so let's go and fix fix our detail page real quick okay let's go fix our detail page because we forgot to specify this and this is going to appear this is going to be dynamic data and it's going to do current page listing is the the name the name of the listing okay and so we're going to make it just a little bit bigger we can even make it like really stretch it out and center it and this is already centered horizontally we can we can have something like this and now if you go to to the index and we preview it it should show it up perfectly now before we do that i want to change the listing back to selling so that it actually appears correctly since we tested that functionality and it is working so we're going to preview it and so here is if we click on more info we're going to see bmw 3 for sale and some information and we can buy the car right here okay so this is working perfectly and now we can continue to build this app and so now that we have these pieces working let's continue building the app starting from the login section okay and before we do that you need to understand how the login part actually works so that you can implement it properly because at the end of the day we need the login to work because we need to show the buyer's dashboard and the seller's dashboard and they're going gonna have to be logged in in order to see that anonymous users won't be able to see that and what you can do is you can go to page choose our header here and this will allow you to see all the elements on the setter so if you double click on this on the button you can go to the conditional okay and the conditional tells you that when the current user is logged in show log out so the default state is this one that we're seeing now but if they're logged in this is gonna go to log out okay a couple of other things if you go to the start and edit workflow there are three workflows here you can ignore this one this is only when they're clicking on the main image in the header and that basically redirects them to the index page okay very very simple and actually we need to change the image too which we're going to do in a minute but if you check this workflow they're the same workflows actually they're the opposite workflows but they they act on the same button so it says here button signup or login is clicked and current user is logged in and current user isn't logged in so when they're logged in it essentially logs the user out because the button basically tells them that it says to log out and this one logs them in so if they aren't logging this is what the button is displaying sign up or login it shows the sign up or login it shows this thing and this is exactly how it works so if we go to the index page and we click on we preview our app you will see that this is indeed the case and so here we are so right now we're not logged in we're logged out and it says to log in we click on this and we can actually log in we can sign up or login and this is taking care of bubble and we can log in easily and once we log in this button is going to say log out and the state is going to be logged in now the app knows that we're logged in and then it can do various things and so what we want to do now is we want to build various dashboard pages and i recommend for the sake of the simplicity we just do it as one page and that one page is gonna have their buyers dashboard and their sellers dashboard as well and so we're gonna do that right now we're gonna click on index add a new page and we're gonna call it dashboard okay it's gonna be dashboard we're going to start from scratch and we're going to build it right from the beginning and so we want to go to design we want to put a header in there okay we're going to drag this header here we're going to put it up on top fix it up a little bit now we have the header and now we're gonna build the dashboard and it really depends how you're building some apps uh some apps in the wild they have a separate dashboard they have a buyer's dashboard and a seller's dashboard you can build it as one i think you know if you want to keep it simple this could behave as one page here and so we're gonna put a text here and we are gonna center it center horizontally and we are also going to change the style and the style we're going to make heading dark yeah h2 is good or yeah h2 is fine we're going to copy and paste it on the so we're going to leave it here we're going to copy and paste the copy copy and paste it we're going to expand this window here and so this is going to be the buyer suck buyers buyers dashboard here and this is gonna be the seller's dashboard sellers dashboard and so what's gonna happen is the way i envisioned this app working is that in the buyers dashboard it's gonna list all the listings or all the cars essentially that they have expressed interest they basically clicked on the button and they send it for inquiry they sent an inquiry and then the seller's dashboard these are the cars that uh the the user is selling okay they're gonna have they're they're gonna be the listings where the seller is the user that's assigned to the listing and same thing for the buyers these are gonna be the listings where they have the inquiry tag and they are assigned to this specific buyer because we cannot you know if you log in and you see all the the the listings that were sent for inquiry uh it's not gonna work there needs to be security they need to be assigned to the specific user okay so we are gonna go and put this repeating the first repeating group here and let's drag it a little bit lower here we're gonna expand this repeating group here and we're gonna do this and we're gonna put so we have it here i'm gonna put five rows just to make it a nice even number if you will not not really even but but five is a nice nice round number and then we're gonna copy and paste this on the bottom okay and so when we are creating this dashboard remember we actually set up the user here so if we go to the data we have a user and they have a cars that they're interested in they're making buyer inquiries and cars that they're possibly selling to and this could be multiple cars one user can be transacting on both sides of the table they can both be buying cars and selling cars so if we go to our design what we want to do is we want to have the type of content listing but the data source is going to be current user by okay that is because the current user buy is essentially an array of listings and the same thing for the sellers dashboard we're going to have a content type of listing and when they click on it it's going to be current user cell okay and that's all configured correctly now we're pretty much done now because we are storing the actual cars on the users data type in the user itself it makes it very easy we don't need to go out and we don't need to search the listings by user type or anything like that it simplifies things a lot we just need to make sure that whenever a a listing is came we just need to make sure that whenever a listing is started whenever we are actually starting the listing whenever somebody lists a car for sale it needs to be assigned to the user so when they create the car if we go into our index we need to create actually add listing for sale and all of that so in order to do that we're gonna have a seller's dashboard here and we're gonna have more features here so if we go in here let's make it a little bit longer let's expand it a little bit and so we have a seller's dashboard and we're gonna add a feature we're gonna add a button and this button is gonna be add a new listing okay so they wanna sell a new car they just they have a car add new listing okay we have a seller's dashboard and this is where they're going to go out they're going to have you know they're going to create a new listing and that listing is is not only it's also going to be in the listing as well but it's also going to be assigned to them so that we can see it on the dashboard okay so we're gonna do this right now we do not have a add new car so we're gonna create this page now add new car we are gonna we are actually going to clone it from the detail page so this is gonna be add add listing we're gonna make it like this and we're gonna clone it from the detail here okay we're gonna create it and so here we have it so this is current listings name we do not this is not a dynamic field anymore so we need to say add new listing okay we have it here now the brand is also not gonna be we are gonna have a we're gonna or these are all gonna be input fields now okay so we're gonna drag an input field we're going to drag it here and remember the input field we need we should always label it correctly because we're going to be using the data i don't really care what these fields are called because once i set them i forget them but for the input fields you wanna label them somehow so i'm gonna call this input dash brand okay makes sense right and so we're gonna delete all of these we're gonna we're going to delete them here we're gonna select and we are going to delete we're going to delete them one by one here and we're going to drag and drop new fields so this is the input field here actually let's copy and paste this one copy it's a lot easier copy and paste and the description so all of these are input fields except the picture which is going to be a picture uploader here okay and obviously you can have more pictures you can have multiple pictures if this was a truly real um car marketplace you would have multiple pictures and that's that's absolutely fine you can do that as well you can upload multiple pictures depending on how you do it and so that's fine but for the purpose of this tutorial we're only going to have one picture uploading so we have the brand input brand we're gonna have this is going to be input model this is going to be input miles content format is going to be an integer this is going to be description let's make it a little bit bigger here something like this this is going to be input that's this is how i always um abbreviate description desc desk and then this is input picture input picture or input image let's just keep it as image i think i've used that before okay so now we have the basic stuff i think this is all let's take a look at our data see if i'm not missing anything brand description image model name status so status we're gonna set ourselves we forgot name i believe so we're gonna go yeah we don't have name here so we are gonna put because we need the name of the listing okay so we're gonna select all this drag it a little bit lower here and we are gonna make it as the first or you know you could put it just below i want i want the name and description to be together because they're kind of uh logically the same thing they're user defined so we're gonna have it here just gonna fix it up a little bit and this is going to be the name maybe you want to make it first it's up to you name here and this is going to be input name all right let's see if it's aligned nicely okay let's fix this up all right so now we have brand model miles name in the description okay and so they can uh insert the stuff brand so actually yeah brand model miles name description and then we also have the status which is kind of a hidden field that we're going to be working with which we are going to be modifying ourselves we need to change this to add listing and button add listing and that's pretty much it now we can set up our workflow and so this workflow make changes to listing no we're gonna add a new one we are gonna delete this one we're gonna create a new one this is gonna say uh data of things create new thing or we're gonna create a new listing and we are gonna set fields okay we're gonna set fields so the brand is equal to input brands value the description is equal to input description value the image same thing input input image value and then we have what else we have miles input miles value then we have model inputs model value then we have name input input name value and last but not least or definitely not last and is the actually we have the description okay so we have everything right name now we just need to set the status and the status is going to be selling because now we have set it to selling the next thing we want to do is we created a new listing but we also need to add it to the sellers okay so what we want to do is make changes to a thing we are gonna change our user current user we're gonna going to go click and we are gonna sell and we're gonna add add at this result of step one okay because we just created a listing this is why i like bubble it's very intuitive you don't have to code all of this it's gonna be a little more complex to code all this so when we add a listing we create new listing make changes to user and then we can redirect them to their dashboard okay so we are gonna navigation go to page and the pages dashboard okay and that's it we don't need to send any data because we you know the dashboard is going to pull data by itself so let's see if this is working let's go to our let's try the flow and actually we can we can try this flow here all right so now i'm logged in the button is a little bit off we're going to fix that in a second and now when we create this listing is going to be associated with our account correctly and so we're going to put the brand is going to be bmw we're going to put m4 miles let's say 15 000 miles name great bmw for sale description awesome bmw for sale buy it today and the image i'm gonna upload an image images on splash i'm gonna go to unsplash on splash and we're gonna find a bmw image to upload so here's a bmw we can save it here okay and here's that nice bmw for sale also we can add another field color but you get the picture i think we're missing a color we're probably missing a couple of other fields but i don't think it's that important so we're gonna click on add listing and what do we have it's going to go back and it should display it here let's take a look why it's not displaying we're going to go to data we're going to go to app data listings so here's that awesome bmw for sale it's listing and it's not let's take a look so we have the unique id for this this is correct it's selling let's check the status the status is selling so that should be set correctly and it we have it here set up let's take a look it's why is not showing here uh let's let's edit this field real quick we're gonna go to the dashboard we're gonna take a look current user cell yeah that's fine current user cell okay so it is here but we forgot the most important thing we forgot to actually set up the fields here and that's very important all right so let's set up the column rows real quick so we need the text column row this is going to be a uh this is going to be the model the model actually this is going to be the brand we're going to put the model the model here and this is going to we're going to copy and then we're going to put miles here just something simple we're going to put miles we're going to put miles here and now we actually need to put the actual field so it's pulling up the data because it's loading correctly the information it's just not displaying it because we haven't actually put the fields in there okay so we're gonna put this here we're gonna put here and we're gonna put this field here and now we're gonna pull the data and we are going to put insert dynamic variables current cells listing brand this is going to be current cells listing model this is going to be current cell listing miles okay that's it and now it should work because we're doing the right thing and while we are at it we want to do the same thing for the buyers because we're going to have the same issue so we're going to drag and drop it here just going to align it with the other one okay we're gonna do that here and we're gonna do the same thing here we are gonna drag this field here okay and this is going to be current cells listing yeah exactly this is exactly right we don't even need to modify it because these are different listings remember these are these are now the buyers listings and these are the sellers listings so everything inside is going to be the same it's just the actual data that's pulled up is from the buyers and the sellers okay so now we have it correctly the other thing i want to do is i want to add a couple of buttons here and so the buttons is going to be so for the sellers uh maybe they want to take it off the market maybe they want to edit so there's a lot of things that you can do and let's just say we want to edit so one button could be added and we're going to make it smaller because edit is not we're going to make it edit and then i'm going to make it smaller and then we're going to add another one that's going to take it off the market okay and you know you could add multiple values multiple options uh judging by how i do it here and remove off market something like this and so the other thing that we need to do is we need the status in there okay so remember they are the seller and they need to see what's going on so we're gonna drag this here and we are gonna put a status okay very important as a seller they need to see where the car at our you know are people making offers is this on sale is this not on sale so i'm gonna put that here and i'm also gonna expand this a little bit just running out of room and we are gonna put this here we're also gonna expand this as well okay and now we have a lot more interesting things and we wanna send this back sent to back and now we can reach this and so yeah so we can actually do remove from market okay remove off market something like this very simple let's make it a little bit longer okay and so this is going to be the status so we're going to put status and this is going to say status uh it's gonna say status here status status display so remember status is actually an option set and one of the attributes is that in that options option set is a display attribute and that is essentially the the text it's essentially the uh the displayable value the read the readable value of that option set and so we're going to go in here we're going to expand it just a bit and it's going to display the status and we're gonna do the same thing for the buyers because they are in making offers they wanna see okay i made an offer for this bmw is this are we gonna are you know something gonna happen is the buyer interested in selling it is that the buyer act on it or not okay so we're gonna do this we are going to let's see i'm gonna do it this way i'm gonna fix it up a little bit and that is all we have and the same thing so they're buying they cannot edit it obviously because they do not own it but what can they do they can cancel the request so here we can take it off market and the buyer can what can they do they can remove it so i'll expand this a little bit okay and they can maybe they don't want to buy it anymore so this is cancel cancel i'm just going to put cancel but just just for this simplicity say here cancel and that's going to change it from inquiry to back to selling okay and so we have the buyers dashboard we have a status status display everything is nicely set up let's make it a little bit longer here okay all right so now that is fine let's fix it up a little bit select horizontally center horizontally center horizontally we have this here we have this as well okay let's actually center this as well center horizontally we have brand actually this why we have too many brands okay we need to fix that brand model mile status let's center horizontally here okay just to fix it up a little bit and you know i'm not gonna be messing too much with the design because that is i guess a topic for another video i just want to show you how to make it work because design is a very subjective thing and that really depends on you know on what you're on what you want to do so we have brand this should be model this should be miles miles this should be status so we're gonna align it here align it here we have model brand model miles status okay brand miles my mouse brand model mouse status now we need to fix the actual data and so let's take a look this would be model this should be miles this should be status and it's already there all right so now we have both the buyers dashboard and the sellers dashboard let's fix this up a little bit center horizontal it's already centered so let's enter this okay yeah looks good let's fix that center horizontally all right so for the buyer they are making requests off the main site okay they're making it uh they're making inquiries okay they can only cancel it on the seller's side they can edit the listing they can take it off market they can delete it there's so many things that they can do and maybe later on i'll add some of the options but right now i want to show you the main flow okay and so when they click on edit we do not actually have that page we have a detail page but we don't have an edit listing page so what we're going to do is we're going to create a new page we're going to go here add a new page this is going to be edit listing and we're going to clone it from add listing we're going to create this page here we have an edit listing we are this is our this is now edit listing so when the ad listing we are not going to be doing anything so we need uh we need to make changes we don't need to make changes to user because we're editing it uh we need to make changes to the listing so we are gonna go in here so we're gonna delete this actually and we're gonna delete all of this actually and we're gonna say so this is actually let's take a look so this is not add new listing this is now edit listing edit listing okay all of this is gonna get filled out and it's gonna say edit edit listing okay now let's go to the workflows and the workflow is edit listing it's just gonna modify the listing with the elements so we're gonna go into data make changes to thing thing to change is going to be current page listing and then we have all the fields okay and so we need to actually set the brand to the input brand input brand value we are going to set the description to the input description input description value we are going to set the image to input yeah let's see input image value then we have miles is going to say input miles value then we have name inputs name value and then we have status so the status they're not going to be changing the status here because i think this this field is only going to be for the description the status is going to be changed in other ways so the status is going to remain they can change it in other ways or it really depends how we're going to do it now we need to pass the data here okay so we are going to go back to dashboard and when they click on edit we need to make sure we're actually passing this data so it's going to go to page detail and we need to send the data and this is going to be current cells listing okay and so we're having an issue let's see uh remember to fill out the key okay we're going to delete this actually because we don't need that key and now we have the edit listing set up so if we go to the dashboard we're going to have the edit listing but remember we want to redirect them we want to always redirect them actually when we click on yeah so we have edit listing if we click on this start edit workflow make changes to think and we want the navigation to go to dashboard dashboard is there you know the number one thing we're not passing any data we want to go to dashboards so if we go to index let's go to index actually let's go to dashboard that's kind of what we're working at and let's load this up let's let's see how it's working and what do we have now we have a listing we have a listing here we can edit it we're gonna click on edit it's gonna display it and we forgot to make this feels editable okay so we are we need to do that right now because we are we were you know we made a copy of it so we need to make sure that it's editable we're gonna go here we're gonna click on edit start edit workflow yeah go to page detail it's gonna be page edit listing okay data to send okay yeah so they were editable we were just not sending them to the right page and now so we're gonna put in the initial fields now all right so what we have to do is current page listings is going to be the brand we have it here this is going to be initial content current page current page listings model here it's going to be miles current page listing miles this is going to be the name this is going to be the description here current page listing description and this is going to be the picture dynamic image current page listing description alright so now we're good to go we can click on edit listing start and edit workflow we have that done make changes go to patch dashboard we have that done let's see if that's working let's go to dashboard let's preview it and see if it is working correctly so we're gonna go to edit and it filled it in correctly okay so we have it all set up and so for the picture there's a little bit of a different flow is that we can display the existing picture but in order to modify it we need a picture uploading so we're gonna have something like this and then if they want to modify it we can do we can essentially so we can display an existing picture and then if they want to modify the picture we actually need a different field and this is going to be this picture uploader okay and so this is going to be a little bit different so if we expand that you're going to have you're going to see this existing picture and this is the you know display image and this is going to display their image right now so we're going to go inside dynamic data this is going to be current page listings image and this is going to display their image but if they want to change it they need to upload it okay this is how it works or they can upload it right now if that's what they want so this is change image upload new image we're gonna have something here upload new image or replace and then we're gonna have the picture uploader here and this is going to be input image we have it set up here and then they can upload a new image here if that's what they want to do and so if we set it to input image is valid we want to modify it here so now we are modifying it and here input image is not valid okay we're going to change this we're going to click on this change it to not valid isn't valid isn't valid that means we we don't want to modify it we did not input the image we're not going to be modifying the image and so let's see if this works we're going to go to dashboard we're going to go into preview and now we have the image here we're going to click on edit listing and now we have the image set up so if we go to edit here we have the image here and now that image is showing up properly okay so this now works so what do we have let's go back to our dashboard we're gonna go back to dashboard we're gonna click on preview we have the cars here we can take it off the market let's do that right now this is going to be very simple to do it's going to be a quick workflow so when the off market button is clicked we are going to change data make changes to thing we're gonna change the current sales listing current sales listing is going to be status status is going to be not selling not selling that's all we have to do so if you do that we are done so if we go back to our edit page are we displaying the status we are displaying the status all right so let's preview this and let's see if that's working oh we forgot we need to redirect them to the dashboard and so this is selling we're going to click on off market now it's not selling you see it says not selling very easy we can also make it oh we can we can change it we can you know set it to on market okay we can even do something like this we can start edit workflow make changes status not selling and we can do that only if you know it's not selling so we can change not selling to status to make it the inverse of that if you want so we can make it not selling only when status is selling and when status is not selling we could make it selling so that's a little bit of an advanced functionality that you can implement later on all right so now we have this now we have this status this is buying and let's say they are browsing the main page a buyer comes in they are browsing the main page so let's go to the index and they want to buy the car okay so we are going to start the workflow make changes so it makes changes it says status to inquiry and now that once they do that from the main page that car should appear in the dashboard okay and so let's do that do we have that working let's see if they have if we have that working properly and so we are gonna go to the main page here we are on the main page we're gonna click buy car the buy inquiry has been forwarded to the seller and then we remove it here now if we go to the dashboard if we go to the dashboard here if we choose dashboard here you should see that car listings in the buyers it is not because we forgot to add it to the buyers uh to the buyers event so we we take it so if we go to the index and they buy car is clicked we also need to ch to add that car to the buyers um list of cars so what we need to do is we need to say uh data make changes to think we are going to stay this is going to be current user make changes we're going to set up buy and this is going to be add and this is going to be current sales listing now we are interested in it and now this is what it's going to do and we want to show alert later on so we want this element action show alert show message in an alert box alert and you know it's gonna say we're gonna change the alert message your message your inquiry has been sent to the buyer and now once we click buy it's it should display it on the dashboard and so let's say we're gonna preview the dashboard see what's going on inside the dashboard and so let's go we have this here so let's say this is selling right now this is selling and it's not selling so we're gonna set it to selling we're gonna add another button so we can manipulate it so we are gonna go in here we are gonna set this so i'm just gonna make it a little bit smaller we're gonna put this this is gonna be off i'm just gonna make it off very simple and i'm going to we're going to make this on so that we can manipulate it inside the ui and so we're going to start workflow button on this clicked it's going to data make changes to thing make changes to a thing to change did we do it correctly no we did not do it correctly that's why it's not showing up and now it's going to show up properly now we can click on that start edit workflow make changes to thing now we can current cells listing and we are going to set the status to selling okay they decided they don't want to sell now they decided to sell it and now we're going to go to our dashboard we are gonna preview it and now we should be able to set that car back on so we're gonna click on now it's selling here okay and so now that it's selling we should be able to see it on the main page so if we click on this this is going to lead to the main page here and now this car is back on the market so if i click on buy it removes it from the main page but if i go to the dashboard here's the dashboard we're gonna load up the dashboard i should see it here and so here it is inquiry inquiry and now i am you know i'm both the seller and the buyer for that specific car and we have on the buyers we have it we can cancel it and when we can do cancel it's going to go back to selling so let's let's quickly do that we're here we're going to click on cancel we're going to click an action we're going to change make changes to the thing change current sales listing we are gonna set status to selling it's no longer inquiry selling okay we have that and then that's it it's a dashboard we don't need to redirect them anywhere and so if we refresh the dashboard you are gonna see that now we're gonna click cancel and now it's selling actually we need to remove it from the buyers as well we're gonna click on cancel start edit workflow make changes and we are gonna data make changes to a thing uh user current user change another field it's gonna go into so they're in the buy we are going to remove and we are going to remove the current cells listing perfect because this one cancel is adding it when they click on buy it adds it now it remove it so we're going to refresh this we're going to click on cancel and that's it it's removed from this list automatically so that car is going to be back on the market so if you go back here it's back in the market so i can click on buy again it has been sent i can go to the dashboard so let's go to the dashboard here and now i have it here it's inquiry inquiry you know there's all this logic you can take it off the market put it on the market obviously you know you don't want this button to be off the market when there is it's in the process of inquiry because now somebody's interested in but in the buyer's side we have it here i could put cancel and now it's back selling it's going to be visible on the main page and i can edit it i can change everything that i need to change i could take it off the market i could do so let's go back i can off now it's not selling so it should not be listing unlisted on the main page it is not because we're only listing the listings that have the status of selling and now if i put it to on it should be back here on the main page okay now it's here now people can view it now you know people can log in creating accounts and all that and so now we have the basic flow of how this marketplace is going to work obviously there's a lot of more things that you need to do you need to kind of modify i have here ebay which is kind of what the marketplace is about but you need to modify a bunch of things uh you need to maybe display other fields you need to change the flow how it works on the dashboard the fact that you cannot take it off the market when it's in the inquiry state you should not even be displaying bonds so there's a lot of things that you you need to do if you want to get to version 1.0 but right now we have a minimum viable product we have something that's working and it took us only a couple of hours to do and this is all possible with bubble you can pretty much build any kind of app using this system and that is all i have in this video i really really hope you enjoyed this video let me know if you have any questions or comments try it out let me know if you have any issues let me know if you're not sure about anything i answer all questions would love to help you out and like this video if you enjoyed this content i would really appreciate it leave a comment too i would really appreciate that as well and subscribe to the channel if you haven't already because on this channel we're all about no code we're all about building apps without having a technical background or a computer science degree so i really hope you enjoyed this video let me know what you thought about it thanks so much for watching and i will see you in the next video

Channel: James NoCode

Views: 15,461

Keywords: bubble.io, bubble.io tutorial for beginners, bubble.io tutorial 2020, calculator bubble.io, how to build an app with bubble.io, bubble.io for beginners, how to build apps with bubble.io, bubble.io custom states, what are custom states in bubble.io, no code for beginners, what is no code, no code tutorial 2021, what are custom states bubble.io, bubble.io marketplace, how to build a marketplace, bubble.io option sets, bubble.io crash course

Id: SKqDP2s3axs

Length: 76min 11sec (4571 seconds)

Published: Tue Dec 22 2020