How To Build A Ticketmaster Clone With No-Code Using Bubble

now over on my event page if i scroll on down i can see a list of all the available times and dates for this event if i'd like i could select to buy tickets i could also update that i'd like to purchase two tickets and now i can add in the names of the ticket holders our price will dynamically update and then i can select to purchase those [Music] tickets [Music] hello my name is lachlan kirkwood and today i'll be teaching you how to build an event and ticket application just like ticketmaster entirely out of no code using bubble having built products in no code for two years i can easily say that bubble's by far my favorite no-code tool i love that it gives you complete control over your own custom database the front end design of your application the workflows to actually power the features in your app as well as the ability to integrate with third-party tools and plugins for those of you who don't know me i've spent the past year working with the bubble team to write their how to build blog series this series essentially took a list of the top products out there on the market like airbnb uber and instagram and explained the step-by-step process to rebuild these apps using bubbles tool while this series of written blog posts helped no code makers across the world i've decided to create my own video series to teach you in another way i would of course just like to note that this series has no affiliation with bubble at all and it's completely something i'm creating in my own time throughout today's video i'll be explaining the exact process you need to follow in order to create your own ticketmaster mbp this will include features like registering user accounts creating events that can be displayed within your application building out a home page to display those published events as well as also include a search functionality to discover events building out a dynamic event page to display the full information and available ticket times for an event a function to process payments when a user wants to purchase tickets to an event and then finally a feature to generate tickets for a user once they've purchased access to an event so grab your bubble editor and let's get right to it the first feature we'll be building out in our build today isn't actually a core feature to our platform itself instead i just wanted to take the time to set up and configure the necessary data types and fields within our bubble custom database and we'll need to do this in order to build the framework that we can use to create the rest of our core features which i have listed down here now one thing i'd like to note is that i'm obviously keeping a tab on all of the features and data fields that i'll be using my application here today i just use notion which is a great tool for documenting things like that so i'd even recommend you create your own notion account or use any other note-taking tool just to keep track of where we are within our build and so what i've done within my notion doc here is first of all added in the types of option sets and also data types that i'll be adding into my database so let's jump on over into my bubble editor and i'll explain how we can add these in over in my editor here i'm going to select the data tab on the left hand side here and by default you'll notice straight away that bubble already comes pre-configured with a user data type within it and then under that user data type it is storing a user's email in text it also stores a user's password although you won't be able to see that in plain text but one thing i do want to note first before we actually build out our data types is that you might have noticed here that by default bubble also adds a privacy rule onto this data type now what this privacy rule means is that any user who creates anything within your app so in this case it might be someone might want to create an event as it stands with this privacy rule on the person who creates that thing is the only person who will be able to view that thing now this isn't a useful feature if you're creating platforms like marketplaces or social networks because in those instances you'd actually want someone to create something and have it display to every other user account across the platform so what i'd recommend doing is actually selecting into the privacy rules applied here and then you'll see what the privacy rule is that bubble has added by default and then what i'll be doing today is just deleting this privacy rule because it won't be applicable to our application and now what you'll see is that this data type is now publicly visible which is what we want and one other thing i just like to note is under your data types tab just making sure that this field here is unselected when you create a new data type because if it is selected it will apply those same privacy rules to any other data types you add into your application and i've had a couple of instances where people have reached out just asking why their application isn't showing any data that they have stored within their database and every single time this has been the case so i'd recommend just making sure that that is not selected and you've removed any other existing privacy rules that have been applied by default now once we've taken care of that privacy rule we can jump ahead and start to add in the other data types within our application so back in my notion doc here i have my data types listed as a user i also have an event an event time as well as a ticket and the way i look at setting up the data types themselves is by trying to understand what within my application needs to be created so if i would like to create a new user account that will need to be a data type if i would like to at some point create events that will need to be a data type and then when i try to get an understanding of what data fields to add within those data types i just look at all these supporting information i'd need in order to create that overall thing so for something like an event you'll need to store a title for it the ticket price the description for it and so on i'll of course be breaking these down in more detail as i add them into my database but before i do this i'm going to scroll up and choose from my list of option sets now if you're relatively new to bubble you might not be familiar with option sets but essentially what option sets allow you to do is not create a data type per se in your application but they allow you to just create some static information that's stored in your database that you can reference at any given time and so the way i like to look at these is particularly if i'm using drop down menus where i want to display a list of options so here's a good example is that i have my event categories and traditionally in a drop down menu when someone's creating an event i would just type in a list of static choices about what type of categories they could choose from but instead of creating that drop down five different times across my application what i can do is actually just add this list once to my database as a list of option sets and then i can reference that at any given time for that drop down menu so i can essentially create that once and then utilize it as many different times as i would like and what i'll be doing today is actually building up my list of option sets first because i would then like to reference them within my data types so the first option set i'm going to build out today is our event categories here so if i jump over into my bubble editor and under my data tab i'm not going to be selecting the data types but instead i'm going to head over to the option here that displays option sets and what you'll notice is that the process of creating an option set is much the same as actually creating a data type you'll first need to give your option set a name so i'll be calling mine event category i will create that and now what i'll need to do is create a list of all the choices i would like within this option set so i'm going to add in a new option the first one will be called sports the next one will be called music i'll add family and then comedy and now another thing i'd like to mention about option sets is that you can also add as many different attributes for these options that you would like and the way i like to look at these attributes is these are kind of like data fields within these options here so by default it will come with a display field which is just a text field and that is just the name of the option set itself so the display text for this option is sports the next one is music and of course family and then comedy what you could also do is create another attribute for something like an image and then you could store an image within each of these option sets and the way you can do that is by selecting the modify attributes option and the way these attributes will display is within this menu here and you can upload anything you'd like for that different option i'm just going to select cancel there though because i'm happy with just leaving these as a list of text choices one thing i will note is that just for the sake of our mvp today i'm going to be keeping my options that's pretty straightforward with just four choices but in your event platform if you would like to add any different event categories i'd recommend pausing the tutorial and then adding these in now but after i've added in these four options i'm just going to jump back into my notion doc here and check off that i've added in our event category option set and now the next option set i'd like to add is just a list of times so this will be the choice of times that an event can be hosted at and the reason i'll be adding these as an option set is because i want to control the type of format of the timing that these events can be displayed at so within my database i am storing a data type here called event times and that will be linked to an event which i'll explain to you in a moment however if a user was to add in their own event time within a free text field there's no way to guarantee that the actual format of that time would be structured the same between every host for every event so what i would like to do is create once again a drop down menu when someone is uploading an event and it will display a list of available times that events can start at and they will all be structured in the exact same order and this right here is the power of option sets it just makes sure that any data structure within your application can be the same as the universal choices that you've added in your database so what i'll do now is jump back into my bubble editor and under my option sets i'm going to create a new option and i'll be calling this option times and once i've added in this option set i'm going to then add in the list of options so i'll start by adding in nine space am 9 30 am 10 am 10 30 am [Music] 11 11 30. 12 p.m and then just 12 30 p.m and now that's all i'm going to add just for our mvp today but if you would like to display a longer list of times with different choices i'd recommend just pausing the tutorial here and then going ahead and adding those in one thing you will notice though is that the formatting of all of my times here are the exact same between each option so i have the time listed in the 12 hour format and then the am or pm operator is divided with a space in between and now one last thing i would like to do is actually add a time slot number to each of these options because when we're displaying a list of times for available events what i'd like to do is actually display these in chronological order and so if i was to give a reference number to each of these times so let's say 9 a.m would be time slot 1 9 30 a.m would be time slot 2 and 10 a.m would be time slot 3 and so on i could then sort these by those time slot numbers at any point in my application so in order to do this i will need to add a new attribute here and i'll be calling this number and this attribute type will be a number as i said i want to assign it a number value and now in order to modify these i will select the modify attributes and now you'll see the attribute field here so the number i will just type in the number one i'll save that for 9 30 a.m i'll type in number two save that 10 30 will be number three eleven number four eleven thirty number five 12 will be number six and then 12 30 will be number seven and then of course if you've added in any additional time slots you'll need to go ahead and also add those attributes in to each of those choices and that is all i would like to add for our list of option sets today if i then jump back over into my notion doc i'm going to check off that i've added in our times option sets which of course included the times itself and then the time slot number associated with those and now what i can do is move along over to the actual data types that will power the rest of my application so as i mentioned before i have four different data types here and before i actually build out the data fields for each of these i will need to add each of these data types in first because as you'll see later on in our build i would like to link some of these data fields across two different data types so i'm going to jump over into my database here i will then head over to my data types option and i'll start by adding in a new data type called event i'll create that just making sure again that i don't have the privacy setting selected here and then after creating an event i would like to store the event time i will create that and then the last data type is a ticket i will then create that and now we can move ahead to adding in the data fields within each of these data types so if i jump over to my notion doc i can see that my user data type is pretty straightforward i'm just going to be storing a name for that user and then also their account type so i'll jump over into my editor here and then under our user data type i'm going to create a new field and the first field i'll be adding is the name of the user which of course would just be a text data field i'll create that and then the next data field i'll be adding for our users is the account type and now this data field will allow us to differentiate between those users who are looking to purchase tickets in an application and those who are looking to host events and this will be useful on our registration page in a later module just to identify what type of access and permissions we should give to different account types but for now i'll just note this field type should be a text field i will create that and now i can jump over to notion and tick off that i built out my user data fields there then below this i can now start building out my event data types and so i'll jump back over into my database and under our event i'll start by adding in the category of the event so i'll just type in category and i would like this field type to be the event category from our option set that we just created before so this is where you can start to see the power of bubbles database as it allows you to link data fields to other data types or even option sets and so i'll be selecting here from our event category option which of course was our list of choices in our option set i'll create that then i would like to add in another field for the title of the event which will just be a standard text field and then while we're here i'll also add in the description of the event which again will just be a standard text field and then i'd also like to create a field to be the featured image of this event so this will be the thumbnail image that displays on our home page so i will select that this is an image data field i will then create that and then below this i would like to add in the ticket price of the event which will be a number because that will also be registered as a currency which of course is a number so i'll select that choose to create that option and then i'd also like to register the total amount of sales for an event which would just of course be the sum of all the ticket prices multiplied by how many people are purchasing tickets so i'll add in another field called sales total and this will be another number field and then i would like to register the venue for the event which will just be a text field i'll create that and then finally the last data field for our event data type will be a published status and now i'll be adding this publish status in just to identify if an event should be displayed on our home page or not because the way our application will work is that an event host or just yourself if you're creating events for others they could add in all of the details for an event but then not select any time that they would like to host that event yet meaning that event shouldn't be published on our home page to users it should of course only be visible to others once all of the information including the times that the event will be hosted are verified and confirmed within our database and i'll be explaining this in more detail as we run through that module later in our series but for the time being i just like to select the field type here to be a yes no status because our event will either be published or it won't be published and then i will select to create that but while i'm here what i'd also like to do is just update the default status of this field to be no so by default an event won't be published but then when the host of the event confirms the information for that event and the times that it will be hosted we will create a workflow that switches that status over to yes and that is all the data fields i'll need to add for my event data type here if i jump back into my notion dock i can highlight these and check those off i will then jump into our event time option here so i'll head back into bubble i will select the event time data type and now the reason i'm splitting my event times here is because for every event a host will be able to add in multiple different event times so let's say there's a concert they could have a concert at 9pm across three different days and because we're storing a list of these different times i would actually like to separate these from the event itself but i will also be able to attach the event times to a relevant event by linking two data fields together and i apologize if this doesn't make a whole lot of sense now but when i run you through the module of actually creating events this whole process will have some more clarity but for the time being what i'm going to do here is create a new field for our event time so whenever a host would like to register a new event time that the event will be hosted i would like them to first register the actual dates that that event time will be hosted on so this field type will just be a date very simple i'll create that and then we will also need to register the actual time that this event will happen so i will call this field time and i would like this to just be a text option and of course i'll be storing the value from our option set list of times that we previously just added but in a workflow i'll just be converting that to text later on i'll then create that and then what i'd also like to do is just store the time slot number that we also added to our option set just because if i'm creating a list of event times for a specific event i would like to be able to sort those chronologically by the number that we've allocated to those time slots meaning that if we had two different event times on one day the earlier time would be displayed first followed by the later time so i'll add in a new data field here and i'll be calling this time slot and this will just be a number field because we were registering our time slot as a number within our option sets i'll create that and then finally what i'd like to do for our event time is once it's created link that through to an actual event itself and that will be useful when we need to actually display a page with all of the event information because at that point i would like to then display a list of all of the event times that are linked to that specific event so i will create a new field here and i will call this og event which is just the original event and it's at this point that i would like to link this back to our event data type so i will scroll on down to the event option here and now that will link this through back to any data type that's registered as an event and that is all i'll need to create for the data fields under our event time so jump back into notion highlight those data fields and just check those off and now the last data type i'll need to build out is the actual ticket itself so once again i'll jump back into bubble here i will select the ticket and so essentially within my application i would like to create a new ticket every time someone purchases a spot for an event and within that ticket i would like to obviously store some information about who is purchasing the ticket what time and dates they bought that ticket for and then i would also like to attach the original event for that ticket as well as generate a unique id for that ticket so let's start by adding a new data field here and i'll start by registering what date it is that this ticket has been purchased for so i'll call this field event date and this will of course just be a date and when we register this event date will of course be passing through the value from our event time date but i'll get to that later on for now i'll just create that and then what i'd like to do is add another field called event time and this of course will be the time that the user has purchased the ticket for and this will just be a text data field then i would like to register the event that this ticket has been purchased for so i'll call this og event and once again i'll scroll on down and this will need to link to our event data type i'll create that then i would like to register a unique id for this ticket so a ticket number so i will create a field and i'll call this ticket number and this will actually just be a text field although we will be able to store numbers within that field later on i'll create that and then finally what i'd like to do is just register a list of all of the attendees whose names will be on this ticket so i will create a field i will call this attendee names and this will just be a text field i'll create that and that is all i'll need to add for our ticket data type i'll jump back into notion once again just highlight all these data fields and check those off and that also wraps up all of the different data types and option sets that we'll need to add into our database as you can see it's possible in bubble to build out your own completely custom database to match any specific use cases or requirements that you have i can understand that if you're relatively new to bubble this might seem a bit overwhelming at the beginning so i'd recommend that if you found yourself getting lost or confused throughout any time up to this point i'd recommend pausing the tutorial and just rewatching any of these steps as i ran through them as i also mentioned though i will be explaining how each of these data types and fields will be used throughout our application as i walk us through the process of building out all of the core features within our build before we move on and actually build out a home page feature where we can display all of our available events what i'd like to do is actually first create a feature that allows us to create a new event and this is essential because in order to actually display content on our home page we first need to create that content which is of course an event so let's jump over into our bubble editor and i'll explain the process of creating an event within my editor here i'm going to select our page drop down and choose to create a new page and i'll just be calling this page create i will select that now one thing i will note before we get into the process of creating events is that i'll be splitting this into two separate pages so on our first page here the create page that i've just added i would like to first get the details of the event so what is it called where is the venue for it how much of the tickets for it and then on our second page of the experience i would like to actually allow the event host which could potentially just be yourself if you're only looking to host your own events but i would like the host of this event to be able to select from a list of available times that they would like to host this event on but of course i'll be explaining that in more detail when we get to that step in this process but let's first start by updating the color of our background here just to be a light shade of gray of course i do this with all of my pages just so i can see where any white elements lay on my page here you can always update this background color before you go and preview your application if you'd like and now the first thing i'd like to do on this page is select to add just a heading at the top of our page in the left hand corner and i'll update this static heading to just display create event and i'll just be updating this to bubbles h2 style font just because i'm not too concerned about the design itself i will just shrink the total size of that element and i'll just move that across there a tad now what i'd like to do is copy this heading here i'll drag this down and i'll call this event title and now i would like to add an input field below this so i'll choose from my input forms select just a standard input field i'll drag that out i might even just reduce the height of that a little and i'll be calling this input field title and this will just stay as a plain text field there now i will select both the input form and the title i'll copy both of those move this across to the side and in this case this input field here will be used to register the venue of this event so i'll be updating the static text to display a venue i'll update the name of this input to be called venue and once again this will just be a standard text input field and now below these input fields i'm going to just copy the heading here not the actual input field itself and then i'll be updating the static text of this to be called category and now what i'd like to do is add a drop down menu under our input forms here and the reason i'll be using a drop down menu here is to allow the person who's creating this event to just choose what relevant category we would like to store this within so i'll be updating the name of this element to be called drop down category and then i'll also need to update the choices style here to be a dynamic list now the reason i'm choosing a dynamic list if you remember is because in my database here we have a list of option sets and one of those is the event category and because i've already written all of the different options out i can just reference those at any given time throughout my application and then i won't need to worry about how i formatted each option in order to store matching values within my database so i'll jump back over to my design tab here and once i've selected that i would like the choices style of this drop down to be dynamic choices and i will select that the type of choices should be an event category and then the choices i would like to display from my category is essentially just all of them that i've added so i'll select all event categories and then the text that i would like to actually display within this drop down menu is just the current options display and if you remember the display was just the actual text of the category itself before i move on i'm also just going to close the size of that a tad so it's roughly the same height as my other input elements there and now what i'd like to do is once again select our heading up the top of our page and the first input field i will copy both of those drag those down below our category drop down there and i will update the title here to display ticket price as a static heading and then within our actual input field here i'll need to update the content format to be a currency because i would like this formatted as dollars and i would like the prefix of this currency to be just a dollar amount i'll also need to update the title here of our element to be called input price and then from here i will be copying across the title once again only this time i'll be dragging this out to the right hand side and from here what i'd like to do is scroll down on our input forms options and select the picture uploaded element i'll then drag this in and this will essentially be a field where the host of this event can upload a picture that they would like to display as the featured image for this event i'm just going to move that and the drop down menu just down a tad there as well but now i'll also update the name of this to be called featured image and i'll make sure that's flush with the other input element there if i really wanted i could also close off the venue input element there but again i'm not too concerned about the design side of things right now but then finally below this i'd like to add one last input field so i'll be copying our heading here i'll drag this down and i would like this static heading to display description and now in this case i won't be using just a standard input form here instead i'll be choosing the multi-line input option and i will drag this out across our page and now the reason i'll be using a multi-line input not just a standard input like i've added here before is that with a standard input if a user was to add in text that expands beyond the actual input size here the focus on the text would just continually scroll across and cut out any text at the beginning of it whereas when you're using a multi-line input if you have more text than the width of the element the input form will just continually expand downwards which just allows you to add in as much text as you would like and when we're storing a description for an event there's more than likely going to be a little bit more text than just a single line of an input element so i'll update the name of this multi-line input here to be called multi-line description and i can also see that i haven't updated the title here for my picture uploader element so i'll just update this static hex to display featured image i'll need to drag that out and now below this i can add in a button element onto our page so i'll scroll on over to the top of our visual elements select to add in a button element and now this button will need to display add event times which of course will be used to redirect the person who's creating this event through to our next page which is where they'll be able to add the times that this event will be hosted on so what i will do is select to start edit a workflow when this button is clicked and now before i redirect a user through to the next page what i'd first like to do is create an event within our database and just store the details here that are being used for this event but what i won't be doing within this workflow is selecting to publish this event because the time slots for this event haven't yet been added so if i jump back into my workflow here i will choose to add an event and the first thing i'd like to do is select from our data tab here and choose the create a thing option now the thing i would like to create is of course an event because this event does not yet exist and now what i'd like to do is start matching all of the fields in our database for an event with the relevant fields from our input forms that i've added onto this page so i'll select to add a field here and i'll just work my way down through this list so the category for this event will be the value of the drop down category which is of course an option set list then i'll select to add another field i'll choose the description this will be the value of our multi-line input description then there was our featured image which was the picture uploaders element its value i won't be changing the publish status at this point because i don't want this event to be published yet i will need to update the ticket price to be the value of our input price and then there was the title of the event which is of course the input title its value and then finally there was the venue of the event which was of course the input venue its value now i'm just giving hosts of this event the option to add in a manual option for the venue but if you would like to instead add in an address you could always select from the search box option in your input forms here and you could give the user the option to add in a real world address by selecting the geographic places and that would just allow the host to actually search for a specific address but for the sake of our tutorial today i'm just going to allow someone to add in the venue manually because they might like to add something like let's say a particular stadium or a particular venue name not its specific address but now if i jump into my workflow editor again i'm going to need to create a redirect event once this actual new event has been created so what i'd like to do is select to add another action into our workflow and then i will choose from the navigation option and select the go to page option and now the destination page at this point doesn't yet exist so i will need to create a new page and i'll be calling this create dash times because this is where we'll be adding the times for our actual event i'll choose to create that and now before i select that as a destination page there's one thing i'll need to do first and that is update the type of content that we'll be displaying on that page so because i'm already creating an event here what i would like to do is actually send through the data of this event to the next page which just allows us to easily associate any times that we create with this particular event so if i head into my page drop down menu and select the create times page that we've just built i will select the design tab i will double click on the page and i'll update the type of content of this page to be an event which will just allow me to now store the information of an event that i'm sending through so before i build out this page i'm just going to jump back over and complete that initial workflow on our create page here i'll select the workflow tab open up our workflow and choose that the destination page will be our create times page and i would like to send through the value of the new event that we've just created so the result of step one in our workflow where we had created a new thing now before we move on and build out the page where we'll be storing times for an event there is one last small feature i'd like to add to this page here so as it stands anyone with a link to this actual page could access this and create an event but in my database if you remember i've built out a way that allows me to differentiate between those who are looking to purchase tickets to events on our platform and those who are looking to host events on our platform and so what i can actually do on this page is create a workflow that redirects anyone who's not registered as an event host away from this page back to our home page so if i jump into my workflow tab here i'll just like to create a new workflow and i would like this to trigger every time the page is loaded and now what i would like to do is create a condition onto this workflow trigger that only allows it to load when someone's account is registered as someone who's just looking to purchase tickets for events not someone who's looking to host an event so i will select the only one option here and i will choose that this workflow should only trigger when the current user's account type is and then i'll need to paste in the option that i'll be using on the registration page of our application which will be the same value as i've added on a registration page over here so i just have a drop down selection here that displays i'm looking to attend events or i'm looking to host events so in this case i would like to copy the option that says i'm looking to attend events i'll then jump back over into my create page select the workflow tab and then i'll open up the workflow that we were just working on so when the page is loaded and then where i've selected the is option i will just paste in that text value and now whenever someone with an account type that's registered as this value visits this page they'll need to be redirected through to our home page so i'll select to add an event choose the navigation option select the go to page option and the destination page will need to be our home page and of course i don't have a content type stored on that page so i won't need to send any data through to it now this feature is not completely necessary within your build but it's just a little something i'd like to add into our tutorial today so now that i've finished building out the workflows and the design of our first create page here i can then select the drop down menu for our pages here and open up the create times page and now like before the first thing i'll be doing is just updating the background color of this page to be a light shade of gray and now over on this page the first thing i'll be doing is once again just grabbing a text element here and i'll be adding a heading to the page and now if you remember by this point we have also updated the type of content to be an event which means that because i'm sending through the data of the event that we've just created i can reference any of those details at any given time so within our heading here i would like to start by adding in some static text and this will just display add event times 4 and then i would like to display the title of the event so i can select to insert dynamic data and i'll choose to select from the current page event so the event that's been sent through to this page i would like to choose from its title so now if this event was registered as a concert it could say add event times for this particular concert i will also update this style of this to be a h2 style heading i'll just reduce the size of that element and i'll just expand it out a bit as well and now what i'd like to do is add in some additional input elements that allow the host of this event to start adding in both dates and times that this event will be hosted on so i will select to add in another text element and i will just update this to be a static heading that displays date i will also choose for this to be a h2 style font just make sure it's in line with the other heading that i've just added there as well and close off the width of that element and now what i'd like to do below this is add in a date time picker field so if i scroll on down to my input forms here i can select the date time picker option i will drag this out i'll move that across so it's in the line with our other elements i'll just move it up a tad as well and then i will just update the name here to be called date and then beside this what i'd like to do is add in a way for the host to select what time this event will start so i will copy this heading here i'll drag this across make sure it's in line with the other heading and i'll update this to display starting times and of course i'll need to drag that out and now below this heading here i would like to choose from our input forms and in this case i'll be adding a drop down field i'll just make sure it's the same height as our date time picker i'll also make it in line with our heading there i'll also just close this offer tab because i won't need that much space in this element and now instead of manually having to add in a list of static choices for all of the time slots that this event could start at what i can do is instead update the choices style here to be a list of dynamic choices and the reason i'll be choosing from a list of dynamic choices is because in our database i of course added in a list of option sets which included a list of all of the different times that an event could start at and now of course within your application you could always add in just a standard input field and allow the host of the event to manually type in whatever they would like but the reason i prefer to use this option is because if you're using option sets you can actually add in the times in a more structured way so if you look at all these times here they aren't set in 24 hour time they have both an am and pm option which means that any times that are added will just be consistently formatted across anywhere in our application whereas if you just had a single input field and you let the host add in their own time it would be hard to control the type of formatting that they add they might add in 24 hour time they might not leave a space between the am or pm operator so that's why i prefer to just use a list of option sets but i would just like to note that you're free to use whatever option you would prefer within your application but this is just the way i'll be showing you today in our tutorial so after i've selected the choices style to be a list of dynamic choices i will update the type of choices here to be the times option which is our option set there and then i'd like to display all of the times that i've added and of course the text itself will just be formatted as the current options display text so that's just the time itself and now what i would like to do is add in a button element beside this i'll just make sure it's in line with our elements and the same height and then i'll be updating the text of this button to display add time and now before i build out a workflow i would like to just update the name of our drop down here as well to be called drop down time and now we can select our button once again and choose to start edit a workflow so essentially what i'd like to do on this page is just create a workflow that registers both the date and the starting time for this event and then when i select the add time button it will create a new time slot in our database and i will then link that to the event that we're currently viewing and then once i've added a time i'd like to display it in a list of all the times that this event will be hosted on and of course give a host an option to delete a time if they need to so when my button is clicked here i'm going to choose to start edit a workflow and then within this workflow what i'd like to do is create an action choose from our data tab here and select to create a new thing and now within this workflow the thing i would like to create is a new event time and once again i'll just need to start matching all of the data fields in our database with the relevant input fields on our page here so i'll start by selecting the date option here and this will be the input of our date time picker its value i will then select the next field to be the og event so the original event that we'll be linking this to and this of course will be the current pages event then there was the actual time itself so this will just be the text of the drop down time picker here its value and because this is an option set i'll need to select the display option because that's the text of that value and then finally i would like to store the time slot which was a number in our database with the same time slot number we allocated to our option set time so this will be the drop down time its value and its number which was a numerical value and now once we have created a new event i would like to display this on our page here as a list of all the times for this event and the way i'll be starting this is just by copying the static heading here i'll drag that down make sure it's in line with the other text and then i'll update this heading to display event times i will drag that out and now below this i would like to add in a repeating group element to display a list of all the created times for this specific event so under my containers option here i will select the repeating group element i will drag this out and if you're new to bubble repeating groups are a very powerful element that essentially allow you to display a list of dynamic choices you'll see the power of them in a moment when i run you through it but as i mentioned before within our page here we'll be creating a new time and then i'll be storing that time with the event page that we're currently creating and then what i'd like to do is essentially pull a list of all the times that are associated with this event and display them in a dynamic list so in order to do this i'll first need to update the type of content to be an event time because that's the list of items i would like to display within this repeating group and then what i'll need to do is configure the data source to just let the repeating group know what event times it is that i'd like to display so for the data source option i will need to perform a search through my database and identify all of the event times where the og event so the original event that it's attached to equals the same value as the current page event and then what i would like to do after i've displayed a list of all the times is sort these in a particular order and that would be by their date and i will select the descending order should be no so i'd like to display the earliest date first right through to the final date in our database then once i've configured our repeating group source here i can update the layout style to be extended vertical scrolling which just means that it will either collapse or expand based on how many items we need to display i will then also update the number of rows to be two as i mentioned if there's more than two values stored in our database it will extend based on the layout style there and now within our repeating group cells i will just copy this heading here drag it into our repeating group and as you can see it will duplicate whatever we add in this top cell across the rest of the rows but i'll just move this heading up to the top corner of our repeating group there and i'll then move our repeating group over so the headings are aligned and i'll update the title of this heading to be called date and now what i'd like to do is add another text element below this to display the date for this time slot that we've created so i'll select to insert dynamic data and i'll choose to display the current cell's event time so the cell within our repeating group here it's date and then i would also just like to format this as the text option here i'll close that and then i would also just like to copy our heading here move that across once more making it in line there and i'll update this heading to be called starting time and then i will copy across our text element here i'll make sure it's in line and i'll update this to display the current cell's events time it's time slot which was of course just formatted as a text option so i won't need to add any additional formatting to that there and then the last thing i'd like to do within our repeating group is add in an icon element i'll drag this out and i'll be searching for a trash icon and this will just allow the host of this event to delete this time slot if they no longer need it so let's say something's to change with the planning of the actual event and they can no longer sell tickets for that time slot this will just give them an option to actually delete that and i'll be explaining how we can build a pretty easy workflow for that in a moment but first i will close the empty space of our repeating group here and then i will add an additional button below this that just displays publish event drag that down a little bit further and make it in line with the rest of our headings and what i'd like to do here is create a workflow that finally updates the status of this event to published so if you remember this event has actually already been created within our database but now that we've added times to this event we can create an additional workflow that publishes it meaning we'll be able to display it on our home page so i will choose to start edit a workflow when our publish button is clicked and then within our workflow i will select from our data tab and choose the option that says make changes to a thing and the reason i'll be doing that is because i won't need to create the event it already exists but of course that means i can then make changes to that existing event so the thing i'd like to change is the current page event and the field i would like to change now database is the publish status and i would like this to now equal yes and now finally the last thing i'd like to do within this workflow is just create one more redirect that sends the host that's creating this workflow through to a dashboard where they can view all of their events so i will select to add another action to this workflow choose the navigation option and select the go to page option once again and the destination page doesn't yet exist so i'll need to create this and i'll call this page dashboard i'll select to create that and now i won't need to send any data through to this page so i can just select that the destination page would be our dashboard page and leave it at that and that is the last feature i'll need to add within this workflow before i go and show you a preview of this experience there is one last thing i'd like to do and that is just create that workflow that allows us to delete this time slot here so i will select to start edit a workflow when the trashcan icon is clicked here and this is a pretty straightforward workflow to be honest i can just select from our data option here select to delete a thing and the thing i'd like to delete is the current cells event time now let's go and take a preview at what this whole experience looks like from our initial create page here when we're adding a new event to our platform over in my development environment here i'm going to just start by adding in an event title i'm just going to call this test concert i will select the venue to be test stadium the category of course will be music and this is a choice from our list of option sets i will select that the ticket price is 99 i'll add a featured image and then once that's uploaded i will add a description mine's just going to be short it'll say this is a test event and now i can select our add event times button that will then create this event and redirect us through to our create times page and you can see right away that the data has been sent through from the event that i've just created so this heading now displays add event times for test concert and of course you won't be able to notice the repeating group because we haven't yet added a time for this event so in order to do this i could select that i would like this event to be hosted on friday the 11th of june i'm just going to choose that it'll start at 9 30 a.m i'll add that time and it has created that entry added it to our repeating group but i can see of course that it's added in the actual time slot itself not the time of the event which just means that i've selected the wrong operator there i'll just jump back into my bubble editor here and i'll select this text element and where i wanted to display the current sales events time i was adding its time slot sorry in this case i just need to add its time which was the actual time format of this text then if i jump back over to my create page i can refresh this and now you can see it's displaying that time correctly while i'm here i'll also add in some additional times for our event so i'll say that there's one on saturday the 12th of june at 10 30 and then finally another on sunday the 13th at 12 and let's say i'd like to now delete a time i could select the trash can icon it would delete that from our database which means that it would no longer display in our repeating group and now let's say i'm happy with the time slots that i've added here i can choose to publish this event it will change the status of this event to published in our database and as i can see from the url here it has redirected us through to our event dashboard page back in my notion doc i'm going to check off that i've created a feature that allows us to create a new event within our platform throughout this experience i of course broke this into two pages where we could start by creating the details of the event and then move along to a second page where we could add the times and date slots for that event i had also explained how we could delete an event time and then finally how on our first page we could create a redirect for those users who weren't registered as hosts within our platform now we can finally move along to our first user-facing feature for those who are looking to actually purchase tickets to events and this is building out our home page where we will display a list of events as well as filter events by categories and also include a way for users to search for specific events by their titles let's jump into our bubble editor and i'll show you how this is done over in our editor we'll need to open up our home page that we had previously created before and by this point the page should be blank and there isn't a content type stored within this page so that will also be blank what i will be doing is just taking the time to update the background color to be just that light shade of gray that i always use and now the first thing i'll be doing on this page is just adding in the ticketmaster logo so i will add an image element into the top left hand corner of our page and i've just got a static image that i'm going to be uploading from my device here and once that has loaded i'm just going to reduce the dimensions of that and then i will just move that down a tad as well just make it a tad bit bigger perfect now what i'd like to do below this is add in a list of events that have been submitted to our platform and the way i will be doing this is of course by using another repeating group element so i'll scroll to drag that out across our home page there and i'll need to first update the type of content to be an event because i'll be displaying events stored within my database and then for our data source i'll just be searching for all of the events where the publish status equals yes so what this will do is just prevent us from displaying any events that haven't been published and that is the only constraint i'll need to add to this data source i will in a moment need to add in some additional filters on this to cater for a search function that we'll be building but i'll touch base on that when we need to for now though i'll be updating the layout style to be extended vertical scrolling and then if we're following the same ui as ticketmaster i'm going to update the number of rows to be two and then also the number of columns to be two because if you currently look at the ticketmaster website they only display four main events on the home page and then they separate each other event by the category it's published within or they allow users to search for an event based on the title of it but now that we've updated the layout style of this repeating group i'm going to select to add in an image element within the first cell and what i'd like this image to display is just the featured image for this particular event so i'll select to insert dynamic data and i'll choose to display the current cells events featured image i'll then just move this over to the side of our repeating group and then i'll just make that a tad smaller because what i'd like to do below this is add a text element drag that out and this text element will be used to display the title of the event so i'll insert dynamic data once again and select to display the current cells events title and i'll update this to be a h2star font and then i will also just move this in line with our image there and i'll drag that out to be the same length of that image and now below this i would then like to display the category that this event belongs to so in order to do this i'll need to drag out the size of our repeating group i'll fix up the spacing in a moment but i'll just move that heading down a tad and then i will copy this heading drag it out so it's in line and i'll update this to be the current cells events category the display of it because if you remember the category was an option set and the text of that category is just called the display and then i'm actually going to update this heading to just be a h3 star font so it'll be a little bit smaller and then i'll just need to close the empty space of that element and now what i could also do to fill in the empty space is either close my repeating group or i could actually just move these titles down and then just make the image itself within our repeating group a little larger i could then expand the title out so it's the same length as the image and we could do the same for our category title there and then i will just close off the last bit of additional space there between our image and the repeating group and now what we can also do within this repeating group is choose to filter these by the categories of events so if i would like i could add a drop down menu at the top of our page that allows users to select a particular category of event they would like to choose from and then we could update the data source of this repeating group to reflect that category selection and this is a pretty straightforward process to follow what i will be doing is selecting from our input forms and i'll be choosing a drop down menu i'll just drag this out across our page there and now what i can do is just choose from our list of option set categories that we've already stored in our database so i'll update the choices style here to be a list of dynamic choices the type of choices will be event category because that's the option set that i created and i'd like to display all of the event categories i've added and i'll be displaying the text of the current options display which was how i was formatting the text and then i'll just drag that out so it's a little bit wider and i'll also move my ticket master logo so it's roughly centered with that and then i'll just move that a little bit closer as well and i'll just update the name of this drop-down typical drop-down category and later on when i show you our preview you'll see that it'll easily be able to just pull a full list of all those option sets we've already added but now let's say a user was on our home page and they wanted to filter out all of the events based on the category of sports or music what we could do is update the data source of our repeating group here to only display the events where the category of those matches the same value as the selection from our drop down category here and the way i can do this is pretty straightforward so if i select our data source as you can see we're already searching for all of the events that have been published across our database but what i can then do is select the more option and i can scroll on down to the filter option so here where it says filtered and then i can create a filter which allows us to refine our initial search for events even further and in this case i would like to filter down those initial events to now identify where the category of those events equals the same value as our drop down category so the drop down menu i've added which of course was pulling in the category list from our option sets that we've added in our database and now what i can also do to cater for the instance where a user hasn't selected a category is choose to ignore empty constraints so that way if no category is selected it will just display a list of all of the events and if a category is selected this filter will then trigger and now the last thing i'd like to do for this repeating group here is only display the first four options that meet all of these requirements in our database because if you were to go on ticketmaster now you would see that they only display the first four events which just allows you to feature or put more emphasis on the four that are being displayed so what i'll be doing is selecting the filter option again choosing from the more option that becomes available and then i would like to display the items until number four in our database and so that way we'll only be loading four events now which also means that your application will run a bit faster because it's not loading more than four events at once and now while we're adding in our repeating group to display our events what i would like to do is also display a grid of events based on specific categories below our main events here so what i'll do is select our page i'll drag this down and then i will be adding in a text element here and what i'd like to do in this example today is just display a list of all the events where the category is sports just to show you how you could create a similar experience and go on to add any other categories that you would like to display events for whether they be music comedy or family but first i'll just be updating this title here to be called sports i will change the style of this to be a h2 heading and then i would just close off the empty space of this element and now below this i would like to add in a repeating group element and once again for this repeating group i'll be configuring it with the same parameters as our previous repeating group here so the content type will be events and then i will need to perform a search in my database for all of the events where the publish status equals yes but what i would also like to do then is add another constraint and choose to display only those events where the category equals sports so i could select when the category equals and then because we're using a list of option sets all of our existing options are already here so we can just select from sports and then that will be valid and now because we're not updating this repeating group based on the category filter here we won't need to add any additional filters to this data source so i'm happy to just leave it as it is there but what i'd also like to do for the layout style of this repeating group is display it as a horizontally scrolling repeating group which means it will scroll side to side not up and down like a traditional repeating group and then for this repeating group i will update the number of columns to be three and now you can start to see how these will be displayed horizontally i'll then just move this up a tad and make sure it's in line with our heading and our other repeating group there and now for this repeating group i'm just going to drag it down a little bit more i'll add in an image element once again like our previous repeating group i'll insert dynamic data and i'll have this image display once again the current cells events featured image i'll then just move this over to the side of that repeating group drag it out and now below this i'll add in a text element and i'd just like to display the title of this event so it will be the current sales events title and i'll update this to be a h2star font and then i will move this over to the side i'll make it in line with our image element and then just move it down in our repeating group attach and that's all i'll need to add in this repeating group cell here but one thing i will note is that if you'd like to display any other featured categories across the home page of your application you could essentially just copy the title and the repeating group here and then update the category that's featured in the data source just to match the same category as the title you display above it but i'm just going to leave it at that for today with one category because i'll also need to go and build out a workflow now that redirects the user through to the actual page for this event once they click this image so if you remember before an application we had created a dedicated page for an event which will be used to display the full details of that event where users can then buy tickets for it so what i would like to do is just create a workflow when this image is clicked that redirects a user through to it and sends with it the data of this event so i'll select our image and choose the start edit workflow option and then within this workflow it's fairly straightforward i'll select the navigation event choose the go to page option i'll select the destination page to be our event page and the data i'll be sending with it is the current sales event and now back in my design tab i would like to replicate the exact same workflow for our main repeating group here so i'll be selecting the featured image once again i will select to start edit a workflow i'll select the navigation event choose the go to page option select the destination page to be the event and then the data i'll be sending through is the current sales event and now before we go and take a preview at our home page here there is one last feature i would like to add to it and that is just a custom search function and the reason i'll be adding this is because i'd like to create a way for users to search for events by their titles and then choose to be redirected through to that specific event page and the way i can do this is actually pretty straightforward what i'll be doing is just scrolling on down to our input forms choosing from the search box option i'll then just drag this out in our top corner here also just quickly expand that out so it's the same dimensions as our category drop down and then i'll move our category drop down across so i can also just expand that element out and i'll also just move them both across so that way it's somewhat in line with my repeating group here and then what i'd like to do is update the placeholder text here to say search for an event and what this search box allows us to do is actually filter through and display a list of all of the choices that have been stored within our database so by default it will search through a list of dynamic choices so all we'll need to do is update the list of choices it searches for and displays so i'll select to define a list of options for it to search through these of course will be all of our events within our database and similarly to before i'll just be searching for all of the events where the publish status equals yes and that's the only constraint i'll need to add there and then i would like to search through and display all of the titles of this event meaning that once someone starts to type in the title of the event it will actually prompt the user with a list of recommended searches based on the event titles within our database and then from here the only other thing we'll need to do is jump over into our workflow editor and we'll need to create a workflow when the value of that search box has changed so in order to do this i'll select from our elements option here to be our trigger and then i'll select the when an input value is changed option the element will of course be our search box and once this event has been triggered i'll need to select to add a navigation event here i'll select the go to page option and of course the page i'd like to send someone to is the event page and because our search box is indexing a list of events within our database it allows me to send through the data of the event that we're clicking on so i'll select that the data to send is this search boxes value and that is the last feature i'll need to add for our home page here let's jump on over into our bubble development environment and preview what this whole experience looks like over on my home page here i can see that because i only have two events it's just displaying those within our featured repeating group here but i can see below this that we are filtering our list of sports events here within our horizontal repeating group of course i only have one at the moment so it's not displaying that as a full list and if i would like to view the full details of this event i could click through on this image it would redirect me through to our event page and it would also send through the value of this specific event which you can see in our url string there if i then just jump back into our home page i'll also show you how we can filter out our main events here by their categories so i could say i'd like to only identify those events that are the music category it will now filter those results accordingly if i was to get rid of the category it would then display those events again and then finally within our search box here i could start typing in the name of an event and you'll see that it will provide a list of recommended choices based on the event title and then when i click into this event it will also send me through to my event page and send with it the unique id for that specific event now if i jump back into my notion dock i can check off that i built out our home page feed which of course allowed us to filter events by categories we also created a custom search feature to search for events based on their titles i also explained how you could display a list of events by their categories and then finally i also walked us through the process of creating a workflow to redirect users through to a specific event page and that is all i have time for in this tutorial today if you are interested in checking out the rest of the course i'd recommend clicking the link in the description to purchase the full course within the complete course i'll be walking you through the step-by-step instructions to complete the rest of our build you can also get access to a suite of bubble tutorials where you'll learn how to build other popular products if you'd like to get started building some other popular products for free i'll be sure to include some suggested links at the end of this video thanks again for taking the time to watch and be sure to hit that subscribe button if you'd like to see any other useful tutorials to help you on your bubble journey [Music] you

Channel: Building With Bubble

Views: 949

Keywords: bubble, bubble.io, no-code, visual programming, buildcamp, no-code coaching, makerpad, adalo, webflow, zapier, no-code tools, app development, minimum viable product, MVP, Ticketmaster clone, event app, ticket app, software development, bubble visual programming, bubble no-code

Id: 2xzP26NuAW0

Length: 77min 45sec (4665 seconds)

Published: Thu Jun 17 2021