Bubble.io Tutorial for Beginners - Build a Marketplace Web App without Code

hi guys my name is Matthew this is a tutorial to teach you the fundamentals of bubble by building a simple local marketplace app from scratch so if you've had very little or no experience with bubble before my intention with this tutorial is to show you how easy it is to actually build a fully functioning web application and not that much time and what we're going to be building is a notice board for climate change volunteer opportunities but that's not really the interesting part interesting part is that this app that we're going to build is just going to serve as a template for a general marketplace application market base application being one where you have buyers and sellers or any two actors really who are looking to trade with one another in some shape or form doesn't have to be monetary trade and so my intention is to show you how you could go about building such an application so you can think about how you would build it in your own context because I'm sure you have in your mind some web application or applications that you would like to bring to life and it's probably why you're watching this video in the first place and so I hope that when you walk away from this video you feel empowered to go out on your own and build those applications using what you've learned here as a solid foundation so let's crack into it alright to start once you've created a bubble account you will find yourself on your home page which has a list of all of the apps that you've created if you haven't created any obviously you won't see any so to create and you want to click this button over here called new app and we'll call this our Red Lion I think I have a some reason and apostrophe oh my oh and by clicking on create a new app bubble will do the work to generate a new editor for us where we can work on on our app and when you get an app for the first time you'll be seeing with this the application assistant just prompts you for some some answers things like if you want to connect a domain name if you want to name your app if you want to really give it some information to accept payments kind of thing it can be useful for now we'll start with a blank page and we'll close the assistant and this is where we find ourselves first so the bubble editor is made up of a few different windows which you'll find on the left hand side here today we'll be talking mostly if not exclusively about design work foot and data so we'll start the design tab because that's what you're going to be spending most of your time with with your app most likely the design tab is just where you drag and drop elements onto a screen so I've grabbed a text element from the side here and each element has this little dialog box where you can edit various various components and so for example this this text box if I type it in here you know our red line let's say and I can change the size of that font by either choosing a pre-selected style just like you would in any sort of Word document all the other way is to actually not select any style explicitly by clicking this blank bit up here and then you get a little bit more granular control over the the font size and the type of font all this kind of stuff for now we'll just leave it as it is so this can kind of serve as a bit of a crude a bit of a crude heading for our page right now and you'll see that if we actually preview our a parade at the stage then the will would just be dem presenting with a blank page with this text on it so if I click preview on that right-hand side which is how you generate a preview of your app you'll see this is what our app currently looks like obviously no interactivity no no anything because I've only got this one text element the other quick thing to note right now you'll notice this grid on the screen that's extremely useful for keeping your design tidy on the fly because if you go into the grids and does menu up here and you look down here you'll see that there's some options that say snap elements to grid snap elements to edges end grid and all that means is that if you have a new element it will obviously just snap into to be aligned with the grid or if it's elements and grid then it can actually can actually snap to the edges of another element too so that's just one thing sort of I like to have on all the time you can turn off you can change the size of the boxes you can even change the color so get a little bit of control over there it's good to try to keep your app design tidy don't necessarily need to design it from the get-go generally it's a good idea to to work on the functionality of your app first and then tidy up the design later but it can it can hinder your your the the design of the functionality if in fact your app is a mess so grid is a good way to keep it tidy so starting on this app but we're thinking from the perspective of somebody who's using it the first thing that they might want to do if they are somebody who wants to create a volunteer opportunity is input to the information about their their volunteering position so the way that bubble allows a user to to give information to the application is using input fields so input fields are another type of element that we'll find on this left hand menu by scrolling down and there's a lot of different types of input forms and we'll cover a few of them today we'll start with the most basic one and that's just a box which if you preview your app you'll see it just allows the user to type something you'll also notice that this type here text disappears when I type that's placeholder text and that's something that you can change with in the app so I could say here you know position title just sort of prompt a person who's going to input the information about the position that they're they're there they're posting about to give that particular piece of information into this particular input another way to keep your inputs are labeled is just to have a little text box over the top so I could say you know what's the name of the position and text is being cut off so we can drag it along and now you know now we have a nice little way and if a fresh this page by clicking up here whenever you make changes to your app you need to refresh the preview otherwise bubble might not handle the app correctly so you'll see that this is now sort of a good starting point for a web form for the person who's created a volunteer position post to input their information so we'll create another one over here for the the organization that they're from one way to quickly create elements of the same type is just a control drag and if you do that it'll just duplicate the element that you've dragged so here we want to say the position to the position title we'll go we're gonna I forgot how to works well with organization for a second it we can do the same with our text box what's the name of your organization and now we probably want to get the rest of the information about the position so somebody might already want to specify what's actually involved sort of a description of the tasks that you would do in such a in such a position so we can we can make this one say sort of something like what what tasks does this position and tail and you know obviously that reads a little bit dry but you can you can change the coffee to your heart's content that's that's more of a user experience question so what tasks is this position entail and you can say you know list all of the various things you need someone to do now you might already have noticed this is quite a small text input form for somebody who wants to list all of the various pieces of information so instead of using this input instead might want to use the multi-line input which allows somebody to type a lot more within the input so just to show you if I you know sort of go to the end of this it'll just drag cross like that rather in here I'm allowed to space and everything like that here spaces don't work sorry enter doesn't work to create a new line so we want to use a multi-line input since we've already configured this one one easy way to just change this into a multi-line input is to right-click and go replaced by another element and you can only do this with elements of the same type so you can't replace an input form with a text element but you can replace it with a different type of input so what we're faced us with a multi-line and bubble has generated it up there so we'll just drag it back down in fact it didn't quite work as expected so I just control Z then to undo you also have your undo redo buttons up here we'll just we'll just retype that text so what are all the things you're someone in this position to do okay another thing that we might want to specify is how many hours you would expect somebody to have to devote to such an hour um so how many hours does this position require and we could make this an input sort of standard input form as well but it might be nice to get a little bit of standard well create a kind of a common standard among the answers that people might give so we're going to use a drop-down instead for this and a drop-down allows us to actually specify what answers people can give so we give them a pre-configured list to choose from so with a drop-down you can just add in a whole bunch of static choices and we'll cover the difference between static and dynamic and due course but for now just just know that here we can just create a list of all of the options that we want a user to be able to select so for example we could start with less than three hours a week maybe between three three to six hours a week to keep this a little simple and short I won't list a million different options but we could say you know between 1020 a week and it's a little inconsistent here three to six hours a month you know but you can create as many of these as you want and when you as a user encounter with a drop-down it just behaves like you would expect it to you can select an option just like that the other thing two more things I think would be useful here to make the to make the posting of the volunteer position a little more appealing we might want to add a picture so add an image to your post so that allows the person creating this to upload their own image and because we're taking information from the user and plugging it into the application that always always means we need an input form well not always you can of course connect up to api's and this kind of thing too to get information from other services but that's a story for another day for now we'll use our picture uploader drag it in here and there's a few things we can configure here of course the the placeholder we can have a image already sort of there as a as a always as a placeholder image actually that once the user clicks on it it will disappear and they'll have the option to upload there so just to see how that works you can click this and you'll enter your browser where you can upload a picture the last thing that we want I think is a way to to specify the location of this volunteering position you know this is presuming that it's in a physical location if it was a remote position and we create that option as well but let's just for the sake of simplicity imagine that it's a it's a it's a physical location based volunteering position so you say where is this opportunity located versus volunteering shouldn't you locate it and instead of using an input form and instead of using a drop-down which we have can't list all in million different locations that there are we have this very handy feature within the search box input so if we draw a search box here bubble will actually I believe it does this by connecting to Google Google services a search box when configured correctly can actually allow us to search for search for pieces of information that already within our application or it can pull information from Google via the geographic places choices style and this is is super simple to setup and extremely powerful because a five star type in here Hamsterdam you'll see that I get all of these options and and and you can go really granular you can go down to the street level as well so you know for now we'll just click Amsterdam and that's going to be really nice because that information we can even plug into a map later on if we want to and it also is also just a bit nicer from user experience point of view because at all whatever feels I don't have to type you know completely my my address so now we have all these input forms and you know that's it's a pretty good start I want to just breach one good practice at this point that you should keep in mind and that's use the hell out of groups we have at the moment just put all of these sort of disparate elements on our page and if we look up here the elements tree this will show us all of the different elements that we have and you see it's quite messy if we kept adding elements to this page it would be really really hard to keep a track of things and you know it also means that if we wanted to add something else here that meant we want all of this to be moved up well then we'd have to sort of individually we'd have to sort of control click to not select multiple things and drag them up and you know that that's going to be a nightmare so instead we want to group similar elements together and you have under here the containers submenu where you can create various types of groups the most basic one is just a container which if you create it you are able to drag elements inside of it when it highlights red that means the element your dragon will be put into the group upon your release of the mouse and now you can drag that around and you'll also see that these elements are now nested in the elements tree under this group a that we've just created to access the the parameters of any element ie access that little dialog box that we've been using this whole time you double click on an element so that so it shows us the group and groups are something we can talk a bit about in this in this video because that's what allows us to pass information that that we create or that users create around our application and in a really kind of intuitive way so for now we'll we'll just undo this because rather than create a group and then drag all these elements in correctly we're going to use a little trick to do this even easier if we control click and multiple select similar elements or different elements rather and then right click we have this option group elements in a group and that will just automatically create a group for us so that's a really really sort of handy way and we can do this for all of these elements just so that we keep the title and the input stick together and it's gonna make it easy for us in the future and and you do want to do things like that you knew you know you do want to think like I'm gonna have to maintain this website I'm gonna have to change it so while it might take a little bit more time to do it now it's a really small investment for the time that you're gonna save later on what I also like to do is is group everything in the page in one sort of master group so all of these groups here and the text I want to have within one group and that keeps it very tidy for me and it also keeps the group separate from the page and I'll show you why that's why that's valuable in a minute so if I control click all of these elements and then I group them in a group now I have this group G and just in a very intuitive name so we should change it we haven't talked about naming groups or naming elements yet but if you do click up the top of the dialog box you have the option to change it so I will just call it main for now it's sort of the way that I do things and now we have this main group which is actually separate from the page then main has its own parameters but if we double click on the page itself which is by default the index page will also see a dialog pop up for the page so the the page is essentially your first group it behaves just like a group but it's technically not a group and there is you know you can run into a little bit of confusion when you're passing things around your application and just for me it works to keep all my all my elements in a group that's separate from my page it makes things just a little bit easier for me to manipulate so that's just one you know quick good practice tip that I'll share already at the stage but back to the functionality so we now have the opportunity for somebody to input all the information they have about a particular voluntary position but you know if you go onto that page it's not really clear what I have to do to sort of trigger the sending of that information and you probably won't be surprised to know the way that you can do that is with a button so if you didn't see it already you have a button element over here and we can drag that and the bottom of our box and we can give it a name like create volunteer listing and upon somebody clicking this button we want our application to basically take all of this information in such a way that it can present it later on to somebody who's searching for volunteer opportunities so I'm gonna have to now explain how bubble handles data for us to really understand how this works if you look at this diagram right here we have our input forms as the vehicle for taking information from the user and collecting it essentially within our application so those are essentially you know the windows into our house or the or the letterbox we've got different shaped letter boxes for different types of packages of information that we want to collect you know we had a picture or an image shaped one for the image that we uploaded we have a text with multiple text based shapes and so that's all good you know that those parcels or packages can be now passed into the house but now we need a way to organize them once they're in our position so that's what the database is for we need to sort of set up the shelving units in our house and pre configure them so that we can very easily take the the packages of information that were being passed and and organize them and have them ready to serve and present to to people who are asking for that information later on so within your database you might have multiple different types of shelving units and of different sort of sizes depending on the type of thing that they are that they are holding so in our case we just want one type of thing at the moment and that's a it's a job listing and a job listing is sort of the the you know that's the the object itself that we want to store but it has all of this sort of subcategories of information so maybe to keep our our file in analogy alive the the volunteer listing is a folder and we need to tell or at least we need to label the the slots or the sleeves within that folder to expect certain bits of information or certain types of information so within the database we can create a folder as follows if we go back to our editor now and we go into our data tape tab here is when we where we can create a new data type or in our analogy a new folder so this new type we might want to call simply listing and we create it you'll see that of course there is already a user data type here bubble by default sets up the application to handle users and users is not something we're going to talk about in this video but they are really important and I will cover them in a different video for now we'll just focus on the the the data type listing that we just created so now we have the folder now we need to configure the sleeves of the folder where the information actually goes inside of it and those those those sleeves inside of the folder are called fields and that's where we're going to put things like the position title the the image the tasks the location all of these things so we need to label those sleeves now ahead of time so that we can easily file away the information as we receive it so I want to create those fields using this button here and name them and then say what type of information they can expect so you know the first one might be position title and I'm using this this formatting of where there's multiple words you you make the first the first part of the word lowercase and the ladder and then every subsequent word starting with an uppercase letter and that's she's not sure officially you know or originally where that came from but that's commonly used in JavaScript for naming variables you don't even know about that right now it's just a way to keep things tidy and readable so that and also the type of information that we want to store within this field is text because that's what we're getting from the user it's just you know it could be social media manager or whatever it's coming in as text and you know looking at our diagram again you'll see that that that that folder now or that field I'm gonna stick with using the word field now that field is nested within the data type or the folder and we can create as many of these fields as we want within one data type and that way when information comes comes in from the outside world or from the user and we can just slopped that information directly into the folders and then rather the data types and their fields as they come in so we'll name the other ones here - we had position title we had organization which was another text we location location is an interesting one because we can actually store all this as a geographic address and that allows us to plug that information later into things like Google Maps element and have that Geographic address be translated into a marker on the map so we'll actually we'll save that as an address because it's going to come in as an address we had of course tasks which was another text we had time commitment that is coming via a drop-down so not a traditional input but it's still coming in as text so we're gonna save that also as text and the last thing I really we had was a image and that one you won't be surprised to know is coming in as an image field type so now we have our our listing data type configured with all of these fields within it that are going to you know they're ready they're primed to accept information that the user is giving us the only thing now to look at our diagram one more time is we need to actually connect explicitly the input forms that we already created on the page to the database in other words we need to tell the input fields that you need to really really need to tell our application take the information from those input fields pick it up carry it over and put it into the fields of our listing data type so we need to make that connection explicit and that's what we're going to work on now so if I now go back into my editor you'll recall the last thing that we did here was create this button and this button is going to be the catalyst for for collecting the information that the that the user has has provided and that takes us to the last main area of a bubble which is the work flow tab now the work flow tab is quite simply just where you add behavior to your application and obviously taking information from one source and plugging it into your database well that's an action that's a type of behavior that we want our application to do so all of that kind of work is done within the workflow tab and every sort of string of behavior it always starts with an event you know something happens and then the application is going to sort of take all of these subsequent actions and that thing that catalyzing event is of course the clicking of the button so we can we can just simply start by clicking here to add an event and if we go into the elements submenu we have this option and element is clicked and now we get this little option here to add an action so that's basically saying you know once this element is clicked once this button is clicked what do you want me to do next we have to configure the event to say just specify what type or what specific element we want we want to trigger this workflow when clicked so we can select the option button down here and you'll see this is something that you know this is one of the strongest design features of bubble I think is that it provides you always the most relevant information at the stage of the app or if the stage of the logic that you're china that you're trying to build and at that time so we don't have to remember excuse me we don't have to remember that we have a button called create volunteer listing it automatically is populated in this list so now we have this event set up and we can now configure the actions one quick very quick diversion at the stage another way to create events which I use it's it's for me a lot more intuitive so if I did it once I just deleted that workflow if we open up the dialog for a particular element I can actually click this button here go start edit workflow and then this event button create volunteer is clicked will automatically be generated so bubble is very sort of intuitively telling us you know how this is going to work when this button is clicked then we're going to do a particular action so that action is gonna have to be going back to our diagram on more time that's going to have to be how do we string the input to the data type field so the submenu that we want to start looking for this is gonna be data and at the moment we don't actually have any listings so those folders don't actually exist yet so that the first step that we have to do is actually create that folder or that data type so we're gonna click here create a new thing and the type of thing that we're going to create is going to be a listing and now it's going to create a listing just on its own so if I preview this and I click this button create volunteer listing you won't see much happen but we did actually just create our first listing I can show you by going into our data tab and going on to this app data tab over here clicking on all the stings so all of the different data types we have are listed here and this is actually going to show me what our database actually looks like right now and we have one entry one entry that was created just moments ago it doesn't have any information because we didn't we didn't connect those inputs to this listing when it was created I'm the only thing it has by default as a created date a date when it was last modified so if I make changes to this data type later that's going to be reflected in the modified date and it also has a unique ID so that's a length a long string so by default bubble creates or generates this unique ID for every new element that's that's created and you don't need to say you don't need to worry about that now I could of course add all of the information manually into this database but the whole point is that we're trying to make it really easy for somebody to to create a listing and so me as the app builder I don't want to have to be putting in that information myself I want that to be done automatically so the the next step for us is to actually physically connect up those inputs to the fields within the data type so these are those sheets within the folder now so I can the listing because we're creating a type listing it'll already give us a list of all of the possible fields that we can sit and we'll start with position title because that's the one that we created so I want to set the position title of this listing to be equal to whatever the user has just typed in that position title input on the page so I have this incredibly powerful concept called insert dynamic data and that means that I don't have to type manually the name of the title but I can just take it automatically from whatever's in the input so now that I've clicked insert dynamic data I want to find that input in this list and down here I have a whole bunch of elements and I have one called position title that's very handy that it's called position title because otherwise I might not know what it is and I'll show you how it's done how bubbles handle that in a second we want to set it to the value of that input the position title for the input has was automatically created by bubble because we changed this placeholder but by default and input won't have such a intuitive title it just be called something like input C and that can make linking up your input very confusing later on so you do want to and this is another good practiced almost actually an essential practice that yeah you just have to do this from the beginning you just have to make this a habit or you're gonna make your life really hard and you're gonna spend a lot of time being frustrated and lost in your app so what you have to do is you have to name your elements or at least you have to name your input and you should really name your groups as well so input organization is pretty self-explanatory this one multi light and put what are all the thing that's you know we we don't have that many inputs so for now we're gonna probably know what this is but as our apps get bigger we want to name things in a way that's gonna be very intuitive very easy to for us to find them later on so I call this multi-line input tasks for now and just just try to keep it a little bit synchronous with what we've labeled the fields in our database how many Ounces pushes at position require sort of dropped down a let's call this drop down time commitment the image picture uploader this is the picture upload listing image let's say and the search box search box a is a name it must be said such much like search box location is a lot more intuitive so now when we go back into our workflow tab and we're gonna link up the rest of these fields it should be pretty simple for us you know the organization that's gonna be to our link to our input organization which bubble already set for us but the other ones you know image we can now set that to picture upload a listing image you know that makes sense location search box location we have course tasks and multi-line input tasks will take care of that oh is valid nope value and time commitment we obviously want to go to our drop-down time commitments value so let's just see whether this you know is doing anything at this stage if we preview this and we create a new list and we already know that our listing is being created upon this click now we want to know whether it's actually saving any of this information that the users into entered into into the data type so I'll just I'll plug in some info that I prepared earlier just to see where this works so position tile website maintenance the tasks are published blogs the organization ecosystem restauration camps how many hours is position require you know between 3 and 10 hours a week say the image this one that I already prepared where is it located let's is located in Madrid to Spain this is actually inspired by a real example which isn't Spain but it's not in Madrid now if I click this create volunteer listing surprise surprise nothing spectacular happens because we haven't told the program to do anything spectacular once this button is clicked but we will get to that we just want to know whether that action did actually create a entry in our database so if we go back to our app data we don't see anything yet but that's because we need to refresh this database view so we click down here on refresh data and I still don't see anything and because we still don't see anything we should have a look at what's going wrong at the moment in which we take this action so quick intro now to the debugger the debugger is created by default at the bottom of your preview window when you're in development mode talk about the difference in development in live modes in a different video but whenever you're editing your app you're doing so in development mode we can click this step by step value down here to actually have our program do literally what it's 1 what it says here is is to move through each subsequent step of the workflow in time as we tell it to and it's also going to give us a bit of information about what it's doing in each step so I've clicked step by step let's try this again create volunteer listing and now we get a little overview of our actual workflow so button create volunteer is clicked cool then we want to do something else we want to create a new listing and it's telling us now what is all the information that it's going to plug into these data fields so position title does actually have website maintenance as it should you system restoration can this this all looks fine if we click on any of these it'll bubble will tell us how it's getting this information so it's getting website maintenance from this source input position titles value which is website agents so that's you know that's all doing acting as it should yet when I go to the database I don't actually see anything now this could be just a bug and I think it is so if i refresh this i refresh my entire editor and i go back into my app data back into my listings now you'll see that i have two entries for both budding clicks both with the information that i already provided so sometimes that can happen just clicking refresh won't actually show you the latest bits of data it happens to me very rarely i'm quite surprised that it happened now while shooting this video but it is something to be aware of if you don't see your bits of data showing up here when you expect it to just refresh your editor and hopefully they show up so here we have the listing that we just created both of them will delete one by clicking this checkbox here clicking delete over here and you know that's all fine and dandy so this is working just great the only sort of issue that we have is that it's not really intuitive for the user to know that there this thing has actually been created you know when we once we click this nothing happens the page looks exactly the same so there's two things that we should do in this page change that one is that once this button is clicked we should erase all of the information in all of these inputs so we should reset the inputs and the other is that we should show some kind of notification or alert that's you know says the loser hey we just created your listing so both of those things because they are behavior are gonna be covered in the workflow tab and go back to this workflow that we created and we simply just add them as other steps that we want bubble to do once it's created this first listing so after creating that new listing what we'll ask it to do is reset the inputs so you know into element actions and you have over here under input reset inputs and you'll see the action actually says reset relevant inputs bubble does a pretty good job of knowing what inputs it is that you want to reset so because these two actions are linked in the same workflow this this action just knows that it's going to be the inputs in this preceding action that it has to reset and that can even work in long workflows the other thing is we want to create an alert or show an alert an alert is an element that we haven't created yet so it's under here under visual elements and we can drag it on the screen like so we can say you know your listing has been created as its text we can quickly change its style to be a success alert and we can set up by defaults will appear at the top of the window so now that's created we go back into our workflow tab and we want to show that alert because by default even though it's over here you know big and bold and green it doesn't actually show up in our application alerts are hidden by default so we need to tell the application to actually show the alert so we'll do that in a workflow tab we will add another action it's another element action because it's related to the alert and we actually have an action just for specific to alerts down here called show message and it's automatically selected our element that we just created the other element because it's the only one that we have if you had more than you would have to choose it from down here and we can just change a few parameters regarding its length so in milliseconds how long do you want this alert to take to fade in it won't just appear it can fade another time how long do you want to stay on the page and then how long do you want it to take to fade away so let's see how that works now if we refresh our preview window and let's input some different info that I've also prepared earlier the tasks are gonna be doing this kind of stuff and just to make this a little interesting let's put all these on a new line friends of the billeting let's say less than three hours a week because it's friends of the ability should probably be in Berlin you upload an image and I think I don't know which one is my is my social media I'll just choose this one doesn't really matter okay now if I click volunteer listing boom two things happens I load up here all of the inputs are being reset you saw that the input I'll be alert faded in and it faded out so this has worked perfectly now we have the ability for our users if we refresh this now it's working perfect you have the ability for our users to just plug their own information into the inputs that we've given them and now we're collecting that in a structured way and storing it and holding on to that information for them the next logical step is to actually do something with that information and since we're building a marketplace app the logical thing to do is to provide that information to the people who might want to use it they might want to buy it or in their case they might want to apply based on that information apply for the position so if we look one more time at our diagram this is how information is taken from our database from our filing cabinets and then present it out into the outside world so we want to have some various visual elements that are essentially just surrogates they're just empty we don't want to plug any static information into them like we did when we were creating the first page you know that sent our red line and you know what is your name your organization all this kind of stuff we want it to display information dynamically so what that means is we want it to display information that it gets from the database based on some search parameters so based on where we've told it to look essentially and the way it does that is by first sending that data type in our case the listing to a particular group and that group is is like the window of a house so you know inside the house we've got those filing cabinets that's storing all of that information in a structured way and now we want to take that information and show it to other people show it to the rest of the world so we might go into our final impact cabinet pick up one folder pick up one volunteer listing and carry it over to the window and then sort of just hold up the the folder and all the different sheets and despite out to the rest of the world but first we need to have a window right we need to have some window that's gonna be able to show that particular information through it and groups function just like those windows so they just there they're kind of waiting to display information through them but until you display information through them they're they're not interesting unto themselves you know until you actually hold something out to show out that window nobody on the other side is going to see anything and let's just assume that they can't see into the house for the sake of this pretty silly analogy but that kind of captures it so we need to first configure a group to act as that window for our data to display itself to in our case people looking for volunteer listings so let's do that now we'll go into our index page again and we'll create a group to act as that window and we can tell it will quickly name it as well group display listing and we want it to expect to display a listing of course as its type of content and now we need to tell it well where to look to get that lesson in the first place where is that information going to come from and that's what the datasource entry is from in our case it's rather simple right now we just want it to look into all of the listings that we have and just display all of the listings back out to the to the viewer to the user so we can say do a search for which is just get is basically just going to say that look at all of the listings that we have so do a search for all of the listings that we have you can add a particular constraints you know only look for listings in Berlin or only look for listings from this particular organization we don't care about any of that for now we just want all of the listings we can even sort them by their creator date and then if we close this hmm we get this little message here the data you're displaying is a list of listings while it should be single listing click to use the first item of this list so what's actually happening here that's causing a bit of a problem for us is that we have well we have two valid listings in our database we have a look now we have this one from Berlin and this one from Madrid we can delete this one for now to keep things simple and both of these with taller application to look in our database and get all of the listings so it's coming back with these two listings and it's trying to display both of them through the same group through the same window and this is a group that's only configured to show one listing at a time you know it can't hold two different or two or more listings at the same time it just it's not it's it can't do it it's against its own laws of physics so to speak so what is saying why cook to use the first irons list is choose you know take one of these listings I don't care one I'm just gonna suggest you take the first one that's easiest so just show you how that would work you know we search for those things take the first item okay cool now that we have that window configured to take a listing we can give it some kind of way of displaying the information through it so I've been using the analogy of a window it's probably a little bit more like you know like a polystyrene Hall or something something that you can't really see in that you need to actually create the little lenses just to see through and so at the moment you have the data can't just hiding behind this with this thin wall and we need to create the lenses for it to look out onto the world so because we have a lot of text fields within our listing we can start by creating a text visual element and tell that visual element then rather than just saying you know that it's from Friends of the Earth you know we can't plug that information in ever for every single listing that would so we want to take it dynamically so we can say insert dynamic data insert dynamic data take the parent group listings so the parent group is the group which this text element is inside of the child of take the parent groups this thing and give me the position title field of that data type if it's all it's doing and I'll put a little border around this group so you can see it more easily so it can change down here border styles make a solid border and now if I preview this all right I see website maintenance so that's literally going into the database and it's finding this entry here the first one that we created cuz we sorted them by created date and it's plugging that into our group and it's telling that group and and then there's a text element in that group that's saying just give me the position title field of that of that data type and and present it out to the world so that's what this is doing but obviously this is not gonna be very useful because we can only show one listing here so how do we actually show like what you would expect any kind of listings board or you know an Airbnb you have lists of all different types of homes and experiences if you go onto a job board online you don't just see one job you see tons of different jobs so we want the same kind of functionality to work here obviously so a group is not what we need but a repeating group that kinda sounds like we might be more on the right track so a repeating group is literally just a list of groups it's a group that repeats over and over and over and over again so I can just delete this for now keep it things simple and drag my repeating group over and the nice thing about repeating groups is that unlike before when we tried to get all of the listings from the database so we the database fed us multiple listings a list of listings a repeating group is set up to expect a list of something and that's why it has these sort of cells just like an excel sheet or something each one of these is its own little group and it'll just take all the information that it receives them and plug it in one by one so probably rather than just talking about it I should just show you I'm gonna tell the repeating group to expect a type of poor listing like before we'll tell it to look into the database and just give me all those things you have get me all the listings close that up and do like we did before text element here that says the current and this time current cells listing that's just the cell here and give me that the listing that you find give me its position title and let's try to make this a little clean position talk and go up there and I'll even add a little text thing here for the organization let's say count cells the same organization now if we preview that we go down we see both of our listings that we've created sitting here in this repeating group so we have done you know 80% of the hub of the lifting here you know we've allowed with we've set up the ability for one user to input their own information we've taken it we've structured it and then we've provided the functionality to feed back feed that information back out to the outside world and those two groups the ones who are giving us the information and the ones who have seen the information might be two different types of people two different types of incentives so as a as a as a mediator between them right which is what a marketplace is we we're right on the right track one other thing to note at this stage is that if we actually create a new a new listing if we create this this theme it'll appear immediately down here so that's how we can be 100% sure that this is working the sort of second part of this tutorial I want to cover how to tidy this whole website up a little bit so it actually feels a little bit more like a web application or like a website because right now it's all on one page that's not very intuitive we're not going to do go heavy on the design but we at least want to put this section where we're showing listings in a different section of the website than my own people input the listings so that kind of hints that we might need a couple of different pages so let's do that now the moment we've been working all within the index page as we've done everything now we're going to create a new page to do that you click up here which lists so has a menu where you list all of your pages and we can go add a new page and we'll call that one listings now you can duplicate a page that you really have so you know to do to copy index and make a new duplicate of index and call it listings I would do this will make it keep it blank for now and here we have a a new page which if I double click says listings so that's all cool first order of business take our repeating group and pass it through to listings and now we have if we preview this and you page just for listings and that's cool obviously we want to link these two pages together so you can get from one to the other so the traditional way way that users expect is to have a header and in that header you have some buttons and those by clicking on these buttons you can navigate around the website so a header for us can just look like a group and you can call that group header and in that header we can create a button we're now on the listings page we can create a button and we'll change the styles the background button styles I haven't talked about just as a really brief overview if you go into the Styles tab you will see all of these styles for every type of element and what you can then change so you know I can search filter all the elements by their type so I've got button here I can go into my node background button I see that it's red I probably want to keep it red but let's just make it maybe a different font usually there we go and maybe just make it bold as well and make its 16 and that'll rear epic eight it here and for all subsequent budding buttons that I assigned the no background button star so it's a really easy way to make bulk changes to this the look and feel of your app by just simply changing one thing and that's the that's within the style so you you do want to get into the habit of using styles but this more diving into the UI design and UX design user experience design sorry UI is user interface UX is user experience those are the the jargon words in this industry and so we'll add a title to this button we'll call it you know create a volunteer listing let's say it's quite long and we need to make this button a little bit bigger but it is gonna look a little tidy because button styles by default have this sort of feature which if I hover over something will happen so I thought I know it's a button we've already accounted that with the creative volunteer listing button but we didn't talk about that so this feature how you can say you know when this volunteer the scene button is hovered underline it that's what we call a conditional and conditionals are really the last major piece of the puzzle that I want to introduce here because conditionals allow you to make your page interactive in a different way than you do with workflows but really just expand the the range of things that you can that you can do with your website quite dramatically you know I'll uh I'll quickly go over it here in the Styles tab where we have this better background button I can also do it within any element itself we have this conditional tab a conditional tab is where you say things like you know if a user is hovering this element then underline it and I'll show you exactly what that looks like by going back into the Styles tab where we have a pre-configured condition that says exactly that when this button is hovered underline and you know if I was just to delete this this is the way that you set up a conditional you choose from a set of options so when this button and I can do things like when it's clicked in our case of course we just want to make it hovered and here I add I tell the application all the things that I want the button to do when the button is hovered so at the moment here we've got underline I might want to get rid of that and I might want to instead change the font color slightly let's make it a bit lighter and I could also maybe make it a little bit bigger and now if I preview what that looks like okay it it's working but it's she making it too big for the size of the button that we created so that's why it's looking a little bit weird if I just make this slightly bigger should be fixed and here we go create a volunteer listing now we want to tie this up to navigate into the the index page of our app obviously because right now that button is not doing anything so as you might already now hopefully expect we want to add a workflow to trigger when this button is clicked so the action that we want to look for when we're moving between different pages of our app is under navigation aptly-named and we can select the go to page action and over in the dialog box we choose which page we want to go to in our case index and data to send set more parameters to page that is some functionality that we're not going to cover in this lesson but it is very important especially the data to sent it can be very important so now if we preview this and we go create a volunteer listing voila there we are we have navigated from one page to the other obviously on our index page we don't have a header so that's what we want to create so one way we could do that is to copy this header that we've already created we could go over to index and then now I want to want to create some space for my header so I'm glad we grouped all of these things earlier so I'm gonna drag that down a little bit and I'm gonna paste the head up and I probably want to add another button button sorry and I'll set up doing that I'll copy ctrl drag the one I already have view listings or view opportunities now if you listings will keep will keep the same the same kind of sent text volunteer listings and well this one I can also of course create a action to go to page listings and by previewing that I end up with a new button that's gonna take me back and here we are again only problem now is that the the header looks a little bit different so and this you can imagine that's getting a little bit more complex the more buttons that we have right now it doesn't so matter so much because on the listings page we only really want to have a button to go to the create a volunteer listings page but if we had another page like about us or contact us or these kind of things well we don't want to have to be adding and removing buttons manually on every individual page depending on what that page is for that's going to take us a lot of time so instead we want to use something called a repeatable element or reusable element rather and that allows us to just create a particular element once and use it across multiple pages so one way to create a reusable element is to right-click and go convert into a reusable element and we want to call this the redline header and the reason why I'm calling at the redline header is because we really have another element called header that bubbles created so this is a page where you just edit the reusable element and it shows up like any other page except it's just down here in the section called reusable elements and this is why I wanted to call it red line here is because bubble by default will create a header for you it'll also create a fuller it'll also create a pop-up for allowing users to create an account in your application which we're not going to cover today and this is that what the bubble header looks like so you can add things to it but I wanted to show you how to actually create one from scratch the other way is to add a new reusable element down here and you can create one just in the same way you would create a page and I can change the size of the reusable element by you know basically just dragging the canvas here the other way that I can change the size is actually with these width and height controls so if I made that 120 I would just double the size and these controls go for any element you can change the size of a button also by by doing that and also unlike the repeating group I can change the position I can I can change the X&Y coordinates instead of dragging things and trying to line them up that way the other way that's it's very handy to drag things to move things around is with the arrow keys and then you can make very granular changes but anyway not to digress too much let's start by dragging these two elements round over here and let's check that the workflows there so our view volunteer listings is working but our create a volunteer listing doesn't have any logic to it so I want to add that workflow go to index now I've got this red line header it's a reusable element and you can't preview this page because reusable elements don't exist like pages you need to actually put them onto a page so if I go on to my index here I have the original group header I can delete this and I can instead go down to the bottom of my elements menu and grab red line header from under the reusable element section and I can just drag across it'll automatically go to the correct size if you change the size elsewhere sorry if you change the size within the page to say I want to make this you know it's nine six three years a little too small I still want to make this not one that wouldn't be very useful but one thousand sometimes this can be a little fiddly one thousand then on my index page have this usable header I can reset it to its dimensions and they didn't seem too low a lot to a lot but nonetheless there you have it now if I preview this page I have my reasonable element at the top and if I add it also to my listings page delete this edit also here preview that again voila here we have the two buttons that we're looking for on both of our pages and if we make a change in one if in the in the element if we say okay I want to make this and I want to make this green so some reason then that'll be replicated anywhere that you can find the the reusable element so it's on both pages there just to dive deeper into conditionals one more time it might be nice because when we're on any one of the pages that we've already created in our app we don't have a really good indication of what page that we're on and adding a condition to these buttons so they also kind of behave as page headers might be a nice way to do that so we're just thinking through how the logic of that might work if we were on the volunteer listings page maybe we want the volunteer listings button to appear unavailable in some way and we've actually got it to kind of fade upon hover which is actually the inverse of what you would think would be intuitive faded usually means you know out of order can't use this so let's try and make this faded or sort of seem like it's not possible to click on the button when in fact we're on the page that relates to that button so we can do that by going into the conditional tab of our buttons and first let's change the style to get rid of this font color we'll just say when it's hovered we'll we'll make it bigger and we'll add another condition called define by clicking define another condition and we'll use this thing that's called when the current page name is listings then what I want you to do is I want you to be smaller yeah 16 feels okay let's try that I want you to be faded quite a lot and I also don't want it to anything to change in fact we've still got this I don't want the button to change when it's hovered because that'll still make it seem like it's interactive so if we preview this yeah view volunteer listings is faded just like it should be and we can we can double check that that's actually why it's happening because if we use the inspect tool in our debugger this actually allows us to click on any element we can also find it by searching for the element here but if we usually if we click on it we get all this information about the element you know this is the font color all of these conditions that we can set within the elements dialog box but most important for us right now is we can see an overview of all the conditions and we can see that condition 1 this button is hovered is read mean it's not met that won't show up even if we do hover over but the condition 2 is green meaning this condition is met because the current page name is listings and that's why it is faded create a volunteer listing is we want the same functionality to work for that because if we go over our view volunteer listings is back to normal but our creative volunteer listing is still reacting to our hover even though we're on the creative volunteer the same page so we'll want to create this functionality within this button an easy way rather than going down here and going when I can I could search for the term you know when page name is index I could alternatively right-click on a similar condition copy it and paste and then I just have to change this to say index and what did we change this to we made it yeah this color which it should already be and about that kind of transparency and we also had the font size the 16 they have to change that ourselves and now if we go back to our application it is indeed hidden which is what we want still looks like we can click it that's something that we can't change right now but at least now we have this nice change in how the things look and obviously you can even customize this to your heart's content to look you know completely different than how I've done it here and probably a lot better this is just a quick very quick example so the very last thing that we need to do to make this app even functional in the most basic sense is to obviously have some way for people to reply to volunteer listings so you've still got a repeating group here which we should delete but you know if we if we go to our listings page there's not that much that we can that we could do as a user you know we can see an overview you know and this is still pretty basic we can also put our image in here by by it grabbing an image element and setting that dynamic to display dynamic play the current cells listings image and all the other fields that we would want to have in here as well but I can't do anything from here right I know this exists but oh and I want to do website maintenance for the ecosystem restoration camp but I can't contact them in any way so we want now a way for people to be able to contact their organizations to do that we need to decide on a way that they will be in contact and while yeah it's entirely possible to build out a internal messaging system for this application for the purposes of keeping it simple I'm going to show you how to set up emails to be sent based on within certain workflows and for that to to work we actually need a way to collect the the email address of the person creating a listing which which we haven't got yet so if I go down here and make this one your email and place over and just be like Bob at example you know dot-com and I I want to change the the workflow here to also save an email field within our listing data type now we don't have a email field already convicted and we could go into our database and create it just like we created the image location task is that you bubble also allows us to create it directly from this menu here so I can go down here create new fields I can call it email and I can set it to be text and I can set this to take whatever the value of this email is and should call it input email and while the other thing I'll show you real quick is I can set the input to expect a certain type of content the moment we've got it set for text I and get set to expect an email and what that will do is if I us our great volunteer listing if I siphon sort of you know gave the man calm that's not a valid email and this email box will stay read and then clip in fact we get a little a little dialog box here it's telling us why it's it's red so that's actually invalid and the workflow will reject saving this field until we fix that so if I just put a little out in there then it works and now you might also have made the connection that this this blue these blue that are coming over this is that's coming around the input fields rather that's a conditional that's a built-in conditional for the style of standard input when this input is focused which means that the user has clicked within the input then do all of these things and that's what we're seeing here when we click with in between these inputs so let's sum let's quickly just create a new listing with an email just to just so we can actually see this in action you and we create that I don't actually know if we yeah we didn't we didn't connect up the email input so that data that we just created if we refresh it it's got everything but doesn't have an email so let me get past this I'll add all this back okay went through the trouble of creating that listing again now with hopefully the email in there yep and I'll delete the one that we made a mistake with before and this kind of highlights something important about developing in general is some you should try as much as you can to just change one thing at a time and then test so you know along the way we've been previewing a lot that's very good practice change something preview see that it works and then change something else because if you make a lot of changes all at the same time and then preview and then something doesn't work your ability to find out what exactly is making it not work is it's gonna be hindered by the sheer amount of possibilities as to what it could be and the way that they interact each other interact with one another is also a lot harder to track you know three things interacting with three other things is you know that's that's three times three possibilities nine possibilities and if you just have one thing that you've changed and it doesn't work well it can only be that one thing that's made it faulty if in fact it was working beforehand so that's just make it incremental changes to your app and testing it's very good practice so now we have this this new listing with an email address and it's it's not showing up with a photo my image didn't load so I'm gonna add it manually which is what you might have to do as an admin of your site add it manually and now it should pop up yep now we went away for a potential volunteer who's seen your listing to click on it and have that lead them through a short process where they can actually contact or apply for that listing so the way that we'll do that is rather than create another button or something here we'll actually make this whole section a button that you can click on look at the whole the whole cell can be a act like a button so the way that we should do that is first and I'll just make this a little smaller sub stays clean so just put all these elements in a group which we should have done at the beginning let's make it a little bigger on the sides and let's give it a little background as well save background style let's just make it slightly darker gray and to make it act like a button we want something to happen when it's hovered just like we did with our buttons up here in the header so let's say when this group the group that we're editing is hovered change the background color to be a slightly lighter version of grey and to bring this out even more we can even say box shadow style which will allow us to add a little bit of an outer shadow box shadow style is what we've set up here we can also change the spread radius of that to be something like 4 and if we preview that 4 pixels that is now we go over it and and we get this all highlight and offset which this really looks terrible it looks extremely ugly and but it works has a function functionally it works so we you know we can play around with the design and we can maybe we'll we'll get rid of this offset and we'll maybe we'll make the the box smaller and we'll add all kinds of other little design design elements to make this look nicer for now we just want to see that it that it works as a conditional which it is and now we want to make this a button so if we click on it something happens so the last little mini page rather that we need to create is it's a flow that if somebody goes through and they want to apply or contact somebody who's hosting a volunteer opportunity and the way that we'll do that is with a new type of element that we haven't explored yet the pop-up and pop box aren't just good for pissing people off asking for permissions to save cookies to your browser they also can work as a nice little a nice little Avenue to direct your users for particular yet particular purposes so in our case to apply for a listing we don't have to create a whole new page for this we can just direct the user through sort of a side street within a page that we've already created to get them to apply for a volunteer opportunity so call it pop-up apply and you know let's just add some text to it just so we can see it you know apply for this opportunity make it a bit bigger make it a heading and pop-ups like alerts aren't visible by default on a page so if we preview this we won't actually see the pop-up anyway we have to explicitly tell the application to show the pop-up so what we can do is launch a workflow from clicking on this group which is going to act like a button say start edit workflow ok that in action we want this to show show pop-up apply and now if we click this boom it works you can click escape as a user to get out of that and now we have the first sort of step the next thing is to have this pop-up display information dynamically based upon the particular listing that we clicked on so pop-ups because they're a group can actually have a data source and that means that they can work just like this the window or the wall that is that I was talking about before and be ready to display information through it so we can set the type of content to be a listing the data source though isn't going to be that useful for us because we could do another independent search right now and pull up you know a random listing we can click get all the listings from the database and just pick the first one I'll pick the third one or something like that but the whole point is that we want to click on write articles and blogs for example and have the information about the right articles and blogs listings appear in their pop-up so that's not going to happen automatically like everything with programming we have to tell the program what to do explicitly it's very very stupid until we tell it what to do so we've got this show pop-up apply that's not I'm going to suffice on its own what we want is something before that action where we take the data within this group listing that we've clicked on and we push it through to the pop-up so right here is the connection point where we can add the display data action and where we want to display the data is in the pop-up apply and which data we want to display is this group and that's been the group list in that we've click this always refers to the the element related to the event which triggered the workflow this groups listing and how we can test that is by associating apply for this opportunity say apply for and then plug in the dynamic data parent groups listing so that this pop-ups and the stings position title now if we preview that write articles and blogs right apply for right articles and blogs perfect and now all we need to do is collect the information from the person who's applying and somehow send that information off to the creator of the volunteer opportunity so how to do that we need some more input fields because we probably want to send to the volunteer position creators we probably want to send the name of the person applying so just to make this a bit quicker here I'll go place over your name you know we could also say your prior x element experience and just for now that's all we'll put in because we don't need to we don't need to make this too complicated I will convert this rather replace this with a multi-line input so that they can actually add a fair bit about there prior experience your prior relevant experience and also a way for them to be contacted let's actually just copy this over to there you'll see now that the snap to edges is a bit handier your email and it said that to be content format email multi-line import will change the name of this prior experience so I'm just was inna through now because you know all of this already and now we need a way to trigger the sending of this information so we can add a button says apply for position now let's make this Bob a bit longer now we want to configure this button to do something and we already decided that the way we were going to put these two people in contact the volunteer position host and the one who's applying was via email so there's a real handy action under element action sorry under email which bubble has really got some built-in functionality for sending emails called send email and now we can enter dynamically the information of the volunteer host to let them know that somebody has applied for their position so we can say to the parent groups the stings email will say you know this is coming from us the organisation so our red line you say the subject someone just applied for your listing and now we can add the body also using some dynamic data so hello insert dynamic data parent groups listings well let's just put the organisation you have to be careful with it's a little difficult to see how these emails are going to be formatted this where the cursor is right now is actually directly after parent groups organization as a dynamic as a dynamic link so I put the comma there then I'll enter into enter again and then I'll add some body text I'll say you know they input your names value so that's this input here the person who's applying has just applied for your position and then it can add the parent groups listings position title again just to remind them their prior experience is : again and we can even put this on a new line there's there's ways to make this read much more human because we can we can make this dynamic information input most operations value we can make this all lowercase by default so we could say you know their prior experience is and then without the colon have it in lowercase and but that might read a little bit weird if they if they started off there by telling their experience like I have prior experience in because then the cert the sentence would read their prior experience is I have prior experience in so you really need to think about the way that you want to configure these messages right from the point of time on what you're creating the input so rather when you're prompting the user for information so that you can get it in a format that then you can easily use later on so for now we'll do it in this slightly more robotic name too so you can contact them at another call on and then we can put the the email of the person chairs our red line and this rich text editor also gives you a little bit of an overview so you can see how would actually look so that's we know all the spaces and the line breaks are where we want them so that's all fine and this is going to send to the the email of the parent groups listing and you'll remember that we didn't really put in a very valid email we put an actually a very strange one and the reason for that is I was trying to so try to think ahead because I have this service in my mind make elevator and mail and naita is really good for testing sending of emails via bubble because they they're a service that just has a whole bunch of public email boxes basically any email box that you want with the mail an ADA at mail neither domain and these are just public in boxes that you can just basically create and then enter and just view all the emails that come in so that's really handy for us cuz we don't really go for all this hassle of creating you know special gmail accounts or anything like that we can just take something like October example something that other people won't have because the thing with us if I just put like Bob Bob at mayo and intercom that email box well is public and there'll be tons of other random emails in there so just to keep it clean October example 17 it sounds like a pretty fair one if I look in there I don't know why I'm doing 17 that's not the year that's not the year anyway I'm living in the Paris moon we want to make sure that this listings email is gonna take the right the right email and pass through so to mail Anita so you know I have October 17 example calm I'll just change that to be at over 17 act and it will be at my other Nader calm I can that copy it just to be safe Mayo Mediacom save that okay now everything seems to be in order I've got this pop-up I've got a workflow it's going to send information to the listings email okay let's see let's let's let's see if this works the one that I want is the fundraising one I believe that's the only one that hasn't a valid email the one that we just added so click on that five for fundraising okay Frank Sinatra and you know this one doesn't really matter at mail calm so not seen anything to them yet have had several platinum albums like you don't know if he has you think he would've okay apply for this position this little blue Baris something just happened we haven't obviously set an alert or anything we we haven't reset the inputs but something's happened because I saw the blue bar go across and if we go into my Elenita voila from our red line subject justified fearless Steen is clicking to it hello code rude Frank Sinatra has just applied for your position fundraising that would be an interesting email to receive their prior experience is have had several platinum albums etc their email so it's worked perfectly it's looked exactly as we've configured it and now one side of this connection has been made code Roode has the ability now to contact Frank if they want and obviously you can plug punch more relevant information into this email you can you know you could have fields that are explained not just their prior experience but what they do for work why they're interested in the position in the first place when can they start anything really and that's maybe a lot of information to pass through an email but it's at least there's the crudest way for them to make contact and that bubble can support to do a lot more through messaging and this kind of stuff but that's a story for another day so for now let's let's add another another email just for the sake of argument and you know let's in fact I can just also plug this in up here and no matter what I plug into the input this workflow is going to send to October's out of it man that it of them which is quite fine because when we're ready to really link this up we just delete that and we just say to input your email and if it wasn't clear what we're doing here is created an email to send to the person who's applying for the position now so but for testing we can keep this as it was our read name you know we've sent your message to and then the organization parent groups listings position title no not position title organization and then you can change this hello your name value and let's just delete all of this yeah something like we've just passed on your message applying for the position yeah you get the idea I'm sorry the parent groups listings position title and you can make that message obviously as customizes you want you know we'll get back to they'll get back to you within seven days etc etc etc let's clean this up let's say we'll reset the data in that group in the entire pop up which is you can achieve the same purpose as resetting the relevant inputs you can also just reset all of the all of the inputs within a particular group and we can hide the pop-up - and what you end up with is you can say you know George and George mail that doesn't really matter what I put in here because we're going to be soon to mail Anita loads of cool experiences love the planet and stuff don't mean to sound sarcastic there this climate change is the most important thing it's really hard to see it any other way so regardless here we go sent the inputs of all reset mail and ada should have received something else we've sent your message to code route that's this message and someone just applied for your position fundraising that's the new information from George so now we have a fully functioning albeit a little bit crude website where somebody can put plug in information about their their volunteer listings and other people can apply for it just to top it all off we might want to put a a little message I sorry a little logo up here that didn't work quite correctly and let's upload its nice little logo and that's that's the final touch really so you can see that it works you can see that we've been able to connect people with on two different sides of the marketplace and have them either create information on our marketplace or respond to the information others have created on our marketplace the more advanced functionality is to have them be able to message each other through the platform directly be able to log in and manage their profile and manage that what they've applied for in this kind of thing and if we were going to be actually selling things which for the market marketplace were not then we could also integrate payment functionality but for now that just about covers it I will be creating more of these videos where we build upon the functionality of what we've created here today so well we'll do more advanced things like create that messaging system that I just talked about or like some more advanced conditional statements that make the the the whole app feel a lot smoother from a user experience point of view so love to hear what you think about this video I know it's been a very long one but my intention was to try to encapsulate all of the foundations within one video so that hopefully this will suffice on its own and you can go and learn you can go and learn just via the the reference guide of bubble via asking questions in the forum if you don't know already that last thing I will check tell you is that if you want to know what anything how everything anything works within bubble if you hover it you'll see the see reference pop-up and if you click that then the reference guide for bubble will open and it will automatically scroll to the section of the guide that is relevant for you so that's that's the last thing I'm going to tell you get building hope this video has been helpful and thanks so much for paying attention and listening see you later

Channel: Matt Neary

Views: 122,926

Keywords: bubble marketplace app, apps without code, bubble.is, bubble.is course, learn bubble, learn bubble.is, bubble.is tutorial, bubble.is beginner, bubble.is beginners, app builder, bubble tutorial, bubble.io, beginner, bubble.io tutorial, learn bubble.io

Id: llIJJagQk88

Length: 111min 5sec (6665 seconds)

Published: Thu Nov 01 2018