In this video Lachlan has instructed that how to build a Trello clone entirely out of no code using “bubble”.
Bubble is one of the best tools that provides you complete control over your own custom database and also a visual editor that allows you to easily drag and drop the powerful elements.
So throughout this tutorial video, Lachlan will be explaining step by step process to recreate your own project management tool like Trello. This will also include features like:
Introduction – From 1m:14s
- Creating User Accounts
- Creating New Trello Boards
- Adding List to Project Boards
- Creating Task Cards that can be Dragged and Dropped
- Editing Content on a Card
- Creating Database
Creating Database – From 1m:35s
The first thing we are going to do is creating the database. There should be some data types and fields added in the database in order to create a Trello clone such as:
- Data Type: User
- Fields: Name, Image, Boards Joined
- Data Type: Board
- Fields: Boards Title, Featured Image, Lists
- Data Type: List
- Fields: Name
- Data Type: Task
- Fields: Name, Image, Description, Current List
From 1m:56s
Now go for “Data” option in bubble on the left bar side of the page. Under the user field the bubble already gives a pre-built email field. So we would need to add a name, image of profile and also associate these with the list of boards as stated earlier in data type.
So the best way to do this in bubble is to star by building the data types itself. So we will add those data types and fields in bubble. After adding a list of data types on left column we will add data fields one by one by clicking on the data types. Clicking on create a field a new box will appear and we will add the field name such as “name” and the field type would be “text”.
Similarly the for all the data types we need to click on the data types stated in the left column and add the specific field names for each and field types. In order to add the boards list as a felid type we need to check the box for multiple columns to be shown.
From 4m:22s
In order to add the list in the “Task” data type we will also have to determine that which kind of current list and column this card will be featured in because in Trello code you can drag tasks between lists. So we will add the field name as “current list” and the field type as “list” that would be single because a card will not want to be in multiple lists.
Creating Features of New Board – From 5m:21s
Now we will head towards creating features of Trello product which is a function to create a new Trello board. So if we head over to our editor we can create a new page and name the new page as “dashboard”. Here we will create a big box type page and change the color of background to light gray so if we add white elements here we can see the borders clearly.
Now on this page we will create a new function like creating a new board and then just display those boards on that home page. Firstly, we will add a title box as “Boards” and on the top right corner we will add a “+” icon placed.
From 6m:34s
Now we will add text box next to icon as “Create Board” and we will select a fairly generic option. Now we will also add a pop up element on this page and this will be to create a new board. So when someone will click this create button the pop up will display and then we will add some input fields onto the pop up.
The input will add a title to the board and then we will add a picture uploader as well and this will be the way a user can add a featured image to our board. We will adjust the pop up and center align it.
From 7m:08s
Now we will add some text to the pop up as “Board title” and “Board Image” with standard text style. Now we will also add a button in bottom and apply same color code as icon color. The pop up will be hidden under elements tree because it is not always an item that is going to be displayed and only be displayed when you choose to show it.
Create a Workflow – From 8m:29s
So by clicking on 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 will want show our pop up element next on our pop-up itself. We will create another workflow on our create board button.
When we have to add any create option it will match to the on page input fields with the data fields in our database. So we will allocate these data of the board to match the input field of our title.
When the workflow will run a new board will be created but there is one other thing we will need to do for this board and that is the add the current user who is creating this through that board itself.
So we till go over to our data again and this time we will make some changes to a thing that the current user and we will go to the data field called “boards joined” and add create a board field.
So now when this workflow will run the user will create a board and join that board as well.
Registering a User Account – From 10m:15s
It is a side step added here in the procedure because there might be a situation where a user is not logged in and they click this button here to create a board or perhaps you do not want to display this to a user who is not logged in. In case if someone who does not have an account decides to click on this button, you do not want them to have a functionality to create a board.
You will first want them to create an account first so the beauty of bubble is that it is super-streamlined on handling the onboarding process for registering user accounts for you. So if you use their reusable elements, you can head over to the sign up or log in pop up.
The best thing about the pop up is because it is 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 we go over the workflow page we can surely see the different workflows shown for forgotten passwords, log in database and others as shown in figure below and these can be modified and deleted as well.
From 11m:35s
Now we will add a workflow on the home page to trigger the pop up when a user is not 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 will select to only run the workflow when the current user is not logged in.
We add element actions in the workflow that will show the sign up pop up. We will also need to go over the previous workflow we created earlier and add a condition to this workflow to only run when the current is logged in.
Displaying a list of Boards – From 12m:54s
So for this we will take help of the power of “Repeating Groups” option in the bubble. This allows us to add the custom content into the first grid and then it will replicate it across the rest of the grids and it will populate those with the content from your database.
So the first thing we need to do after the repeating group is to add a type of content that would be going to display. So we will add the type as “Board” because we are going to create a list of boards here to our current user who is logged in and we are going to display the boards where the current user has joined those boards then after that we can modify the styling and grid that could be changed as well.
From 14m:11s
So the first element we will add here is the image and this image will be the cover photo of the board itself so we will need to update it as a dynamic element because all boards will have different featured images. So this will be the “Current Cell’s Board’s Featured Image”.
Now we will head over to the text element. We will actually overlay this over the image element and we want this to display the current cells board’s title and update the styling of the cell.
Create the Board Page – From 15m:12s
Now we will have to create an individual page to display the content of the board. So we will head over to the menu and create a new page and we will call this a “Board”. The first thing we will do here is because we want to display the content over a board or project we will need to update the type of content that the page displays.
So in this case it will be a boards then we are going to take a step back to go to our dashboard page and create a workflow when a board’s image is clicked. So this workflow will essentially redirect the user to the board page once they clicked the item.
We will add “Go to page” in the navigations and make changes in the Go to page board that will allow the user to select the image it will send all the data like existing tasks or users within the board.
From 16m:22s
Now we will start to make the content functional. So firstly we will add a title that is the current board page’s title that could be used to track the page we have been working on. Then we will add another repeating group element because this is what is going to display all of the tasks or cards within a board.
So we will change the layout of the group to be horizontal scrolling and add 3 columns. We will also add the type of content for this repeating group as “List” and then we are going to want to decide the particular list that we will be wanting to display on the board page.
So we will drag the board list to the current board pages lists.
Creating a New List and Displaying on Board – From 17m:27s
Now we will create a feature to add a new column slash list to the actual repeating group itself so let us grab another input field and add that their and then we will grab a button and we will add the list. So we can add a list of title as well.
Now we will create a new workflow and create a button by clicking on workflow to add action of creating a new list and select the list. After creating list we will also need to add the list to the board so that way the board knows which list it should display. We will change the page board and update the list and add result of step one which is the new list we created.
From 18m: 53s
Now we will add a dynamic content into the repeating group. First thing we will do is just add the title of the list. So now if we test the actual dashboard page we can test it by adding the test board command and create the list. It can be seen that the list can be created by adding different names and the columns will appear for the added names.
Creating a New Task and Displaying Within List – From 20m:18s
For adding a task in the repeating group column we are going to add a plug in first called draggable elements. The first thing we will add is the drop area element and this means as an area where cards can land on between the rows that we have. Now what we will do is to change the color of this to be a black background as shown.
Later we will add a content type for this that would be a list and this will also display current cells list. Once our drop area has been added we will add a repeating group element. Now the reason of adding a repeating group is because in this one column we will add a list of multiple cards and these grids will act as individual tasks or cards that we add in a particular column.
From 21m:07s
So we will change the type of content for this repeating group as “Task” and we will need to search for all of the tasks where the current list equals the parent group list. Finally we will make the one row and one column within the repeating group. So it will look like a normal group because you cannot see the group in between and we can store multiple items within there as well.
We will change the style as well being the “Task Repeating Group” and also change the background color to be blue. In order to show the card themselves we will add a draggable element within the repeating group. Now this element is another group and change its color to white.
From 23m:25s
Now to add the task we are going to add the name of the tasks so we will pull the dynamic content from the parent group task and want to display name by updating to be h2.textile and the parent group is of course the card slash task here. We will also add the image here as the “Parent Group’s task Image”. Now we will add a function to create a new card as we can display that as well by adding the input as the “Create Task”.
From 24m:34s
Now we will create the workflow when an input value is changed now of course the input we will add here is the “Create Task Input”. So it will now register whenever test is added into that and when the user clicks enter that value.
We will add a workflow to create a new thing and add a “task” command here and we will keep it simple giving a name to this task. So now whenever a input will be added to dashboard it will create a new card.
From 25m:53s
The actual clone would look like as the following image that is the final one. This could be reset as well by heading back to the workflow and changing the considerable commands we need to reset. Here we can add another step as “reset inputs” and that will help to reset the inputs that we will add in the actual clone.
We can see in video that by adding extended vertical scrolling in the function it creates an extended list of scrolling cards on the dashboard and we can add as many multiple cards as we need.
