This blog is the second part of a two-part article, so make sure you read the first one first!
Now that we’ve discussed how to establish a database, establish your workflows, update profiles, and post new media — all in the context of developing an Instagram-like platform—let us proceed!
Establishing the “feed”
When your app’s users will have uploaded posts, it’s only right for you to build a feed, meaning a corner in your app where your users’ posts will be displayed in an arranged grid. This is done by using Bubble’s retreating group element. To update and display a list of content, we’ll need repeating groups to integrate with your database.
When optimizing repeating groups, we’ll need to link a data type within a database to the element. For this scenario in particular, you’ll have to classify the content type as a post.
You’ll also have to establish the data source as a list of each content piece where the creator is in the current list of following users.
Once that’s done, we’ll proceed to begin strutting the content that will appear in your grid. Simply arrange the top column with the necessary data you want to display, then this element should power the rest of the columns based on the existing information you filled out.
In a repeating group, you can also establish events from individual rows.
(source: https://bubble.io/blog/build-instagram-clone-no-code/)
This feature will come in handy when developing navigation features on your app. For instance, if a user wants to comment on a content piece, they’ll have to be sent to a dedicated page that shows a list of each comment for that particular post.
Posting comments
Establishing a workflow that helps successfully post and show comments is as easy as our other prior workflows. To lead users to a comment section, we’ll have to develop a navigation workflow that will be triggered when a user taps the comment icon found on the feed.
(source: https://bubble.io/blog/build-instagram-clone-no-code/)
In this workflow, we’ll have to send a user to a page, this page being the comment page. In doing so, we’ll have to send supplementary information so the Bubble editor is aware of which comments to show on the page. The information you’ll need to send is one found in the current cells post.
On the comments page, we’ll have to establish the page type to be a post. This informs the Bubble editor to show unique information reliant on every post that is sent through the workflow.
Then, we’ll move forward by adding a repeating group yet again to the page to show the list of comments.
When developing this particular retain group, the type of content will—you guessed it—be a comment. As expected, the data source will have to be linked from the current page’s post to the index comments.
Moving forward, we’ll have to arrange the necessary content for every comment on the repeating group’s topmost row.
Under the comment list, we’ll also have to add a supplementary input field, making sure users are granted access to being able to post comments. That means, when the post button beside the input field is tapped, we can now build a new workflow.
Here, we’ll have to create a new thing, the new thing being a comment. Like the earlier steps, we’ll then arrange the comment input field with the necessary data field.
Liking content
Now that we can post content and comment on them, the next feature we’ll have to establish to create an Instagram-like social media platform is the ability to like a post.
(source: https://bubble.io/blog/build-instagram-clone-no-code/)
As usual, Bubble’s editor makes this process seamless and easy to develop. On the home page, once again, we’ll build a workflow that’s triggered when a user clicks the heart icon.
When creating a like, the workflow will be as fast and easy as choosing to make changes to the current cells post.
The change we’ll need to build is to the posts’ like field, making sure it’s linked to the current user.
Showing profiles
Arguably one of the best parts of Instagram is being able to see as a whole, the individual profile page of a user. Seeing a user’s profile allows you to do two things apart from being their content—the ability to follow and the ability to like their posts.
(source: https://bubble.io/blog/build-instagram-clone-no-code/)
By developing a profile page, we can begin dynamically showing the retired data for every user.
Begin by establishing this page type to be—you guessed it, yet again—a user.
Proceed to add dynamic elements to the page needed to show for every user.
Lastly, we’ll optimize another repeating group here, making sure we can showcase all of a user’s posts posted by the current pages user.
You can simply configure the repeating group’s data types as posts, then program the data source to look for posts where the current page user is also the creator.
Following a profile
The last part of developing an Instagram-like platform is developing the ability to follow another profile.
(source: https://bubble.io/blog/build-instagram-clone-no-code/)
That said, we’ll have to build a follow button on the user’s profile page. When a user clicks on this button, we’ll develop a new workflow that once again makes changes to a thing, this thing being the current user. Our objective is to add the current page to their list of existing following users—very much the way Instagram does it.
Once that’s settled, we’ll also have to update the followers list of the current page user. We’ll get this done by adding the current user to the said list.
And just like that, your own version of Instagram is done!
source: (https://bubble.io/blog/build-instagram-clone-no-code/)
Interested to learn more? Check our courses here!
We have so many tricks up our sleeves. Truly, building a web app has never been easier. If you have apps you want to be built or program ideas you want to actualize, give us a call and we’ll help you out!
