Build a Twitter Clone with Bubble.io - My Profile

Adding a Settings Page to Your Twitter Clone

In this Bubble tutorial video, I'm going to demonstrate how you can add in a settings page like edit current user. That's basically what I'm going to detail in this video. And this is a follow-on from other videos that we've done around this very rough in terms of design but functional no code Twitter clone built with Bubble. And in this video I'm going to be focusing on not creating a profile page like this advice viewing another user, but how I view my details as the current user.

Exclusive Bubble Tutorials on Planet No Code

But before I launch into that, we've got tutorial videos for Bubble that you can't find anywhere else, not even on YouTube. You can only find them on our website planetnocode.com and the only way that you can access these videos is to become a member on our website. So head over to planetnocode.com to learn about becoming a member.

Creating a Settings Page

Let's do this. We're going to create a settings page. Like I say, I am not concentrating on the sign here simply because it would take too long because I would never be building with a fixed layout if I was wanting to design well. Settings, that's not it. Okay, right now here's the common mistake that I see people making is they think right this page is about a user. And so they would say well the type of content then has to be user now.

Understanding Type of Content in Bubble

Type of content is really useful and I see it being underutilized and misunderstood. But it's perfect for what was in the previous video which is linking through to another user's profile page where you could view all of their tweets. But this is not that what I'm building here is a my fact. Let's make it really clear. Is a my settings page.

Using Current User for Settings Page

So everything on here will always be about the current user and the issue with using type of content in this context is every time you navigate this page you're going to have to provide a user. Because Bubble won't let you link to a page that has a type of content set unless you provide an example a single example from the database of that content. That's so you don't end up with just empty pages. But we don't want that to happen because we know the current user.

Keeping It Simple in Development

So you could put current user in there, but I like developing on by all keeping it simple. Keep it streamlined keeping it lean. So let me check my database. What fields do I have? Okay, I'm gonna put in a putting username now you would obviously want to put in some sort of precautions that some sort of maybe system-wide updated the user was updating their username. I'm just going to treat usernames like any other field in this instance.

Implementing Save Functionality

So there are two ways we can do this we can have a save button or we can use autobinding. I think in this instance, we will use a save button. Especially if you want to do additional checks like checking no one else has got the same username. You won't want to use autobinding for that because it would save automatically autobinding as Bubble's autosave. We've got videos on that go and check it out, but we just add in a save button.

Setting Up the Initial Content

Okay, so when I view this page as a logged in user acting as current user. The initial content needs to be in the username that I've already set up. So it will be current users username. Let's preview that.

Creating a Workflow for Saving Changes

Okay, there is my username. That's also my username on Twitter. If you want to follow me on Twitter for Bubble tips and tricks, that's where to go. And so then if I change it, I want to make changes to that field. So I add in a workflow here or now there are two ways you can do this. You can do data make changes to a thing and say current user or if you want interest access current user. You can say make changes to current user username and then I link it through to my input.

Organizing Inputs for Clarity

In fact what I can do so that it makes it very easy for me to know which inputs mean the matter of either form a 20 inputs it I will call this place. So I'll add the placeholder username that then updates the Bubble label up there if you were to manually update this you can that's gonna help you organize your apps. But then if you change the placeholder you copy and paste it, it's not going to automatically update.

Testing the Save Functionality

Right we've got our action save you six updated the name of the elements of the input there and let's preview that. So let's say that this username was taken or I wanted to rebrand in fact, let's say I could I could call it Bubble tutorials. That could be my new username and so I click save.

Verifying the Changes

I think that's safe and then if I refresh it, I'm going to check to see whether that has saved because it's then going to pull in the current users username and I can debug this by clicking on the inspect clicking up here and I can see where it's getting the data from initial content is and check that this has been working current users username.

Conclusion and Further Learning

Okay, so there you have it. That is how you can add in a my settings or my profile page to the social media app you're building a Bubble or the Twitter clone you're building with Bubble or even the x-clone that you're building with Bubble. That's how you do it. Check out our early videos if you want to get caught up on Harry and then how to send a tweet or a post depending on what Elon is calling it right now and learn how to get up to this point in building a Twitter clone with Bubble.