In this tutorial, Dave walks through how to build an Instagram clone using Bubble

Setup the page to 960 width and non fixed with Setup back ground to #FAFAFA flat color

Create sign up box and add ‘username = text’ to user as data

Add the image of the preview of the app and add a collapse rule <909 width hide it. (Can to this in the responsive tab)

Search for users with the input username to see if there are already user with the same username. If lower then one exist then make the button clickable.

Also add a check at the beginning of the sign up button workflow.

Make sure to add the current user to his own followers so his/her content will also show up in the feed

For the username I used find & replace a [space] with nothing so the username doesn’t contain spaces. Also use :lowercase

After sign up immediately log the user in this will take of that the user will always stay logged in.

Create a new page and clone it from the index page

Then log in the user in search for ether email or username depending on the field contains a ‘@‘

Create a page called ‘account’ so we can redirect users after login or sign up to that page

Create a page ‘password-reset’ so we can build the form to request a password reset link make it a clone from /login so you can re-use the design parts

Setup a workflow similar to the login but send a password reset link All the login, signup and reset password is now setup

Create a page called ‘feed’ here we going to rebuild the main page

We need to build a

• repeating group that will show the posts of the people you follow
• A box with the stories the people you follow posted
• And suggestions for you to follow

Create new data

• Post

When you start building the post you can add data as you go. Like adding a field for the profile image or the image post

You can copy the formatting of the login box and create a new standard style so you can reuse it for other groups.

I first build a group what will be a single post that I can later put into a repeating group so you can make the data type ‘post’ but leave the source open that will be the current cell data later when we put it into the repeating group

Add the profile photo & the username. For the username we create a data field owner in the post that is a user. And grab the users username

So the owner will be the one that posted the post

Build up the post group the same way by adding post content etc Add the plugin ‘ionic elements’ to your app to have beautiful icons ;)

When you click the users name or avatar create a workflow that opens a external page ‘website homeURL’/account/[username of the owner]

When the heart is clicked create a workflow that add the user to a list of users on the post that like to content

Hide the heart and show a filled in heart when the current user has like the post. When the user clicks that hearth he will be removed from the list

Also add a hearth icon to the post and when clicked like animate it :) Also add the post to the users ‘liked posts’

Add a comment icon that will focus on the comment field when you click it

Add a comment box and add a new data ‘comment’ with post = post, owner = current user, text = comment input

Add the comment to a list of comments in the post data

Create a repeating group between the image and comment box with parent Post -> List of comments’

After your done creating you post create a repeating group that extents on scrolling

Create a data point for the user ‘following’ type is users. And make the repeating group data post and the data source

Current-user > following > posts created

Since the web app doesn’t have a way to post yet we create a page called /post and build a form in the style of the app to post photos

When uploader is loading change button text to loading… and not clickable

Add an image element that shows when the uploader isn’t empty and hide the uploader when its not empty

Create new post and add it to the user and go to the account page Moving on to the design of the account page

Create a workflow when page is loading and set a state of the account page ‘ current user profile ‘ search for users with the username = ‘’get path from url ‘

e.g. domain.com/account/[path]

All data we use on the page will come from account -> current user profile Create a repeating group 750 x 750 for the users posts add collapse container <900 in the responsive tab

Add a group on top of the image that will show when you hover the image and it will show the comment + like count of that post

Also make sure that you set it so when you hover the overlay it also shows then it won’t glitch

To search users add a ‘search input’ and make the dynamic data ‘users’ then make a workflow that will fire when that ‘search input’ changes and opens and external URL = ‘website home URL’/account/[username from user]

You can copy this for the /feed page (make sure to copy the workflow as well)

Now going to work some more on the /feed page to add the current users avatar and username and bellow that we’re going to create the stories

For the ‘watch all’ link we use the dynamic website home URL again and we add stories?show=all later we’re going to build the stories page and make user of the ?show=all

You can now create a new data point called stories the same way as posts. So also add them to the users as ‘created stories’ and ’liked stories’ and ‘watched stories’

After that you can create a repeating group with all the stories from people you follow and you didn’t yet watch

