Build a Twitter Clone with Bubble.io - My Profile

In this Bubble tutorial we add a Settings page or My Profile page to our Twitter clone built with Bubble.io.

Ask a question

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

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 for viewing another user, but how I view my details as the current user.

Create a Settings page

We're going to create a settings page. Like I say, I am not concentrating on the design 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, 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... In fact, let's make it really clear... is a My 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 you don't end up with just empty pages.

Using Current User

But we don't want that to happen because we know the current user. So you could put current user in there, but I like developing on Bible, keeping it simple, keeping it streamlined, keeping it lean. So let me check my database. What fields do I have? Okay, I'm going to put in a username. Now you would obviously want to put in some sort of precautions, some sort of maybe system-wide updates if the user was updating their username. I'm just going to treat usernames like any other field in this instance. So there are two ways we can do this. We can have a save button or we can use auto binding. 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 auto binding for that because it would save automatically. Auto binding is Bubbles auto save. We've got videos on that, go and check it out, but we'll just add in a save button. 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. 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.

Make changes to Current User workflow

So I add in a workflow here. 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 to just access current user, you can say make changes to current user. username, and then I link it through to my input. In fact, what I can do so that it makes it very easy for me to know which inputs, I mean imagine if I have a form of 20 inputs here. I will call this placeholder, add the placeholder username. That then updates the Bubble label up there. If you were to manually update this, you can, that's going to help you organize your apps, but then if you change the placeholder, you copy and paste it, it's not going to automatically update. Right, we've got our action 'save', you can see it's updated the name of the element 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 call it 'Bubble tutorials' that could be my new username. And so I click save. I think that's saved. 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 user's 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. 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 with 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 earlier videos if you want to get caught up on harry and elon 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 twisted clone with Bubble.

Latest videos