How to Build a Scalable Social Feed in Bubble (Database-First Approach)

You know, almost every serious application needs one specific thing in order to succeed, and that's community. And the key feature you need to probably build into your application to cultivate that community is a social feed. And this can take many different formats. It can, it can be super simple. It could be more complicated. But in this video, what I'm going to show you is how to build a proper social feed into your Bubble application. Look, I've been in tech for over 40 years. I worked at IBM's classified AIX team building the very first version of Unix IBM commercially launched. I've worked with applications that have had hundreds of thousands of users. And one of the things I've learned is that the difference between an app that feels alive and one that feels dead almost always comes down to that spirit of community. And here's the thing that most Bubble developers get completely backwards when they start off to build a social feed. They normally start with the UI and they build the repeating group and they throw in some data and it works, kinda, and they try to scale up and then everything, it suddenly comes crawling to a halt and they don't really know why. And the secret is, is that your database structure is what makes or breaks your social feed. So if you get that right and everything else falls into place, you'll be great. And if you get it wrong, you're going to end up rebuilding from scratch 6 months from now. And believe me, you know, I've had that conversation with more than one founder and it's not fun. So before we get started, I do want to tell you, go check out ratio.dev and get access to our free no-code resource center. Just put in your name and your email. We update it every week. It's got plugins, it's got vetted content. It's got how-tos, great books to read. You know, it's got our podcast episodes. So I think it's really worthwhile resource. So, you know, pause the video, go, go sign up and then come back. Hey, glad you came back. Thank you. So let me tell you a quick story. A few years ago, a startup came to us and they'd built a social community platform and it was really beautiful, had great design. It was running on a database structure that made me cringe when I saw it. They had one giant post table. Everything was in there. User data, content, images, likes, comments, all smashed together. And every time they tried to load the feed, you know, Bubble was doing all these complicated searches and advanced filters. And, you know, you needed a PhD to understand what was going on. The problem was they were essentially sending 4 different interns to get the same coffee instead of sending one every time somebody came in, you know, and it was slow and it was cumbersome. And so you need to keep your data types really tight and concentrated. Store your follows, your follows, your comments, keep things structured correctly so that everything flows well. And, uh, you know, I harp on this a lot. This is the key to almost every Bubble application problem. When people ask me, but can you scale an application in Bubble? I don't know if you build it right, you can, you can scale millions of users. There's no problem. I mean, it's just a question of resources, but if you build it poorly, then you won't, you know, you won't get past 200 and things will start coming to a halt. So, you know, you want to make sure you're paginating and you're, you know, you're doing things the right way. I'm going to show you a social feed just to kind of give you an idea. I mean, nothing super fancy here, just a mockup. And, but the UI is, is the least important thing. So let's jump into the Bubble Builder and let's go look at a database. You know, here I'm going to go to a post data type. And this one is actually more complicated because we have two sorts of social feeds that we build, blockchain aware or not blockchain aware. This one has everything in it. So, you know, you'll see all sorts of fields that you may or may not need, but the most important things to keep in mind is that you can also associate your feed with the data structures that are most important to your application. So in this case, we're building a charity application and it's associated with each charity. It's associated with each project the charity has. You can associate the posts with users. You can associate them with customers. You can build this. That's the really cool thing about building in Bubble is that you can make it as, as unique and specific to your use case as you need it to be. So, but what you're going to really need is you're going to want to have a count of the likes. You're going to want to have a list of the people who have liked the post. You're going to want to have the ability to have multiple layers. So each post should be able to have a parent post that will allow you to create a structure so that you can have a post and comments, and you could have replies. You could take that indefinitely deep if you want to. It gets really kind of complicated to manage the UI if you start going too deep. Into the nested structure. I did a video not long ago about doing nested structures in, in Bubble. So go check that out if you're interested in that. But you're going to want to associate the image for the post. If it has— if you are supporting video, then you're going to want to have the embed link of the video. You're going to want to have the ability to upload videos. I did a whole video on how to host videos inside your Bubble application. So if you're interested in that, go check that out. And then you're going to want to take into account quotes and reposts and replies. So those are going to, you know, be other connectors or links inside this central database, which is the, the post table. So from starting there, let's look and see a little bit about what this would actually look like. And here I have a a cause page in this application. And if you come here and you click on the feed, you can see down here that we have a, a very typically kind of like Facebook shares, likes, comments. Another way to see this would be if we had a site-wide feed, or if I go into a project, then you could have a social feed that is structured like Facebook, or you could have it structured like Instagram, or you could have it structured like YouTube. That's completely up to you in the UI. You do want to take into account your privacy rules so that you're keeping things clean there. So if you have any doubts on how to best do that, feel free to reach out to us here at ratio.dev. We can definitely help you with that. So you're going to want to have— let me— you're going to want to structure this in reusable elements as well. So when you're doing that, In this app, we have quite a few. You're going to see, we have a social feed reusable, and inside this social feed, it has the repeating group where it searches for this. And then each one of these is another reusable element called the post element. That's what displays the actual post. And inside that, you're, you're likely going to have a creation element. So we have a social feed that is only for comments. This is really useful at the bottom of a blog post. So you may want to have, you know, comments on your blog post, but you don't want to mix in, you know, different blog posts, just that one post, blog post comment structure as a social feed. We have a Post Maker, which is the, the, the fields that you're going to use to create posts inside the field, be them comments or be them posts. They may want to support images posts, text posts, video posts, image and video posts. So if we go in here, this is showing the user's profile picture, their username, the text they can put in. And then, you know, as you create these, you may have a— you're going to have a workflow for image posts. This is going to want to upload the image. You may want to optimize it. You're going to have quotes. So if this is a quote to a different post, so basically these follow a very similar pattern. Some of the fields change that you're going to do a repost, a text post, a video post, a video and image post. So the workflows, they are going to be slightly different, but similar, you know, you're going to have here also, we have like a camera icon here. This will allow them to upload a video. This uses a reusable that we have, which is video upload. Here's an image uploader so that if it's just an image, then we just pull it in and then we, we send it and optimize it and store it in the, in the post table. You can control the number of characters they, that you may want them to write into the post text. So that's interesting to keep track of as well. But the important thing is to maintain a structure so that all of these are separate reusables that you can use where it makes sense. Because like I was mentioning, if we're going to go and see a, let's look at a, in this case, a, an impact feed that is more of a grid type, more typed like Instagram. Then here they can click on a specific post and over here it will show them the details of that post and embedded underneath will be a comment section. So that is another separate reusable element that is just comments associated to an impact post. Now it gets more complicated if you're using the blockchain, you may want, you know, that then we need to be, you know, signing and creating transactions in the backend, all of that. But that's definitely doable as well. You know, you want to keep as much of the hardcore functionality of your social feed in backend workflows so that you're not slowing down the user interface. Think of it like a restaurant. The frontend is where the waiter is. They're responsive. They're interacting with the user. The backend is the kitchen. That's where the chef does the heavy lifting. Doesn't bother anybody. So keep the, the likes and the, and the, uh, and the, you know, navigation on the frontend, but push the sending notifications, uh, you know, uh, processing videos, keep all of that on the backend so that everything really is nimble for your users. Yeah. Option sets, you'll probably want a feed type so that you can keep track. Is this an image? Is it a video post? Is it an image and video post? You may have specific post types that are specific to your application. So maybe we create a post every sometime somebody does a donation, and sometimes we want to show those on the feed and sometimes we don't. That's the kind of real-world scenario that you can use in your application that really makes things customized for the needs of your community. Uh, you know, you can give them as much or little functionality as you need. So I hope this gives you kind of a rough idea of how to set up a social feed in your Bubble application. If you'd like help with it, or you'd like us just to do this for you, just reach out to us at ratio.dev. We'd be happy to work with you. If you have any questions, put them in the comments below and we'll definitely answer them for you. Hopefully if you enjoyed this video, give it a like, give it a, you know, subscribe to our channel. You just don't know how happy that makes Tony and I. So that means a lot to us. Yeah. See you in the next video.