Datasource: current user, following, created stories, filtered, advance: current user, watched stories doesn’t contain this story

In the repeating group add the content as avatar, the username that posted it and

Download the relative time format plugin and place the element inside the cell. To create text like posted x minutes ago.

Create a new blank page /stories (we need this later)

Add a workflow to the image inside the repeating group with the stories and point it to /stories vink ’send more parameters’ and add story in the first box and the unique id from the current cell’s story in the next (we need this later to know which story we’re sending to the page)

We can now copy the group with workflows to create the mobile version with only the avatars showing

Later when the page is more done we can setup rules that will show or hide the groups based on screen size

We’re now going to build the story view

Create a workflow when a condition is true. Url path story isn’t empty

– Set state of /storie current-storie

Create a repeating group with these data:

Add an group in the repeating group that will show the content and 2 arrows that will navigate between the stories of that user

Now Create a workflow when a condition is true. Url path show = all Set state of /storie show = all

Add this rule to your repeating group

When a user clicks right for the next user add the current cell storie to the watched stories

Side note: if you use something like hover effect it’s always nice to add a transition I always use 340 ms and ease-in-out so everything is smooth and the same

Now that the basic views for stories are done clone the /post page to /post- storie so we can create stories

Change the workflows so it fits creating stories

In /feed create a focus group with 2 buttons; create post & create storie and link them to the right pages

When you click the plus in the menu bar show the focus group

We can now add a box the the /feed page with random suggested users to follow

You can copy the story box and change the data inside like:

On the profile page we can now add stories and the follow and unfollow button this won’t show when it’s you own profile.

If it’s your profile we’ll add a edit button and create a pop up where you can edit your profile

First add a edit button to the profile that shows when the current user is the owner of the /account current user

Next we create a pop up with fields that edit the profile make the data the current user so you can use auto binding for saving.

Create a new data role that allows logged in users to auto bind

For username don’t use auto binding but use a work flow that changes the username if it doesn’t already exists like the sign up process

We’re now going to build the pop up to see a single post. We can create a reusable element so we can use the same pop up on multiple pages. Whats inside the pop up we can copy from the feed the whole repeating group with the posts init. (Copy with workflows)

Only we’re going to make the repeating group work the same way as the storie view. So we can click through multiple posts

Create a new state to the pop up we will later use to transfer the data form the page to the popup. (You can do this by adding a random workflow and use set state later you can delete this workflow its just for creating the state)

Add the reusable pop up you’ve created to the account page and add this workflow to a single image on the grid

After that go back to your reusable element create a work flow with set state of /single-post named: index # = (number)

So you can set the current index to the current cell index

Add a workflow to the reusable pop up and add a custom workflow that fires when the pop up opens. And go to ‘page’ of the repeating group

Take the same steps on the feed page when someone clicks the image

To make your grid look better on the/ account page & the overview on the /feed page change the image to a group with these settings:

We’ve create a menu before now we converted into a reusable element so we can use it everywhere. Make sure to also copy the focus group with the post storie & post button (copy with workflows) and paste it into the reusable menu.

Now we can add the menu on every page and if we make changes to the menu it will be changed everywhere

In the menu we’re now going to create the function of the heart icon so we can see who’s following us or if someone liked or photo.

Before we make it visible we’re creating the data for it. Every time someone clicks the follow or like button we’re going to create a ‘’log’’

And when some clicks unfollow or unlike we’re going to remove that log. When some likes a post:

And add the log to the owner of that post

When the user unlikes delete the log:

Same for every follow button (feed & account) and then also for the unfollow button remove the log

Now in the menu we can add a focus group with a repeating group init to show the current users logs:

You can copy a lot of things from the groups on the right suggested users & stories

Rules for the follow button:

We can also repeat this for the comments

Now when we click on the post image: (only show image if its a like or comment)

(Add the post pop up to the reusable element and modify that it only shows one post instead of the repeating group)

Now the only thing we have to build is the explore page so we can send new users there clone /explore page from the account

You can copy the suggested users group from the /feed page and modify it like this:

Make sure to link user that just signed up to the explore pageAnd add an explore icon to menu For the posts data: