Build a Twitter Clone with Bubble.io - User Profiles

Adding a Profile Page to Your Twitter Clone

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. So I've got 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 a profile but before I do that we've got more Bubble to do videos than you can find on YouTube you can only find them on our website planetnocode.com. Some of our videos are exclusive to our members so you need to head over to our website if you're serious about learning Bubble.

Creating the Profile Page

Let's get to that profile page. So I'm going to add in a page and call it profile and I'm not concentrating on design at all 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 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 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.

Designing the Profile Page

So I'm going to 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. So current page is 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 a created date reverse order so the most recent it'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.

Copying and Pasting Elements

When I'm copying and pasting this across it's not going to copy 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 in get rid of the fixed number of rows.

Linking to the Profile Page

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 have any other users registered but if I click through I can then see all of the tweets in the timeline.

Additional Profile Page Considerations

Now that is how I would go about creating a profile page 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 using if you're building a Twitter clone just like this in Bubble.

Creating an Edit Profile Page

Also this is not how I go about creating an edit my profile page that 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 about 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 when 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