Build a Twitter clone with nocode in 20 minutes

Introduction to Building a Twitter Clone with Bubble

In this Bubble tutorial video, I'm going to show you how in around 20 minutes you can create a Twitter clone in Bubble without writing a single line of code. You can go from a blank canvas to something like this. Now the UI isn't great but let me show you. We can put in our first tweet. We can like it. We can bookmark it. We can go to our bookmarks and see the tweets that we've bookmarked and we can even reply to it and show the reply in line.

Benefits of Planet No Code Membership

Now before we launch into it, have you checked out our website? Do you know about all the benefits our members get? We've been recording Bubble tutorial videos for over a year now. We've got over a hundred bite-sized Bubble tutorial videos. Some of them are member exclusive and you can only get them on our website if you become a member. Also if you've been following us on YouTube or maybe this is the first time you found us, it really helps if you can like and subscribe. It helps us continue to create content like this by knowing that we've got an audience and we've got people who really love and adore our content.

Starting with a Blank Bubble App

But anyway, let's launch into it and start with a blank Bubble app. So let's dive right into it. Here is my Bubble blank canvas and so first of all I'm going to change the layout to a row. That's because I'm going to begin to put in a sidebar and I'm just going to focus on the main timeline here. You don't want to be using fixed because fixed just makes it a real nightmare when you come to making a responsive app in Bubble. You want to be using columns and rows.

Setting Up the Basic Layout

So let's make this a column. This is going to be our sidebar. For now we'll just say that it's 300 pixels wide and then I'm going to add in the rest of the page content which I'm just going to say is also a column and get rid of the fixed width there so that this stands out a little bit. This tutorial is not really going to be focused on UI design. It's going to be focused on speed and getting the technical details in there. I'm going to click preview and you should be able to see I have my 300 pixel sidebar and then the rest of my page.

Creating the Tweet Input Box

Brilliant. Right let's go back to Twitter. What do we have? Let's add in our create tweet box. I'll write new tweets. So I'm going to add in a multi line input and I'm just going to give all of this a bit of padding. I said I wouldn't be concentrating a new eye but we'll make it a little bit neat. Set this to 100% width so it takes up all of the space within the container that's available and then I'm going to add in a button and call this a tweet. Align it to the right and add a margin above it.

Setting Up the Timeline Repeating Group

Right now I need a repeating group. I need a way of showing my timeline. So repeating group is how you list through entries in your database in Bubble. So I take my repeating group and add it in below and I now need to create my database structure for handling everything I need in my Twitter app.

Creating the Tweet Data Type

So probably the most important part is a tweet. So I'm going to create a new type called tweet and Bubble supplies some default fields such as create a modified date, create a date and the slug. So we'll actually put in here text. In fact I'll name it content so that it stands out a bit more and this is of type text. This is where we'll store the tweet itself and we'll add to this as we go along I think.

Configuring the Repeating Group

So I can now say the content for my repeating group is a tweet and I shall do a search for all tweets. Let's go with the creative date descending order. I'm going to uncheck the number of rows. This is all in the process of making it more responsive. Set my width to you guessed it 100% and now let's add in my tweet content.

Adding Tweet Content to the Repeating Group

So going back to here we have a profile image. We'll skip over that. We'll have the author and the content. We'll start that for now just to keep this tutorial nice and quick. So we change the content of the repeating group cell to column and now I'm going to add in text and small title. Yeah this will be the author's name. So we can say current tweets creator and now we don't have any fields on creator. So creator is a user data type and so if I go back into my data onto user I'll now add in username.

Creating the First Tweet Workflow

Back to design I can now say creator username and I'll make this 100% width and then I'll put in the tweets content below. So current cells tweet content. Make this 100% width. I'm going to make the height zero so that only takes up as much space as it needs and then we tend to have a gray box, sorry a gray line between each cell. So each tweet. So here I'm going to change the separator to F2 is a nice gray. There we go and I'm going to remove this default value here of min height of row and set that to zero and actually to add in a bit more spacing around it all I'm going to group all of the content in the tweets repeating group cell and apply some padding. Okay we're getting close we're getting really close to actually putting a tweet in. So I'm going to put a little bit margin on here 60. Yeah let's create our first tweet. So I'm going to do that I'm going to add a workflow to the tweet button. I'll say when this button is clicked create a new thing create a tweet content and here is where I link in my multi-line input and that will create a tweet in the database that's preview.

