Introduction: Twitter clone in 20 mins
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.
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. But anyway, let's launch into it and start with a blank Bubble app.
Design: Simple Twitter clone UI with sidebar
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. And 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. 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 side bar and then the rest of my page. Brilliant. Right, let's go back to Twitter.
Write a tweet box
What do we have? Let's add in our create tweet box, our write new tweet. So I'm going to add in a multi line input. I'm just going to give all of this a bit of padding. I said I wouldn't be concentrating on UI, 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 tweet. Align it to the right and add a bit of margin above it.
Use a repeating group to create a Twitter clone timeline
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. So probably the most important part is a tweet. So I'm going to create a new type called tweet. And Bubble will supply some default fields such as create a modified date, created date, and the slug. So we'll actually put in here text. In fact, I'll make it 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.
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 created date, the sending 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 %. Now, let's add in my tweet content.
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 Groups cell to column. And now I'm going to add in text and a 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. And so creator is a user data type. And so if I go back into my data onto user, I'll now add in username. Back to design, I can now say creator username, and I'll make this 100 % width. And then I'll put in the tweet content below. So current styles, tweet content. Make this 100 % width. I'm going to make the height zero so that it only takes up as much space as it needs.
And then we tend to have a grey line between each tweet. So here I'm going to change the separator to F2 is a nice grey. There we go. And I'm going to remove this default value here of mean 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 of margin on here, 60. 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. Let's preview it. 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 go to app data, we can go to tweets, and we can see that our Hello World tweet is there.
Simple user registration form
So I'm going to just create a user account. I'm going to do a really quick registration form because that's important for demonstrating things username. So I'm going to create a new page and I'll call it Register. And I'm just going to put the bare minimum in here to get this app working, which will be email, we'll have password, and we'll have username. And so I'll say email address. And by updating 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 I need the button and say register.
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 that I've been building so far.
Let's preview that. So I put in my email address and we'll put in a password. Make sure it's a secure password. Obviously, we're just testing here. And I put in my actual Twitter handle there, register. Okay. And you'll notice that Bubble has updated the creator username of that earlier tweet. And that's because 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. 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 the century? And you can see it adds it in as another tweet. Right, so we have the basics of a timeline going on here.
How to Like tweets
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 by default, which I don't like. In fact, 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 had shift there, click both elements. I'm going to and make it into a row. Swap this label to there. And this is going to be my count. 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 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. Now, I'm going to add in an only when statement here to say that 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 color code these. So green when we're adding data. I'm going to copy this, paste, make this one red and then say when it does contain current user, we remove current user.
I'm then going to add in the UI, the visual feedback to what the user has done. So I'll say when parents tweets liked by users contains current user, I will change the icon and I'll change the color as well while I'm here. Go for some red. And we can preview that by toggling the on and the off button up here on the condition.
Then let's do a count. So we'll say parent groups tweet liked by users count. And so Bubble will then do a count of how many users that is. Let's preview it. Yeah, so let's click on the heart. It goes to one. Then if I click on the heart again, it goes back down to zero. Okay, so that's how to add in likes. What else could we do here?
How to Bookmark a tweet
Let's do bookmarks. 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. No, infact, I'll just copy the heart, open up so I can just see exactly where it is. I'm going to paste the heart into this group. And 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, let's say 28, and change the heart. I'll get rid of the condition. It's not going to be a heart. In fact, 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 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 we'll say, Bookmarked tweets. And that's going to be of type tweet and it's going to be is going to be a list. And so we could say, add parent group tweet. And you guessed it we have to do our similar red and green that we have done before, which is so that the user can undo having bookmarked it.
So current user bookmarked tweets doesn't contain parent groups tweet. This 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 the solid bookmark. Let's preview that.
Okay, right. How does a user view all of their bookmarks? Let's tackle that next. So I'm going to 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 going to 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, a 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. In fact, that's crazy 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. And this will link through to the bookmark page.
Convert your sidebar into a reusable element
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 Reuseable Elements tab in the Pages menu. If I go back to Index, you'll notice that this is still editable. This is still a single example of it. It isn't linked to my reusable elements. 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 on Bookmarks, I'm going to 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.
How to: Tweet replies
Let's have a look at Twitter again. We could do replies. And I think that's the last thing that I'll do in this video. So how do we reply? Let's go back to index. And now I'm going to need another button here. I'm going to put this right to the first place and look for some 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. And make this 100 %. And say, Enter your reply here. We then need another button. So I must now call it Post. 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 then collapses when hidden. That means it doesn't take up space on the page unless it's visible. And I can even animate that. Let'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 could 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 to click the conditional statement from bookmarked. 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'd say, in reply to tweet, and I do parent groups tweet. So that's the one step up. And then the content is the multi line input, enter your reply. So I'll say, here is my reply. Okay, and you'll see that that appears up top now.
But what if I wanted to show it in line? Okay, so then I need to add in a repeating group. And I'm going to check it's in the right place. Yeah. And so this is going to be showing my tweets that are applied. So I could say tweet and I could say do a search for tweet where in reply to equals current groups tweet. Let's make this 100 %. Make it a column. I'm going to copy and paste this just because I've got the formatting set up, current tweets, content. Oh, and we want to put the creator's name in there too. But we might want to indent this a little bit. So I'll put these into a group in a column and in a margin. I'm just putting a large margin so it's very apparent. And then change this down to zero.
And we only want this visible when there are actual tweets in reply. So we'll say do a search for tweet, where in reply to equals current groups tweet. And then you could do count is not zero. And then you say element is visible. Now, some people are arguing on Twitter that a better performance from a Bubble optimization and performance point of view, better way to do this is to say first item is not empty because then Bubble doesn't need to go through a complete list. It doesn't need to count 1,000 items and decide this isn't zero. It just needs to check that the first item exists.
Cool. There we have it. Showing the reply that is there. So yeah, the UI is rubbish. We can do so much better than that. But I just wanted to show you as quickly as possible how quickly you can create something that really closely feature wise is beginning to resemble the core features of some major websites out there, such as Twitter. So yeah, this is the beginning of how you could create a Twitter clone with Bubble.
Now, we have got a website with even more videos to teach you basically anything under the sun about a Bubble. We've got over 100 videos on there, all bite sized, all heavily interlinked. Many of them are member exclusive. So you should go over to our website and check out our membership if you're building a Bubble app because we're here to help.
If you require a little bit of one to one help, you can also reach out through our website and we can connect you with a Bubble coach. And you could end up working one to one with myself over Zoom, working on your app, troubleshooting the things that are causing you pain that have taken you hours to sort out. We can resolve those together.