Did you know that you could build an Instagram-like platform without ever having to code?
Instagram has never been bigger these days, so it’s only normal for any budding developer—technical or citizen—to wonder what goes into the building of a photo-sharing social media platform.
For this article, we’re detailing the process of building your own version of the popular social networking service through Bubble!
Let’s begin!
Establishing your database
Once you’ve mapped out your product’s display, you can zero in on establishing the appropriate data fields to start your web app. Make sure to fill them out accordingly as we’ll depend on these properties to connect your workflows.
Bubble has a programmed database that simplifies creating different data types with separate fields. Split larger items into unique types of data to better your application’s speed. For instance, for every post, we’ll create two unique data types.
One type of data will cover the fundamental details of a story—i.e, number of comments, likes, and the account owner-while the other type of data will cover larger content files such as the caption of the photo and the photo itself. By separating these data types, we’re afforded the chance to only load necessary content at the right time, reducing the content extent Bubble will have to render.
For our Instagram-like web app, use the following data types and fields:
Data type: User
Fields:
- Name
- Bio
- Handle
- Profile-photo
- Posts – List of posts. Note: Creating a field as a list based on a separate data type allows you to seamlessly integrate all of its relevant data fields
- Followers – List of users
- Following – List of users
Data type: Post
Fields:
- Likes – List of users
- Comments – List of comments
- Post-content – Post-content
Data type: Post-content
Fields:
- Caption
- Post-image
Data type: Comment
Fields:
- Content
- Post – Post
(source: https://bubble.io/how-to-build)
Establishing your workflows
Now that you’ve established both your app’s database and design, it’s time to begin stitching every element together to ensure it works. In Bubble, these elements are referred to as workflows.
To better understand what a workflow is in this context, let’s borrow a few words from Bubble’s online manual: “A workflow is an event that runs a series of actions when triggered. Workflows are the medium you can use to express what your application does. For instance, when a user clicks on the button ‘save’ (the event), ‘something’ should happen (the series of actions).”
Now that we know how these work, let’s move forward to developing user profiles.
(photo source: https://bubble.io/blog/build-instagram-clone-no-code/)
Updating profiles
Just like with Instagram, a settings page is necessary when creating or updating profiles. By using a futon of input fields, we can seamlessly add information into a profile. After filling in the necessary data, a workflow will be triggered by users when they click the “update button.”
From here on, you can optimize this workflow and edit it to make necessary changes within this database. For this example, what you’ll want is to create changes to the users’ present details, calculating every on-page input with the appropriate data fields.
Once this workflow is functional, it will automatically update every relevant field with the new values.
Post new media
(photo source: https://bubble.io/blog/build-instagram-clone-no-code/)
Once a profile has been set, we’ll then need to create a feature that lets them post on the platform. After all, the goal is for them to socialize on the medium by posting photo or video content.
The workflow that lets user-generated posts work will also be patterned after a structure similar to the profile-editing function. However, in this scenario, a new thing is what you’ll need to create in your database.
On the upload page, we’ll need an image uploader element, on top of a multiline input field. A workflow will then be triggered when a user clicks the share button.
Moving forward, you’ll also have to create a new thing in your database. This time being a new post.
We’ll begin by creating the post content data type through this workflow before we move forward to linking this to the post itself. After that, we’ll create another thing, adding an extra step to this workflow. This time, we’ll work on creating the actual post itself.
By linking this post to the initial post content, you can conveniently integrate this data across your entire app.
Every time a user triggers this workflow, a new post will be posted.
source: (https://bubble.io/blog/build-instagram-clone-no-code/)
You may not intend to be the next social media mogul, but know that an app for your business can definitely be made. If you have web app ideas lying around, tell us what you have in mind, and we’ll help you!
Check our courses to learn more about building your app. Give us a call today!