Testing the Tweet Creation

Here is oh let's just go old school hello world tweet okay and so you can see that it's gone into the database it's missing the current user username or the creator username because I haven't supplied a username for current user that's me as I'm testing it but we can check that it's worked because we have it in our repeating group here and also we can go into data we can get app data we can go to tweets and we can see that our hello world tweet is there.

Creating a User Registration Form

So I'm going to just create a user account I'm going to a really quick registration form because that's important for demonstrating things like username. So I'm going to create a new page I'll call it register and I'm just going to put the bare minimal in here to get this app working which will be we'll have email, we'll have passwords and we'll have username so I'll say email address and by updates in the placeholder it updates the label within Bubble which is really helpful for telling the inputs apart when we connect up to workflows and then need the button and register.

Setting Up the Registration Workflow

So let's create a workflow we're going to do an account action and this is a sign the user up we'll link in the email address input we'll link in the password input and we'll set the username. Nope the username input and then to be really particular about this we don't want any of these to be empty. I'm going to click preview before I do that I'm going to say when they've registered go to page index because that's the timeline I've been building so far.

Testing the Registration Process

Let's preview that. So put in my email address and we'll put in a password make sure it's a secure password see we're just testing here and I put in my actual Twitter handle that register. Okay and you'll notice that Bubble has updated the creator username of that earlier tweet and that's because when you unless you disable it you disable cookies when you interact with Bubble you're running as a current user and so if you register that user it carries forward anything that they had done previous to being registered so it knows that I was the creator of this tweet and it's added in the username that I created so let's try another tweet we could say are you ready for the fight of of the century. Okay and you can see it adds it in as another tweet.

Adding Like Functionality

Right so we have the basics of a timeline going on here so let's think about likes so I'm going to add in into my timeline here's my tweet I'm going to add in an icon. I'm going to go for heart and I'm going to go for the empty heart just going to get rid of the roundness on the border and then I also think that Bubble adds in some padding for ID fold which I don't like. I think I need to make that zero. There we go let's make this a bit bigger just to demonstrate. Okay so I need to create a workflow for when the heart is clicked for it to keep count so I'm also going to add in a text label group it with the heart so I hold shift there click both elements and make it into a row swap the this label to there and this is going to be my count.

Implementing Like Functionality

Now you could just count you could start with zero and say every time the heart is clicked add one but then you need to find a way of saying well how do I make sure that someone doesn't click it more than once and that counts more than once how do I make it so that if a user clicks it twice it undoes so it goes from liked to not liked. So one way we can do that is by effectively saving the saying that this user hearted this tweet so we will do that by saying when the heart is clicked make changes to a thing parent groups tweet and we'll say liked by users and we'll say user and we'll say it's a list and so we can say add current user.

Adding Conditional Like Logic

Now I'm going to add in an only when statement here to say this action can only take place when the current user hasn't already liked this tweet so I'll say only when current tweets liked by user doesn't contain current user and I like to co-code these so green when we're adding data and go copy this paste make this one red and then say when it does contain current user we remove current user and then going to add in the UI the visual feedback to what the user's done so I'll say when parents tweets liked by users contains current user I will change the icon I'll change the color as well while I'm here go for some sort of red and we can preview that by toggling the on and the off button up here on the condition then let's do account so we'll say parent groups tweet liked by users count and so Bubble will then do account of how many users that is let's preview it yeah so let's click on the heart it goes to one and then click then if I click on the heart again goes back down to zero okay so that's how to add in likes what else could we do here let's do bookmarks.

Adding Bookmark Functionality

