Building A Trello Clone With No-Code Using Bubble

now you can see when i grab a card and move it the color of the droppable element around the outside will go white when it's selected so if i move it over to in progress you'll see that that drop area goes white i can then drop that within that area and automatically that'll update the list that this card sits within hello my name is lachlan and today i'll be teaching you how to build a trello clone entirely out of no code using bubble bubble's by far one of my favorite no code tools as it gives you complete control over your own custom database and also a visual editor that allows you to easily drag and drop powerful elements for those of you who don't know me i've spent the last year working with the bubble team to write their how to blog series this series took a list of the top products out from the market such as airbnb uber and spotify and broke down the step-by-step process to recreating them with bubble while these written tutorials were helpful to makers all across the world i had plenty of requests to go out of my own and recreate them as a video series throughout this tutorial i'll be explaining the step-by-step process to recreate your own project management tool like trello this will include features like creating user accounts creating new trello boards creating lists within those boards and tasks within those lists and then being able to drag and drop those tasks between lists and finally being able to edit the content that displays on each card so grab your bubble editor and follow along as we build our trello clone together okay so the first thing we're actually going to do in this product is create our database now if you want to follow along with the notion template i've created here i've given an outline as to what data types and fields you should have when creating a trello clone so we'll head over to our database now and we'll start creating our new inputs now under the user field bubble already gives this to you with a pre-built email field as well so you won't need to worry about that we will need to then add a name and a profile image and then also associate these with a list of boards that the user will join so the best way to do this in bubble is to start by building the data types itself so we'll have a user a board a list and a task so add those in now so we've got our users there we'll have a board list ask and now we can go and create our data fields within these and we'll need to link these so that was the reason why we had to create our data types first so in our user field we'll create a name field that'll be a text type we'll create a profile image field which will be an image type and then we'll want to create a list of boards joined and this field will link to our board's data type and because a user can join more than one board at a time we'll want to make this a list of multiple entries then we'll head over to our board type and add in the fields from our notion template here so there'll be a board title a featured image and then a list of lists so we'll create a title again that's the name of the trello board so it'll be text a featured image which will be an image and then a list so i refer to lists as columns in trello so we will create a list this will be a list property and again there'll be multiple columns or lists within a trello board so we'll take that there's multiple entries and then for our list property this one's pretty straightforward but i will explain this later on in our build so for the list itself we'll just need a name which of course will be another text input now the reason that the list property doesn't have many data fields is because all of the content will be hosted on the task itself and we can link that back to the list that it's in so if we go to our task data type we can see that we're going to need to add a name text field a description which is another text field and what else was there there was an image so that'll be the featured image for that particular card and make that an image field and then we'll also need a list field now this will determine which current list or column this card will be featured in because intro of course you can drag tasks between lists so we'll write this as current list and this will be a single list because a card will not want to be in multiple lists at once we'll only want it in a single list perfect and just like that we've created everything we'll need for our initial database and now we're ready to build the first feature of our trello product which is the function to create a new trello board so if we head over to our editor we can create a new page and we'll call this page our dashboard i will make that page a little bigger you can also find the constraints of the device that you're building for in this case i'm just going to use a rough estimate i also personally like to just change the background color to a light gray so if i'm adding any white elements i can see where my borders are now on this page what we're going to want to do is create a function to obviously create a new board and then display those boards on that home page so what we'll first do is just add a title here boards i'll just choose a generic styling for that h1 make that a bit bigger now over in our top right hand corner we will select to add a icon we want this to be a plus icon and we will just update the color of that you can create new styles i'm just going to update the default one and then i'll just add some text next to it to create a board again i'm just going to select a fairly generic text option and you can see that our home page is starting to come together now what we're going to want to do is then also add a pop-up element to this page and this will be the pop-up to create a new board so when essentially someone clicks the create button this pop-up will display and then we'll add some input fields onto this pop-up this one will be the input field to give a title to the board and then we will add a picture uploader as well and this will be the way that a user can add a featured image to our board we'll just reduce the size of this pop-up you can center these horizontally and now i will just add some text this will be board title again i'll just be choosing a standard text style on a board image let's make that up now this is very rough but you can definitely take the time to design this properly i'll add a button down here and i will just grab the same color code from my create button a pop-up will be hidden under elements tree here because it's not always an item that's going to be displayed it'll only be displayed when you choose to show it i'll make the primary button color same as a blue and the text of this should be to create board now what we'll need to do is create a workflow to trigger that pop-up so over on our create button we will start a workflow when our icon is clicked we will then need to go to element actions and show an element and then we'll want to show our create pop-up element next on our pop-up itself we will create another workflow on our create board button so when it's clicked we will want to create a new board itself so head over to our database items create a new thing the new thing we'll want to create is a board then we'll match the on-page input fields with the data fields in our database so we will allocate the title of the board to match the input field of our title its value then we will get the featured image and use that value of our picture uploader now when that workflow runs a new board will be created but there's one other thing we'll need to do for this board and that is and the current user who is creating this through that board itself so we will go over to our data again this time we'll be making changes to a thing the thing will want to change is the current user and we'll want to go to their data field called boards joined we want to add the result of the step one so that is the new board that has been created so now when this workflow runs a user will create a board and join that board as well back in our notion doc we can then check off that we've created a new board and the next feature we're going to work on is a little bit of a side step we're going to want to register user accounts now the reason i've added this after the function of creating a new board is because there might be a situation where a user isn't logged in and they click this button here to create a board or perhaps you don't want to display this to a user who isn't logged in in the case that someone who doesn't have an account decides to click on this button you don't want them to have a functionality to create a board you'll want them to create an account first so the beauty of bubble one of my favorite features is that it is super streamlined in handling the onboarding process for registering user accounts for you so if you use their reusable elements you can head over to this signup login pop-up now what this will do is it provides you with a pop-up form to essentially create a user account without you having to worry about a thing now the best thing about this pop-up is because it's a reusable element bubble has already pre-built all the workflows you need to create a user's account or throw up a forgotten password message so if you head over to your menu here and go over to this reusable element it'll take you to the element itself separately if you go over to the workflow tab you'll see all of the existing workflows that can run with this and you can modify these with delete these if you don't want them but for instance here is a workflow that shows you your forgotten password when a user clicks the login button it'll log them in then hide the pop-up if they're new it'll sign them up and then hide the pop-up so it'll already take care of registering an account for you the only thing we'll need to do back on our home page is create a workflow that triggers the pop-up when a user isn't logged in now we can do this by adding conditions to our workflow so when our element is clicked and the element is the icon to create a new board we'll select to only run this workflow when the current user isn't logged in then what we'll want to do within this workflow is go over to element actions we want to show them the sign up pop-up and what we'll then also need to do is head over to our previous workflow that we created and add a condition to this workflow to only run when the current user is logged in so now this icon will register between the two and show the correct pop-up based on a user's current registration status once we've ticked off this feature we can then focus on displaying our boards on our dashboard page and this will be possible with the power of repeating groups so repeating groups are one of my favorite elements within bubble what they allow you to do is add custom content into the first grid and then it will replicate it across the rest of the grids and it'll populate those with content from your database so think of this like a social media feed in that these are all status updates it might have text it might have an image but these are all going to be different based on content that suits someone's preferences so the first thing we'll need to do when we've added a repeating group is choose the type of content that it's going to display in this case it's going to be a board because we're going to want to display a list of boards to our current user who's logged in and we're going to want to display boards where the current user has joined those boards then after that we will modify the styling of our grid and we can change that to let's say two and three now the repeating groups will continually scroll down if you've added more items than the six that are in here and now we can start adding the content that will go in this the first element we'll add is an image and this image will be the cover photo for the board itself so we'll need to update this as a dynamic element because all boards will have different featured images so we want to make this the current cells board featured image then we'll head over and grab a text element and we'll actually overlay this over the image element and we want this to display the current cells board's title and i will just update the styling of that move that to down there perfect now on our dashboard page once a user has created the board or perhaps joined a board it will display a list of all the boards that they are associated with and then they can essentially click on that and that will redirect them over to the board page itself now we can tick off that we have displayed a list of all the boards in our app and what we'll need to do now is create an individual page to display the content of the board itself so we'll head over to our menu we'll create a new page and we'll call this a board and the first thing we'll need to do here is because we want to display the content of a board or project we'll need to update the type of content that the page displays so in this case it will be a board then we're going to take a step back and go to our dashboard page and we're going to want to create a workflow when a board's image is clicked so this workflow will essentially redirect a user to the board page once they've clicked this item so when this is clicked we'll head over to our navigation event we will select go to page and the destination page in this instance will be our board page and we're going to want to send some data with this because we're going to want to send the data of the current board that is being clicked so the current cell is bored now whenever a user selects that image it'll send with it all of the data so like the existing tasks or users within this board over to that page now on our board page we can start adding all of the content to make this functional so the first thing i'm going to want to do is add a title that is the current board page title just so you can track the project that you're working on i'll make this heading a little bigger and then i'm going to want to add another repeating group element because this is what's going to display all of the tasks or cards within a board so what i'm going to want to do then is also change the layout style of the repeating group to be a horizontal scrolling and as you can see right now it only has one column but if i add three columns you'll start to see it's looking a lot like a trello board then similar to last time we're going to want to add a content type for this repeating group which will be a list and then we're going to want to decide which particular list will be wanting to display on this board page so we'll need to grab the list from the current board pages lists now after we've configured our repeating group we're going to create a feature to add a new column slash list to the actual repeating group itself so let's grab another input field add that there and then we will grab a button and we'll add new list as the action here for that so someone can add a list of title we'll call this and we'll create a new workflow when the new list button is clicked and the thing we'll want to do is create a new list so head over to the data column create a new thing select list and the name of the list which is the only field will be the value of the input list title that we just added then after creating the list itself we'll also need to add this list to the board so that way the board knows which lists belong to it and which list it should display so we'll head over to our data field we'll make changes to a thing the thing we'll want to change is our current page board that we're on and then we'll want to update the field which is the list and we'll add the result of step one which is the new list that we created now every time that's clicked a list will be added in chronological order so next we'll want to add some dynamic content into this repeating group the first thing we'll do is just add the title of the list so the current cells list name make that over there we'll just change the style of that to also be a h2 so i just want to reiterate where we are up to at this point so on our dashboard page we can head over and actually create a board itself so i'm just going to call this a test board i'll add an image to this board and then i'll create the board itself and i haven't changed anything formatting wise yet and the image isn't the full size of that row but you can see that the title is there and the image is there and you'll also be able to see that i can click through and that will take us to the board page the test board there and then over here what we'll want to do is create a new list because there's nothing in our repeating group yet so i'll call this um backlog create list and you'll see that our backlog column is there we'll make the next one in progress you can start to see these come along nicely the last one i'll do is just called complete and there we have it our board is coming along nicely so back on our notion board we'll check off on the features list that we've created the board page we've also added the feature to create and display lists within our board and the next thing we'll actually be doing is adding a task within the list now between this and being able to move tasks between the lists this is where things can start to get a little complex so you'll want to follow along carefully when we're adding our tasks within our column or list repeating group we're going to need to do so with a plug-in first called draggable elements the first thing we'll need to add is a drop area element and what this means is that this is an area where cards can land on between the rows that we have now what i'm going to do to help illustrate the drag and drop elements is just change the color of this to be a black background and we will update this later we'll also need to add a content type for this which would be a list and then it'll also need to display the current cells list once our drop area has been added here what we'll need to do is actually add a repeating group element now the reason i'm adding a repeating group within this drop element is because within this one column you'll want to add a list of multiple cards so you can picture almost these grids being each individual task or card that you have within a particular column so we'll go ahead and change the type of content of this repeating group to be a task and then we'll need to search for all of the tasks where the current list equals the parent groups list now because this repeating group sits within the actual drop area itself and we configure this drop area to be a list it's now going to pull all of the existing cards that are within this list finally the other thing we'll do is i'm going to make this a one row one column repeating group so although it might not look like a repeating group it might just look like a normal group because you can't see the grids in between rest assured that it will allow you to store multiple items within here then to help you separate the repeating group from the group i'm just personally going to create a new style for this repeating group so i can change the color of it so i'm going to call this task repeating group and i'm just going to change the background color of this to be blue so you can now see the repeating group within the draggable element itself the last thing we'll need to do to actually show the cards themselves is add a draggable element within our repeating group now this element is another group so i'm just going to change the background color of this i'll just keep it white in this instance and this will actually contain the content of a card itself now as always we'll need to update the type of content this will be a task and the data source for this particular task will be the current sales task then within the task we're going to need to add the name of the task so we'll pull the dynamic content from the parent groups task and want to display its name and i'm just going to update that to be a h2 textile and the parent group of course is our card slash task here then head over to our image and we will add this to be the parent group's task image so if there's a featured image that will display and if not it will just collapse instead so you can see our cards are coming along nicely the last thing we'll need to do is create a function to actually create a new card because we can display them at the moment but we're going to want to create new items within our column or repeating group we'll grab a text input element and we'll just make this the same width as the group here and we'll call this input create task one thing you'll notice within trello is that once you've added the task name it'll automatically just add that card there's no button like we had for our list and this feature is actually really easy to replicate in bubble so what we'll need to do is head over to our workflow editor and create a new workflow when an input value is changed now of course the input we're going to use is the create task input so it'll now register whenever text is added into that and let's say a user clicks away or hits enter that value has been changed the thing we'll want to do then is create a new thing the thing we'll want to create is a task and we'll just start by keeping it simple by giving a name to this task and the name will be the value of the input field that we've just added then after we've given a name to our task we'll need to add this task within a list or column as i'd call it itself so we will select the current list option and we'll want to make that the current sales list that it sits within so now whenever a input is added here it will create a new card and add it to the list that we've selected in so let's head over to our development environment and check that out i'm going to create just a test card here i will hit enter on that and you can now see that our card has been created within the column that i wanted to create that in another quick feature that you could add here is to reset this input value so that the word test doesn't sit around there and the easy way to do that is just head back over to our workflow where we're creating a new task and we'll add another step under element actions to reset inputs and that will reset the input that we've just used so if i now refresh the development page that we're working on i'm going to call this card test2 hit enter and you can start to see that the repeating group is scrolling down and right away you'll notice that two things have happened first of all the input field has reset which is exactly what we wanted but you can't actually notice the new card that we've created and the reason that's happening is because we haven't configured our repeating group to use extended vertical scrolling yet so if i scroll down within the repeating group the card is there as you can see but what we'll need to do is go back to our bubble editor and just change the layout style of the repeating group to be extended vertical scrolling now what that'll do if i reset this page is create an extended list of all the cards so i can continue to just add as many cards as i want and it'll add them within this list or column now back on our notion page we can tick off that we have created a new task and displayed those in a list and that is all i have time for in this tutorial today if you wanted to check out the rest of the course i'd recommend clicking the link in the description below and purchasing the full course throughout this 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 rebuild other popular products if you'd like to also get started learning how to build some other popular products i'll include some suggested videos in a moment that you can also check out thanks again for tuning in and be sure to hit that subscribe button if you'd like to see any more helpful tutorials like this to help you on your bubble journey

Channel: Building With Bubble

Views: 3,840

Keywords: Bubble, No-code, Webflow, Airtable, Adalo, Zapier, Software development, visual programming, bubble.io, bubble.is, trello, project management tools

Id: FD_4weyJErY

Length: 27min 58sec (1678 seconds)

Published: Sun Jan 31 2021