Build a Twitter Clone with Bubble.io - User Profiles

In the Bubble tutorial we add user profiles to our Twitter clone. We explain how to user a Bubble app page's Type of Content to create a template for all Twitter users in our app.

Ask a question

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all Q&As

Thank you for the follow-up question on our how to build a Twitter clone in Bubble.io video. This is how you can add in a profile page to your Twitter clone or your X clone as it's now called.

Overview of Twitter clone

So I've got a simple function here I'm able to tweet and I'm able to view a timeline of tweets and let's go ahead and add in the profile

Creating a new page

So I'm going to add in a page and call it 'profile' and I'm not concentrating on design a tool here, simply because then that would take too long. So my profile is going to be like if someone wants to click on my image on one of my tweets on this platform, this is what they'd see. So they should then see a list of my tweets.

Understanding Type of Content

And so they're going to go and view a page that is all about me and I'm an individual user and so the type of content is going to be user. That is setting up this page to be a template that I can then deploy, basically deploy and then anyone who clicks through to this page and sends a user unique ID, and I'll show you how to do that during this video, they'll get to see that user. So I'm gonna make this really simple. I'll just put in a header at the top and now I can interact with the data that's sent through to the current page.

Tweet repeating group

So current pages user username, repeating group, and so this will be tweets, and I'll do a search for tweets where the 'created by' equals the same user who I'm viewing on this page. They're not current user because that's me, but current page user. I'm then going to sort them by creative date, reverse order, so the most recent that's at the top. Let's put in... in fact I'm going to copy from my index page. Just copy that because this is what I've already designed. Again, very rough for an individual tweet. But I'm copying and pasting this across, it's not going to across the workflows unless it was to right-click and do copy workflows. So none of these buses are going to work. I'm just simply wanting to get the design across and I'll change this to a column and then paste it in, get rid of the fixed number of rows. Okay, how do I link through to this page? I need to do that now so that I can test it. So I'll go back onto my index page and I'm just going to link through the username. So I'll add a workflow. When the username is clicked I navigate to page, profile, current groups tweet, creator. Let's preview that. So yes this is me clicking through to view my own profile but it would work just as well if I had other users in this database. In this demo if I don't any other users registered. But if I click through, I can then see all of the tweets in the timeline. Now that is how I would go about creating a profile page.

Extra tips

I'm going to point out a few extra things for you while I'm here. You can set the profile page slug. You need to do that maybe during the user registration. That is basically how you would ensure that the profile page, if we look at the URL here, this is the unique ID of the profile of the user that I'm looking at. And you can replace that with a custom slug. You might want to make that the username if you're building a Twitter clone just like this in Bubble. Also this is not hard to go about creating an edit my profile page. Edit my profile page. I've seen people get quite confused. I can see how easy it is to do with this type of content. If I'm viewing a page that is just the the current user, I don't need to pass the current user into this page. I can simply create a group and I can say this group's data and then any fields, any form elements in that are the current users. So if I'm viewing my own profile in order to edit it like a settings page, I wouldn't expect to see any unique idea up here. In fact, right now I'm going to record a second part to this video of how to go about creating a settings page within this app.

Latest videos