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.
Unlock the power of settings: Learn how to create a dynamic user profile page in your Twitter clone with Bubble!
Master current user data: Discover the secrets to displaying and updating current user information effortlessly in your Bubble app.
Take your Bubble skills to the next level: Build a fully functional settings page with save functionality and real-time updates!
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.
Can't find what you're looking for?
Search our 300+ Bubble tutorial videos. Start learning no code today!
Flexible Pricing Plans to Fit Your No-Code Journey
Choose the plan that aligns with your goals and start building your startup today.
Have questions?
We have answers!
Find answers to common questions about our membership plans, programs, and more.
Both plans offer full access to our learning resources, community, and support. The Annual plan provides a significant discount (over 15%) compared to paying monthly, and it allows you to lock in your rate for a full year.
Absolutely! You can easily upgrade or downgrade your membership plan at any time by logging into your account and selecting the desired plan. Any unused portion of your current plan will be prorated and applied to your new plan.
As a Planet No Code member, you'll receive a discount on our Bubble coaching sessions. Monthly members receive a 10% discount, while Annual members receive a 17.5% discount. To redeem your discount, simply log into your account and book a coaching session through our platform.
Our 8-week intensive mentorship program is designed to provide personalized guidance and support to help you accelerate your startup journey. You'll be matched with a startup expert who will work with you one-on-one to set goals, overcome challenges, and make rapid progress.
To apply for the Mastery Program, simply click the "Request Invitation" button on our pricing page and fill out the application form. Our team will review your application and schedule a call with you to discuss your goals and determine if the program is a good fit for your needs.
We accept all major credit cards, including Visa, Mastercard, American Express, and Discover.
While we don't offer a free trial, we do provide a 14-day money-back guarantee. If you're not completely satisfied with your membership within the first 14 days, simply contact our support team, and we'll issue a full refund.
If you decide that Planet No Code isn't the right fit for you, you can cancel your membership at any time by logging into your account and navigating to the subscription management page. Click the "Cancel Membership" button, and your membership will be terminated at the end of your current billing cycle.