In this video Lachlan Kirkwood provides a detailed walk through for building an Instagram app entirely out of no code using Bubble.
Bubble is one of the most useful no-code tool as it allows you to build a custom database that could help in building truly dynamic software experiences.
From 0m: 46s
Within this video you can learn how to build your own version of Instagram without touching a single line of code. In this tutorial you will learn the features like:
- Creating User Account
- Building a Home Page Feed
- Uploading Posts
- Creating User Profiles
- Liking and Commenting on Posts
From 1m: 12s
We will first go through and set up the structure of our database as it will power the rest of the application and to avoid any roadblocks along the way, we will set up the data files and fields to get to going.
We will working off a notion dock that id created with all of the different lists of datatypes and fields that we need within but also they will be explained along the process.
From 2m:00s
So going to our Bubble editor, we are going to create the post data type, the post content data type, the comment data type and it will also be explained that why the post processes have been separated.
The reason why the post data type and the post content data type are separated as it can be seen in the notion dock is because with bubble it will immediately load all of the content within that particular data type.
Let us say you are fetching a post within your home page feed to display, you will obviously want it to display a list of the likes and comments which are quite light weight fields to load as they are sometimes just a list of users and also just a list of comments.
But for larger file formats like the post itself will only want to display this content when it is necessary because if we start to load it when it is not needed and that will quickly slow down the actual page itself so that is why we will be splitting the post content separately.
We will split apart the actual image within the post and also the caption because the captions sometimes can be quite long and when you have got a lot of text that can certainly be added to the needed content.
Configuring the Data Types (From 3m: 23s)
So we will start by adding the data types for “User” in our bubble editor for and we will start by adding name, bio, handle, profile picture, followers and following. The field type used for profile picture would be image and for the list of followers and following the field type would be the user and we will check the box to add multiple entries in the field of list here.
From 4m: 38s
Now we will add the data fields for the post type and this will include the likes, comments and post content. For the field of “Likes” we will be using the field type “user” because you can also store a list of all the users who have liked the post and then you can perform a count of that number to display on your home page so it is just as effective and provide a ground source.
For “Comments” on a post we will add the same procedure as “Likes” but with “Comments” as field type. Similarly the field of “post content” will be linked to the “post content” data type and it will not be multiple as one caption is added for one post.
From 6m: 00s
Now we will add fields for the “Post content” data type. These fields include the caption and post image. So the caption will be linked to simple text field and the post image will be linked to image. We can also select the multiple entries for the sake of image.
From 6m: 50s
Now we will add our fields for the “Comment” data type. These may include content and post. So for content the text will be added as a field and for the comment post we will link it to the post that would be single and select the multiple box.
Register New Accounts (From 7m: 38s)
There are two ways to do this. The first one is that the bubble comes with a handy pre-built reusable element that you can use now. This is a pop-up element that can be clicked any time.
It is a register pop-up that contains an email, a password and a password confirmation field. This pop-up provides with a lot of workflows that contain the forgotten password so they can resend link through email and there are plenty of different workflows as well go ahead and register a user or logging in an existing user.
So let us say that user has downloaded the application and they want to land on a page once the open the application not just link to the pop-up to begin with.
From 8m: 30s
You can also go ahead and add a new page and we will call this as “register”. Now the first thing we will do is just quickly update the configurations of this page to look roughly like a mobile device. If you are building for a specific mobile, the dimensions we will be added accordingly.
We will change the background color to a light grey so ant white element could be properly seen while adding it on the page. We will add a text box at the top of the page and the text as “register account”. We will change the style of it by choosing the default style of bubble. We will start by adding h2 and make it darker and move the text box to the center.
From 9m: 21s
Now we will start adding in some input fields on the page. For this we will add some input boxes on the page and we will rename the input as name and add a text box above the input to list it as “name”. We will duplicate the added boxes and name it as “user name” for anyone who registers the account.
Again duplicating the boxes to give them a name as “email” of the user and also the “password”. For all these inputs we will add a default content formatting to the page as text inputs but to register them to our database properly, we will need to update this to be an email content format.
Now after all this information we can add a button at the bottom and change its color to be white and add black border as well and name the button as “Create Account”.
From 11m: 35s
Now we will add our first workflow and select that from the workflow editor. So firstly you will match the email data fields with the input values from the input fields that we have added onto our page so because we have given the right naming conventions so our email input will already be seen there.
We will select to add the emails value to the emails value on our actual page as well with our password there too. We can also add some additional fields here that we need to store within a user’s account after they have just created it.
For this we will add the name field here and also their username that they might have added. We can also send the user confirmation as well when they once add their email to get registered.
After all these steps we will wat our user to go to the home page once he has registered the account and for this purpose we will add a new page and name it as “home” and get back to the workflow to add a workflow and name it as “Go to Page”.
Settings of Page (From 14m: 55s)
The setting of page will allow the user to update their profile information or might enter any additional data that they would like as profile photo or their bio information because we did not register that while creating the user’s account.
For this we will go to bubble editor and start it.
Firstly we will create a new page in the editor and call it as “settings page” and once again we will just be updating the configurations of this page to be quite rough. We will add text box at the top of the page again and call this as “Settings” and use the h2 format again roughly center that horizontally.
Then we will add the same input fields that we did from our registration page over onto our settings page. So we could go back to registration page and duplicate some of the boxes we would need and paste them on settings page. So we will duplicate the name and username and paste it on the settings page.
From 15m: 23s
Here we will also add the bio input with multi lines as it would be helpful for user to add multi lines for their bio text. This input will expand as the user would add more lines.
Then underneath that we will add some more text and this will be for the user’s photo. We will grab an image uploader here and update the naming conventions of these. Then we will add a button element at the bottom of the page and name it as “Update”.
From 16m: 17s
Now we will need to add a workflow for making changes for the user account after it has been made. So we will head over to our data tab here and select to make changes to a thing and the thing that we will going to change is the current user who has logged in and wanting to update his profile settings.
For this well select the update all of the input fields within our page and match them in the our database. So will start with name, username, bio and then the profile image.
Now we can either redirect the user to their profile page to display them their profile with the updated information or we can show them a success message on the settings page. So if we want to display a success message, we will just add a text element back on our page underneath the update button in order to update profile as “profile updated” and we will uncheck the box to make visible only after the update button is pressed and add a workflow for this as well.
For this purpose we will choose the animate option and not the show because we only need it after the profile is updated.
From 18m: 16s
So now we will add the element we want to element is the text “Profile Updated” and select the fade in fade out animation and you can also define accustom duration for this animation and in this case we will add 500ms. So when the user will now update the message will display for 500ms and then fade out.
From 19m: 00s
Now if we want to display the username automatically on the page, we will display these inputs because we have stored them in our database and if a user hits update and those fields are empty, it will then reset those field in our database and make those blank which we do not want. So we will now select on input field here and will add the initial content and we can start displaying dynamic data from the user’s existing profile information.
In this case in our naming field we will want to display the current user’s name, and the username field will also be displayed. Another feature will be added as to recognize if the username is taken and this is something you can also add to your registration page, so for this we will add an error message for the new user to say that the username has been taken buy another user.
We will add a text box adjacent to username and add text as “username taken” and add a workflow to show the message.
From 20m: 50s
So here we will add a condition that only show the message when the error is ran and go for the condition column in black box. and add the certain conditions as shown in picture.
We can also add also add a condition our settings page for the update button element because technically the moment a user can still update their profile even when an error message is shown. So we will want to make this button un-functional if the username is taken.
So we will go ahead and add a new condition and it will be the exact condition we added for our username input field.
From 24m: 32s
Now over the database page we can test the conditions applied and while entering the existing username we can see that the “username taken” message appears and vanishes when we change the username.
So the very last thing that we will do on the settings page is to create a redirect so if someone is to send someone who is not a user of Instagram platform. A link to the settings page they are going to get the settings page and just see a whole bunch of blank fields and that is just not a great user experience so we will head over to workflow editor.
Here we will create the workflow that registers when a page is loaded and we are going to add a condition to this workflow that registers when a current user is not logged in. If they are not logged in we will redirect them back to home page and we would not be sending any data with that because they are not an existing user in this case.
Creating a New Post (From 26m: 13s)
Again we will start by creating a new page here and name it as “upload page”. We add a text box on the top of the page for adding heading and roughly center it horizontally. The process of creating a new post is similar to the process of registering the account page and this because the both pages require a bunch of input fields to be added on the page.
We will start by adding a picture uploader element here and we will add a text element as well. Below this we will also add another multi-line element just to allow the detailed caption under the post created by user. Now we will add a button with the text as “upload here” and add a condition for this button to only appear when the image and the caption inputs are full and the post is ready to be uploaded.
From 28m: 45s
Now we will a workflow and start by selecting from a data tab and we will actually want to be creating a new thing because the post does not exit at this point. The workflow will be updated for the post and the post content as two different elements as we split the both in the previous section.
Creating a Home Feed (From 30m: 45s)
We will head over to our bubble editor again and go to the home page that we have already created. From here we will resize the page as done previously and update the style of background and then we will start by adding in a repeating group element. We can add in the content we would like to display.
First of all we are going to need to configure the type of content that our repeating group will display and in this case it is going to be displaying posts.
After configuring the type of content we will then need to search for a data source for this repeating group and that will allow the repeating group to identify which particular post from which users it will be displaying. So we will add appearance that only show the posts of users.
From 32m: 38s
From here we will add rows and columns to the repeating group as we added 2 rows and 1 column in the command. This will also show an infinite scrolling capability so essentially it will load all the content within the Instagram product and display a long list of post by any user.
We will start by adding the image of the user who posted the image post and because this image is in the repeating group we will rename this profile image and we can choose to display dynamic content. We will also add the icons below the image posted as the first one would be the heart icon and second would be the comment icon.
We will also add a heading box above the page and name it as tittle and add the text as “Instagram” with the similar text style as Instagram branding. We will also add icons on both of the sides of heading box as the plus icon and the gear icon.
From 36m: 09s
Once we have added these icons we will add a condition to only display when a current user is logged in because we do not want a user clicking through to their settings page if they do not have any account registered. Then we will head over to our upload icon and create the condition that when a current user is not logged in, this icon is not visible.
However if the user is logged in then we will add a workflow to redirect the users to particulate pages.
