Building An Instagram Clone With No-Code Using Bubble

and if i want to like that i'll click the heart icon it'll add a like if i want to unlike it it'll remove that like [Music] hello my name is lachlan kirkwood and today i'll be teaching you how to build a instagram app entirely out of no code using bubble bubble's one of my favorite no code tools as it allows you to build a custom database which can help you build truly dynamic software experiences for those of you who don't know me i've spent the past year working with the bubble team to create their how to blog series this series took a list of the top products out there on the market such as airbnb uber and spotify and broke down the step-by-step process to recreating them with no code within this tutorial i'll be covering how you can build your own version of instagram without touching a single line of code this will include features like creating user accounts creating a home page to display posts being able to upload posts displaying dynamic data on user profiles and being able to like and comment on posts so grab your bubble editor and let's dive right into it so the first feature we're going to be working on isn't actually a core feature at all what we're going to do is take the time to first go through and set up the structure of our database because the database will power the rest of the application and to avoid any roadblocks along the way we'll take the time to set up the necessary data types and fields to get this going so if we head over into our data tab here you'll see that bubble already comes pre-built with a user data type now i'll be working off a notion dock that i created with all of my different lists of data types and fields that i'll need within them but i'll also be explaining them along the way so you can add them in along at the same time as me so we'll start by creating the rest of the data types we need like the post the post content and the comment in order to be able to link the rest of the data fields together within them so over in our bubble editor here we're going to create the post data type the post content data type and i will explain in a moment why i have separated those and also the comment data type now the reason i've separated the post and the post content data type as you'll be able to see in my notion dock here is because with bubble it will immediately load all of the content within that particular data type so let's say you're fetching a post within your home page fee to display you'll obviously want it to display a list of the likes and comments which are quite lightweight fields to load as they 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's necessary because if we start to load it when it's not needed that'll quickly slow down the actual page itself so that's why i'll be splitting the post content separately now what i'll be splitting apart is the actual image within the post itself and also the caption just because captions can sometimes be quite long and when you've got a lot of text that can certainly add up in terms of how much content it needs to load so now that we've got our data types added into our level editor we'll go ahead and add in the data fields within them and we'll start with our user data type here so we'll start by adding in the name the bio and the handle which will be quite straightforward as these are just basic text fields so i'll start with the user's name the bio and also the username field now you could also call that a handle if you'd like and then with the remaining data fields these are either lists or a image in this case so we will also store a user's profile photo which instead of a text field will be a image field and then also a list of users that they are following now as i mentioned this will be a list of users and there'll be multiple users that someone can follow so i'll be selecting that this is my multiple list with multiple entries and then a list of their followers now this will be everyone who is following them so again it'll be user with multiple entries and by connecting this as a list of users it allows us to pull the data fields from other users on the platform next we'll be adding the data fields under the post type and this will be the likes that a post has the comments that a post has and also linking to our additional post content data type so we'll start by adding in the likes now contrary to belief the likes that i'll be using will not be using a number count in fact i will be linking likes to a user and the reason i do this is because you can also store a list of all of the users who have liked a post and then you can perform a count of that number to display on your home page so it's just as effective and it'll give you a great ground source of truth so in this instance it will also be a list of multiple entries because multiple users can like one post we'll then do the same for the comments on a post so i'll just say that this is a post comments data field and this will actually be linked to our comment data type and again there can be multiple comments on a single post so i'll be selecting that this is a list of multiple entries and finally we'll then be linking the actual content of the post to our post content data type so i'll call this post content and link this to the post content data type and there will only be one post content so one caption per post so we don't need to select this as a list of multiple entries from here we'll go and build out our post content data fields and the fields we'll be adding here is of course the caption and the image of the post so the caption will be a simple text input and then the post image will be a image now if you wanted to support uh post types like carousels you could select this as a list of multiple entries just for the sake of my mvp i'm only going to be storing one particular photo per post and also i should note that if you wanted to be able to support things like video posts you would need to store that as a file type not an image type but again i'm going to just be keeping things as simple as possible for the sake of this tutorial so i'll create that data field and then we can head over to our comment data type and then take a look through the fields we'll be adding so we'll need to add the content of a comment so the actual text that someone adds and then also link that to a post so that way we can reference that particular comment to a particular post so we'll start by adding the content as i mentioned is a text field and then the comment post which will link to a single post not multiple posts and now that i've finished configuring my database i can go through and just tick off that i've added all these data types and fields and from here you can then go on and start building out the main features of your actual application itself the first feature we'll be creating here on my list is the ability to register new user accounts there's two ways you can do this now the first is that bubble comes with a handy pre-built reusable element that you can use now this is a pop-up element that you can call at any given time and i'll click through and just show you what that looks like so it's a register pop-up that contains an email a password and a password confirmation field and what i love about this reusable element is that it comes with all the workflows you'd need built into that so it already comes with a forgotten password option so if someone's forgotten their password they can resend a link through an email there's plenty of different workflows as well to go ahead and register a user or log in an existing user so you can call upon that which we will do throughout our application but let's say users downloaded the app and they want to land on a page once they open the application not just link to a pop-up to begin with you can also go ahead and add a new page and we'll call this register now the first thing i'll do is just quickly update the configurations of this page to look roughly like a mobile device if you're building for a specific mobile dimensions i'd recommend adding those in and i also just like while i'm building to just change the background to a light gray color so i can see any white elements that i add to the page and just on here i'm going to add some text just says register account change the style of this i'm just going to choose some of bubbles default styles here but of course you can add your own i'll just start by adding a h2 i'll make that dark and i'm just going to roughly move that to the center there then from here what i'll do is i'll start adding in some input fields on the page so i'll grab that there and this input field i will rename to name and i'll add a text element above this to just list that that is a name input field and i can duplicate that and i might also want someone's username when they register update the name of this input to username and then you'll also need an email and password as well so i'll take this to email and change the name of this input field to be email and with email and password input fields you'll also need to update the content format that they are so by default these input fields are text inputs but to register them within our database properly i'll need to update this to be an email content format and then i'll duplicate that again and this will be our password and i'll be updating the content format of this to be a password and i will just change the name of this to be input password and then let's say a user is ready to register their account after they've added in all that information i can add a button i will just change the color of this to just be white and then i'll also just add a border to that let's make it black and i'll also just update the color of the font to be a darker color as well and i will have this say create account and from here what we want to do is we will want to create our first workflow so we'll select that over in our workflow editor we're going to select from our account menu and we're going to want to sign the user up what you'll want to do first is match the email data fields with the input values from the input fields that we've added onto our page so because i've given them the right naming conventions you can see that our email input is there we'll select to add the emails value to the emails value on our actual page as well and the same with our password there too and what you can also do is add any additional fields that you will want to store within a user's account after they've just created it and in the case of this we'll want to register their name field that they've added and also their username that they've added and while you're here you can also select to send the user a confirmation email once they've registered an account if you'd like but once a user has registered an account you would want to send them to the home page they can start to use the application so we'll go ahead and create a new page and we'll call this home and i won't be doing anything on the page right now but what we'll do is we'll head back into our register page go over into our workflow and then we'll add another step onto this workflow and what we'll be doing is we're choosing from a navigation event we'll be selecting to redirect the user to a page and the destination page will be the home page and within this you don't need to send any data through this workflow yet i'll explain under what circumstances you might want to later on but from this point you'll have a nice user experience where the user creates an account and then once they've signed up it will redirect them to the home page then back in my notion doc i can tick off that i have built out a function to register accounts there's also an option to create a login screen for users what i would recommend is using bubbles reusable element that i showed you before and i will be using that later on within this tutorial but i just wanted to show you this option as a simple guide to start with when you're registering user accounts once we've created a function to register a user's account what we're going to want to build out is the settings page to allow them to update their profile information or even add any additional data that they'd like such as a profile photo or their bio for instance because we didn't register that when we created that user's account so let's head over to our bubble editor and get started what we'll need to do is create a new page within our editor and we'll call this a settings page and once again i'll just be updating the configurations of this page to be quite rough extend that out a little bit and what i'll do is i'll add some text at the top of the page again i'll just call this settings i'll also just use the h2 format again roughly center that horizontally and what we want to be doing then is adding these pretty much the same input fields that we did from our registration page over onto our settings page so i could even go over and duplicate some of those if i wanted so let's say i want the name and the username i'll then just go back to our settings page paste those in and what i want to do under that is just add some more text i'll make this mention that's the bio and instead of using just a normal input field for our bio i'm going to be using a multi-line input field now what this does is it just allows a user to add a text with multiple lines in it instead of just being a single line like our normal input field and you can collapse this and make it as small as you want it will expand once a user adds in more lines into that and then underneath that i'm going to be adding just some more text and this will be for the user's photo i'll grab a image uploader element add that there and i will also need to update the naming conventions of these so i'll call this the bio the picture uploader i will just call profile photo and then once again i'll be adding a button element to the bottom of this only this time i'll be calling the button update now what we'll want to do is create a new workflow when this update button is selected only this time we won't be creating a new user account we'll be making changes to an existing user account so head over to our data tab here and select to make changes to a thing and the thing we want to change is the current user who is logged in and wanting to update their profile settings then what we'll do is select to update all of the input fields within our page and match them with the data fields in our database so i'll start by the name i'll update this with the user's name input field its value i'll do the same for the username and the profile bio the profile photo then what we can do once we've updated the user's profile data is we can either redirect them 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 did want to go down the route of displaying a success message we will just add a text element back on our page underneath the update button and then we can say profile updated and you could make this copy green or you could display it in a different text setting in this case again i'm just going to choose from one of the default styles that bubble has and then what we'll want to do is uncheck that this element is visible on page load because we don't want it to display immediately we'll only want it to display after that button is selected and then we'll go back into our workflow add another step into this workflow here select from our element actions and choose to animate an element not show it we're going to want to animate it because we're only going to want it to temporarily show and the element we'll want to animate is the text that says profile updated and we can choose to fade in fade out this element it'll give you a preview of what that looks like and then you can also define a custom duration for this so in this case i will just make it 500 milliseconds so when a user now selects to update their profile this will display for 500 milliseconds and then it will fade out there now after adding the success message there is a few other things we'll want to include on our settings page and one of them is to display the user's profile content once it's already been added so let's say a user has taken the time to go through and update all of their settings here we'll want to automatically display those inputs just because we have them stored in our database and if a user hits update and those fields empty it will then reset those fields in our database and make those blank which we don't want so we'll select on our input fields here and we'll add the initial content and we can start displaying dynamic data from the user's existing profile information so in this case in our naming field we'll want to display the current user's name our username field will want to display the current user's username and then vice versa on the rest of our input fields here the other feature we'll be adding to this page is the ability to recognize when a username is taken and this is something you can also add onto your registration page if you'd like but let's say a user decides to change their username in this instance and that username is already taken by another user what we'll want to do is display a error message that says that that username isn't available and it's much the same as displaying our text element that we did within our workflow that updated the profile information so what we'll do again is just add another text element for the sake of this tutorial i'm just going to duplicate this one here and i'm just going to say username taken and we'll want to unselect that this element is visible on the page load because again it won't need to display unless there is the scenario where a username is already taken and then what we'll need to do is create a condition for this element to only display when that error is ran so conditions are a powerful tool in bubble that allow you to essentially change the way certain elements or functions behave based on behavior within the app so if we head over to our conditions we will define a new one and we're going to need to start by doing a search for users within our database and we'll need to search for users where their username equals the same value as our input username field and then what we'll need to do is go over and count when this instance occurs more than once because we'll only want one person to have one username so we'll go when the count is greater than zero because anything greater than zero is obviously one and we'll also need to identify when the input username field has text within it so in this case when the input username's value is not empty and the reason we'll do that is because this top part will only trigger after someone has added in a username into that field once we've added that condition we can then go and select that this input is visible and we'll tick that that is the instance and what we can then do on our settings page is also add a condition to our update button element because technically at the moment a user can still update their profile even when that error message shows so what we'll want to do is make this button unfunctional if the username is taken so we'll go ahead and add a new condition and it'll be the exact same as the condition we added for our username input field so we'll start again by doing a search for users where the username equals the same value as our input user we will select from the count when the account is greater than zero and the input fields value is not empty will make this element not clickable so now a user not only sees that that username is taken but can't perform this action to update their profile if that username is taken so that just allows someone with an existing username to reserve that unique username we'll also need to add one last condition to this button because there'll be a circumstance where the current user actually has the username which means that one user is allowed to have that username and of course because we've made this element not clickable when a username already exists we'll need to create a circumstance that understands when the user is the actual person who owns that username so we'll go ahead and add another condition that recognizes when the input usernames value is the same value as our current user's username and when this condition is true we'll select that this element isn't clickable and we won't be ticking that box so now when a user selects a username that's already taken and it's not their own this element won't be clickable and if the username is taken because it is the user's own username this element will be clickable so in this case they'll be able to update their profile now this condition will also be true for our text that displays that a username is taken so we'll only want to display this when the username is already taken but it's not a user's own username so again we'll be adding the same condition is what we just added so we'll be looking for the input fields of the username it's value and if it is the current user's username this text will not be visible now over in my database i have gone ahead and created a new entry with a an existing username just to show you how this works on our settings page so if a user adds in their name that'll be fine but when they add in a username so in this case test user one and they select a way that is the user who i've already created and as you can see that username is taken so that error message has displayed if i then go and change that to test user 2 that will disappear because that username is available and after creating that condition the very last thing we'll do to this page is just create a redirect so if someone is to send someone who isn't a user of the instagram platform a link to the settings page they're going to get to the settings page and just see a whole bunch of blank fields and that's just not a great user experience so what we'll do is we'll head over to our workflow editor and we're going to create a workflow that registers when a page is loaded and we're going to add a condition to this workflow that registers when the current user isn't logged in and when they're not logged in what we're going to want to do is redirect them back to our home page and of course we won't be sending any data with that because they're not an existing user in this case so there we have it that's how we can edit our settings page with quite a few features that you'll need within your instagram product there so i'll tick those off my list as they are now complete now that we've created the features to register user account and update their settings page we can start to build out the core features of our instagram product and we'll start by the function that allows a user to create a new post so once again head over into our bubble editor and we'll start by creating a new page here and we will call this the upload page and as always i'll just add a heading onto this page which just says upload make that larger and roughly center that in the middle so you'll find that the process of creating a new post is similar to the function we used when we were registering a user account and the reason i say that is because like registering user account you'll just be working with a bunch of input fields so i'll start by adding in a picture uploader element here and i will then add a text element here which allows you to add in a caption and then below this i will also just add in another multi-line input field just to allow them to add a caption now this is slightly different to the user experience of instagram's current upload process so they actually break this into two pages which you can definitely do in their instance what they have is a dedicated page to uploading the image first and then it sends you to another page to add a caption now you can easily create that experience by creating a navigation feature within your workflow after that field is no longer empty for the sake of our mvp though i will just be showing you how to do it on one page so i will create a button that says upload here the first thing we'll need to do is add a condition so that this button is only clickable when both of these inputs are full because we don't want someone to be able to post a photo without a caption and also we don't want someone to post caption without a photo to go with it so what we'll need to do is to find a new condition that registers when the multi-line input value is empty or the picture uploader's value is empty so if either or of those is empty we won't want this element to be clickable so we'll select this element isn't clickable and then in the case that someone does want to upload a photo and they've added in both fields we'll go ahead and create a new workflow over in our workflow editor here we'll start by selecting from our data tab and we'll actually want to be creating a new thing because the post doesn't exist at this point in time now if you do recall we have also split our post and our post content into two different data types so first within our workflow we'll be creating the post content which will match the input field for a post image and we'll select our picture uploaders value and then also the caption will select the multi-line inputs value and then that will create the content of the post itself then we'll need to then link this to an actual post so we'll then go ahead and create a new thing we'll create a post and we'll link the post content to the result of step one in our process so now it has identified that that is the content within this post now once a user has uploaded a post we'll want to then do one last thing in our workflow and that is send them either to their profile page or the home page i'm going to follow the same ux as instagram itself and send them to the home page in this case so i'll just create a navigation event that redirects the user to our home page so back on our page you'll identify that a user adds in both of the input fields if the value of one of those is empty they won't be able to select the upload button if both of those are full they'll select that it'll create the content of the post and then link it to an actual post and then it'll redirect that user to the home page just to create that nice user experience and that is the process to create a function that allows our users to create new posts within our instagram platform after creating posts in our platform we'll move forward to the next feature which is the function to create the actual home page and the feed that you see on your instagram product when you use it every day so we'll head over into our bubble editor again and go over to a home page that we've already created from here i'm going to do the same as i always do i'm just going to resize this page update the style of background and then i'm going to start by adding in a repeating group element now repeating groups are a powerful element in bubble that allows you to display a list of dynamic content and what i mean by that in the instance for instagram is that similar to a feed within a social network you can add in the content you would like to display so i'll be showing you in a moment but let's say you want to show just one photo within a grid but you want to show multiple photos from multiple different users that use your platform a repeating group will allow you to do that and you can even build functional algorithms within these to display only certain images from certain users so first of all we're going to need to configure the type of content our repeating group will display and in this case it's 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 posts from which users it will be displaying so what we'll need to do is do a search for all of the posts within our instagram product and we'll search by posts that are created by is in the current users list of following now what this will do is it will only display posts from users that the current user is following from here we'll then update the rows within our repeating group i'm just going to select that i want to display two rows in this instance now repeating groups allow you to scroll through the actual list so even though it does only display two options at the moment this will have a infinite scrolling capability so essentially it will load all the content within your instagram product and display a long list of posts for a particular user the reason i want to make these larger is so i have more room to work with when i'm displaying the actual post itself and then i'll go ahead and i'll start to add in the elements from the post that i want to display in our feed i'll start by adding the image from the user who's posted this post itself because this image is sitting within the repeating group i'll rename this profile image and i can choose to display dynamic content and what i want to choose is the current cells post so the post that this is within i want to show the creator's profile photo i'll then move that over to the side and then i'll grab a text element and as you've probably guessed i'll be displaying the current sales post creators name or username in this case i will add their name not their handle and then from here i'll add in the actual post itself so i'll add a larger image i'll center that in the middle of our post and the dynamic data i'll be displaying is the current cells post post content post image then below that what i'll do is i'll head over to our icon menu here and i'll add in two icons the first one will be a heart icon to allow users to click that to like a post which we'll cover soon and i'll just duplicate that and the next one will be a comment icon right next to it there the last few things i'll be adding to my home page in this initial instance is just a heading at the top and i am going to create a custom style in this instance i'm going to call it title and then i'll change the style just to use a font that looks similar to instagram's branding i'll make this a bit larger and then i'll center it as well and i'll head back to our home page and update that to say instagram i will spread that out and i will center that horizontally and then next to this text i will add two additional icons the next one will be a plus icon and then on the other side i will add a gear icon and once i've added these icons i'm just going to add a condition to each of these to only display when a current user is logged in because we don't want a user clicking through to their settings page if they don't have an account registered so we'll create a new condition that registers when the current user isn't logged in this element is visible and when this condition is met i will make sure that this element isn't visible and then i'll head over to our upload icon and i'll create the same condition there so when the current user isn't logged in this icon is not visible however if the current user is logged in i'm going to need to create a workflow on both of these icons to redirect users to the particular pages so our upload page for instance i will create a new navigation workflow to go to page the page i will send them to is the upload page and again i won't be needing to send any data through in this instance and then over on our settings cog icon i will create another workflow navigation i'll select go to page and i will select the settings page here and as you can see our home page is starting to come together nicely i'll head back into my notion dock and tick off that i've created the home page with a repeating group in it and conditions on the upload icon to not register if a user isn't logged in and that is all i have time for in this tutorial today if you wanted to check out the rest of the course i'd recommend clicking the link in the description below and purchasing the full course throughout this i'll be walking you through the step-by-step instructions to complete the rest of our build you can also get access to a suite of bubble tutorials where you'll learn how to rebuild other popular products if you'd like to also get started learning how to build some other popular products i'll include some suggested videos in a moment that you can also check out thanks again for tuning in and be sure to hit that subscribe button if you'd like to see any more helpful tutorials like this to help you on your bubble journey [Music] you

Channel: Building With Bubble

Views: 15,398

Keywords: no-code, no code, Bubble, Bubble.io, Webflow, software development, software engineering, visual programming, makerpad, airtable, glide, adalo, Instagram product development

Id: nLAS0g48_T8

Length: 38min 23sec (2303 seconds)

Published: Thu Jan 21 2021