So you would get that by clicking that button there on Twitter I think if I remember correctly so we'll add in I group these together group into a row and then say that there's a bit of space between them let's go for say six and then I'm going to copy and paste yeah I thought I would I'll just copy the heart open up so I can just see exactly what it is I'm going to paste the heart into this group say that say that my group containing my heart and my count is going to be fit width to content I'm then going to add in some nice spacing here say 28 and change the heart get rid of the condition it's not going to be a heart that I'm just going to go for a bookmark icon okay so we need a way of the current user keeping track of how many and which tweets they've bookmarked so we'll do it slightly differently to the hearts because we're not going to it's not making changes to that tweet it's going to make changes to the current user so when the bookmark is clicked we will say make changes to current user and then I'll create a new field and also bookmark tweets and that's going to be off type tweet and it's going to be a list and so we could say add parent group tweet and you guess that we have to do our similar red and green that we've done before which is so that the user can undo having bookmarked it so current user bookmark tweets doesn't contain parent groups tweet it is our green and this will be our red rather than add we remove and then we have our visual feedback so we say when current user bookmark tweets contains parent groups tweet I'm going to change the icon to be solid bookmark let's preview that okay right how do how does the user view all of their bookmarks let's tackle that next.

Creating a Bookmarks Page

So I'm gonna create a new page and I'm going to duplicate this page because I want to keep some of the layout so not register index and I call this bookmarks and I don't need my create new tweet here but I do need a list of tweets and so this time instead of it I'm gonna get rid of that margin on the top there we go instead of the data source being do a search for all tweets with no constraints we can change this now data source can be a do a search for and that to be honest is one of the most common ways but you can also just display any other list you have in your Bubble app and so the list we're going to display is current user bookmark tweets now I'm going to update my navigation here to make this very easy to jump between them let's add in some I don't know why I've gone for 96 that's crazy panic let's go for 30 and I'm going to add in a link what does Twitter actually call it home right so we'll have home which links through to the index page and I'm going to copy and paste it and we'll call this bookmarks this will link through to the bookmark page right now I have an element that would be perfect to convert into a reusable element because I don't want to have to keep updating my sidebar for every page so I'm going to convert it to a reusable element and call it sidebar and you can see Bubble has made a copy of my element that is now accessible under the reusable elements tab in the pages menu if I go back to index you'll notice that this is still editable this is still like a single example of it it isn't linked to my reusable element so I actually need to delete this and then bring in my sidebar check that it's in the right place in my element tree that's very easy to get mixed up with and copy and then bookmarks will delete that placeholder paste in my sidebar put it onto my left hand side so this means that if I click preview this is my bookmark page I have no tweets bookmarked let's go back to home let's bookmark a tweet go back to bookmarks and you'll now see that that tweet is bookmarked and is visible to the bookmarks let's have a look at Twitter again we could copy we could do replies and I think that's the last thing that I'll do in this video.

Adding Reply Functionality

So how do we reply let's go back to index and I'm going to need another button here and I'm going to put this right to the to the first place and look for some sort of reply icon and to reply I need to create a form so let's go for our multi-line input again add that in down here make this 100% and say enter your reply here we then need another button some ask I call it post so you next move it to the right I'm going to group these together because I only want this box to be visible when the reply button is clicked so I'm going to group and say into a column add a bit of margin on top let's just go for 24 in this case and I'm going to say is not visible on page load and collapse is when hidden that means it wasn't don't it doesn't take up space on the page unless it's visible and I mean even animate that let's have you know it's have slide in so I'm going to say when this is clicked now I don't need to do red and green here because Bubble has a toggle view for show and hide so I can say toggle an element and I need to know the name of this group so I'll just call this reply group let's preview that I need to go back to home oh and I still have the conditional statement from bookmarks let's remove that that's what's wrong right so if I click reply I then get my input here so I need to add in a workflow right add workflow when post is clicked and so we will say create a new thing tweet now I'm going to need a way to link this tweet to the original one that I'm replying to so I think I would do that by saying create a new field and I say in reply to tweet and I'll do parent groups tweet so that's