Build a Twitter Clone with Bubble.io - My Profile

Headshot of Matt the Planet No Code Bubble Coach

Need 1 to 1 help?

Your no-code consultant & Bubble tutor.

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

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
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