How To Create An App Like Instagram - Easy, Fast, Anyone Can Do It - No Coding Required

hello world how is it going out there are you feeling bored at home already are you thinking of maybe learning some new skills so you came to the right place because in this video i will show you how you can create instagram without coding anything sounds crazy it is crazy but it's possible check this out we'll build this application today where you can create a profile log in follow other users post photos get notifications when they post something new and of course edit your profile and add a profile picture it took me only 15 minutes to build this application but this video is a bit longer because i drink a lot of coffee but also because i'm explaining you concepts that are important to know for such kind of applications and if you don't mind hit the like button so that youtube understands that this video is interesting and it will help my channel and also pump up the video to the top of the search results so it can be found by other people that have the same questions as you have so without further ado let's check it out hey guys today we'll build an app like instagram stick around till the end because i will share with you some tips and tricks on how you can save money with a dollar towards the end of the video but first get your coffee and let's get started this is the app structure that we will create today let me show you all the screens that were built and then we start from the scratch by building a completely new application and creating those screens step by step so you have the sign up and login screens which are created by adalo automatically which is really awesome which means that adalo has a full support for users which comes in very very handy and then you see all the other screens here on this side that we have created ourselves for example the home screen where you can see your feed and see your own posts but also posts from people that you're following a screen for exploring new user content and following new users then a screen for looking at the user's profile and to see what other stuff they have posted and to follow and unfollow them a screen to see your own profile and to edit it and last but not least maybe most important a screen to post a new photo okay let's go ahead and create a new application from the scratch so you see how that works out we create a new app native mobile app because that's what we want to create and the blank one no presets give it a name let's call it instagram okay our dollar is hard at work creating this application and the first thing we get is a sign up and a login screen and even a bonus a home screen let me show you what that means so a sign up screen if you click on this one here you see it is classified as a welcome screen and the welcome screen is something special it is the first screen that user can see without being logged in so that's important because that's where they land you can choose another screen to be that home screen but this one makes sense for us the login screen on the other hand is classified as a normal screen which doesn't mean anything special other than well it's there and you can get to it only when you link to it and there is another screen which is the home screen which has this home icon on top and is classified as a home screen which means that this is the first screen the user can see after logging in okay having said that this is actually pretty important to know because when you create your own screens you might want to land on a different one and you can just go ahead and pick your own home screen if you like so the first thing we want to really do here to create is the data structure and the reason for that is adalu is pretty smart later on when we have the data structure to pre-populate a lot of things in our forms and in the drop-downs and so on so in order to take advantage of that we will go ahead and create the data structure for users and for posts because that's what we want to create today and let's dive right in okay so the database that adalo keeps is here in this menu and it is hosting collections collections are basically tables with data inside so let's see users is already there it comes by default and a user has an email address a password that's pretty handy a username which is also cool for us and a full name great we're gonna add here a profile picture because we want that picture to appear later on in the user profile okay i'm closing this and i'm creating a new collection for posts so posts are the ones that we want to see in the stream they have obviously an image some kind of text description and they belong to a user so let's create that all right adalo automatically creates this name field here which we don't need really so i will just keep it around but not make use of it i will now create the photo field which is an image and we create the description field which is a text the description field is there for the user to put some kind of text next to the image and we now have to create something more special which is the relation to the user who posted that so we have to know which user did that so that we later on can filter things out to belong to us or to some other people so here a dollar has a feature it's called relationships and we want to relate this post to another user and adalo says cool but how are those two related so let's go through the options and see what we have to choose here so imagine here a user can have multiple posts sounds true a post belongs to one user also true and this is actually the option we need but let's go through the other ones to understand the difference a user can only have one post no that's wrong next one a post can have multiple users nah that's also wrong first one it is it is important to choose the right option because a dollar then understands how your data is related and it will then give you very good suggestions in the dropdowns to help you out all right user it's a good name let's stick to that okay uh we forgot two things that are actually pretty important we have to store somewhere if you're following a user and if somebody's following you so those two fields will be created in the user's collection and this is also a relation so a user is related to another user in some kind of way well in the way of following or being followed so what we're doing now is we're creating another relation here adalo immediately wants to know how those two are related with each other so let's see let's say one of those words is called follower so a follower can have multiple other users that it's following yeah that's true and belongs to one follower no that's not really true so it's not the right one a follower can only have one user well that's also wrong so a follower can have multiple users that is true and the user can have multiple followers that is also true so well it's a many-to-many relation kind of expected because of course you can follow many users and many users can follow other users and you so it's a many-to-many relation this is what we choose here and we go ahead and change the name here of the field to follow us so those are the people that follow you and we create exactly the same thing again for following those are the users i'm following okay cool now we have the full data set set up and we can go ahead and create the visuals but first how can humanity live without coffee on the home screen we want to show a list of posts they will have a photo and they will have a text so let's see what dalo has to offer offers multiple components that can display lists and you can see there is a list like that looks more like contacts phone contacts another one for images card lists horizontal list even by the way this is new and a custom list where you can go pretty nuts and create your custom implementation of it but let's take the card list today we place it here actually let's put it on top we place it here on the home screen and we change it to show only one column and we tell it because we already created the collection we tell it what to display and we want it to display posts okay that's pretty cool but we don't want it to display all the posts we want to display only posts from the users i'm following wow that was easy right of course we don't follow anyone yet but you will see the benefit very soon let's also make sure that the newest posts are on top newest to oldest by default the list does not update itself when a new post is coming in for that you will need to switch tabs that's not so cool so we want to enable the auto refresh feature just make sure if you have multiple lists on the page to only enable this for one of them otherwise adalo says there might be a performance problem next thing we want to do is to tell the list what to display exactly the media is already chosen correctly automatically by adalo which is what i mentioned before once it knows what data it is it can do a lot of magic for you so it is the current post photo perfect we will change the title to contain the post description we will turn off the subtitle and we will put the username here in the body and i want to use add username it's basically like twitter or something so at the user who posted this thing username and by the way even if you have a turn off title feature here it doesn't work you cannot turn off the title okay the next thing we want to do is we want to add a menu on the bottom so you can switch between screens again adalo has something for that it's in navigation and it's called tab bar just drag and drop it in here and we have a tab bar now we go ahead and configure it the first tab is home that's fine we will keep that the second tab is called search we will rename it to explore the idea is to explore other people's content and to follow them and the third type should be the profile tab and there is already one in this case it's the fourth one so what we do is we simply turn off this one and turn off the last one and we are perfectly set up although i do want to change the title of this tab and i want to make it say who i am who is the logged in user's username which is perfectly possible with this magic text here and it wouldn't say just profile instead it would say my username which also shows me that i'm logged in with that user which is pretty handy the next thing we want to add to the app is the button that allows you to post a new photo that should be a floating button so let's see what adalo has to offer we scroll down to the buttons list and we find something called an action button we drag it in and it's already the right color we make sure it's centered and we style it by choosing a photo icon we can't link it to anything yet because we don't have another screen but we'll do it now so the next screen we create will be the screen to post a new photo so we go over to screens and we say add the screen and we want to add a form screen i mean we could build this ourselves but adalo will do some magic and it's a bit easier so click on that and give it the name of post photo there it is you can see that i have created this application a few times okay post photo we click on this form and then we tell adalo again what kind of stuff should be created when this form is submitted well opposed and boom immediately it will populate the fields that we need although we don't need the name field so we can go here and just delete it and also i want description field to be a multi-line field and maybe i want to change the submit button to say just post and that's it this is how easy it is to create a form that posts a photo one more thing you should know what kind of magic adalu did is it created here some actions on the post button which well creates a new post so it's kind of happening automatically but also it sends us back to the previous screen where we came from which is great shall we test it of course but first all right remember that we don't have a user yet so we will first need to create the user and then we can post a photo sign up this is the first screen if you remember this is a welcome screen so there you go [Music] and i forgot something so we don't really want the user to put the full name here instead we want them to put a username because that's what we care about in the whole app so we just go over here click on this form and we change the fields we remove the full name and we add the username and it's fine it's required also perfect so let's do this thing again oh i'm lucky pre-populated so i will choose here user one as my nickname just so that it's easier to recognize who is logged in sign up all right cool so of course there is nothing to see so let's post a photo oh i didn't link this button yay let's go here and do that add an action and link it to post photo screen and you can see that there is an error now going from this screen to that one so that we can go from one to the other let's try this again this time i'm already logged in all right choose a photo of course on your phone you can shoot that photo with your camera and you don't see anything which is on purpose because remember you see only stuff that is being posted by some other users but you're not following anyone yet let's change this list to display all posts and not just the post of the users i'm following for a few minutes to test this out click on the list and select all posts filter all posts so let's see now there you go you have the photo you have the text we're good next up let's create the explore screen where we can find content from other users and then create the user profile screen where we can click the buttons to follow them okay so for that i create a new screen and screen i will take a blank screen and create the screen and i want to arrange the screen to be above this one because it seems logical to me so now let's add the elements that we need first we need the bar on top it's called the amp bar but hey let's copy it from here copy command c and then click on the screen here command v and just change the title say let's call it explorer and also we have to give the whole screen the same name because later on we will have to choose it from dropdowns and it's just easier to find that way and let's say that we do not want users to log out from that screen so we turn this icon off completely next we want to add some text on the top of the screen to tell the user what is the purpose of that screen that we're building which is to show content of other users and to allow exploration we drag it in here we zoom in a bit here by the way i'm clicking ctrl and then scrolling with my mouse this zooms in and out and i want this text to be centered and i want it to say explore new content and follow users okay something like that and what we want to do is we want to also show a list of posts but in this case so i'm copying this one command c command v but in this case it should be not showing all the posts but instead only posts do not belong to yourself because you don't want to explore your own stuff because that is easy right you can do that anyway later on in your profile but you want to just see posts from other users so we drag this in and then we make sure that we filter so instead of saying all posts we're saying all posts but we want to filter that the user's email address from that post is not equal to my user address to the logged in user's email address so this way we will just see posts from other people we'll test that later on and the last thing to add here is the menu on the bottom so we can just copy it here and click into the screen paste it and we now want to make sure that the second tab here is illuminated so we go here and say illuminate this one and we also want to make sure that the first tab is linked to go to the home screen right because it's the home icon so we just say link to home and here on the bottom we say the second tab should link to the explorer screen all right let's check it out preview okay we see our own stuff we go to explore and we don't see anything that's actually good because we shouldn't see our own stuff anyway and here we're pretty cool we can post a photo we can see the explorer so we should maybe create a second user so that we can play around and just see how that plays together when we follow and unfollow somebody i think it's best we go to preview and we log out and we create another user called user2 user two will see user ones post because without not filtering anything and in explore it should also appear very good we're getting there the next screen we want to create is the user profile screen where you can see other posts from that same user and you can see profile picture and you can follow and unfollow that specific user you get to that screen by clicking on his posts okay but this time we copy the explore screen so we don't have to create each element from the scratch click on the explorer title command c command v and there you go let's change the title of that screen to say user profile click done all right we will not need the title here and we also well we want to show this in a two column view to explore new content of that user and we just move this down a little bit to create some space on the top for the profile picture and the follow buttons and we will also not need this menu on the bottom okay next thing we create the profile picture just drag in an image place it on the top here and well let's style it first of all we want the rounding to be completely circle circular and we choose 120 times 120 pixels and with shift down and right on the keyboard you can jump the same amount of pixels down and to the right so it's it has a bit of space from the top and from the left in order to tell adalo which picture to show and also which posts to display we need to first create a link to that screen whenever we click on on a photo on from the stream because then it will give a reference to that new screen of that post and we can then take from that post the user and display that user's profile so let's do that we we go to the previous two screens and we created an action a link a click action so here add action link to user profile and you see there is now a new line created and because we did that you will see in a second and we do the same here by the way link to user profile because we did that now adalo knows which reference it is so i can now go ahead here and say well i want to show from the current post it was clicked on the user's profile picture so that's pretty cool and i love this feature and we also have to say what to show when the picture is missing because maybe a user didn't put a profile picture yet well in that case we choose a placeholder and i have prepared one here just some image that is acting like a placeholder to make it look good even if a picture is missing okay so that's cool we can do the same with the posts we can say well we want the posts to be displayed from the the current clicked post users post so this will display only all the posts from that person that i clicked on and we don't really need this filter anymore here because well we want to show all the posts from that user that's fine okay now we can move that up a bit okay the next thing is to create the follow and unfollow buttons and this is super exciting so we create two buttons one button will be for following and the other one for unfollowing follow this user okay and now we duplicate this button command c command v and we snap it here on the bottom of this one the reason for that is because when the button on top is hidden then the button on the bottom will take its place and there will be no wasted white space because adala will take care of that we will make sure that this looks good in a second so here we call it unfollow and we make it tiny bit bigger to show the full text and also we go ahead and change the color to something more red and maybe we want to change the icon to delete so it's kind of it's a remove icon okay and now let's think about the logic for those buttons so when i click on the follow button i want to follow that user that i'm looking on right now and by the way i forgot to put the title here properly let's do that very quickly add user name current posts users username again this whole screen shows the user that i clicked on right okay so the follow button well if i click on it i want to add to the database into let me show you which field that is into the following into my follower list i want to add this this user so follow means add an action update my profile which is the login user and add to the following list so i'm following him and the current post user okay pretty cool but don't forget he also wants to know who is following him so we need to also update his profile and to add me to his follower list so let's do that as well also when the follow button is clicked so updates not me this time but him and add myself to his followers list all right and i'll show you in a minute how that looks like in the database now let's do the exact opposite on the unfollow button add action update myself and remove this time remove him from my following list and now let's also remove me from his list so we update him and now i'm not anymore his follower okay that's cool before we test this out i want to change this list again to show only posts from people that we are really following so that you can see that this has any effect so here instead of all posts we choose again only posts from people i'm following alright now let's test this thing out because we already built a lot of stuff let's see if that works out don't forget the coffee okay first of all it's actually good that i don't see any posts because i'm not following anyone yet so let's explore some content okay cool i see user 1 i'm user 2 by the way cool i can click on his profile and i can see that i can follow and unfollow this person of course we shouldn't see both buttons at the same time we will take care of that but let's try that follow okay and somehow well oops i don't have a button to go back so well hard to prove that this worked but let's add the button here left icon menu let's say back here and the action is to go back it's that easy but let's see in the database right we we should have created the right records so you see one user is following the other and the other one has a follower that's really cool so if i was actually user two right so if i click on this one i can see the record and i can see that i'm following user one that's cool and if i click on the other record here then user one has a follower which is user two perfect this should work out nicely now let's preview the app again and see how my feed looks like alright cool now i see the posts from this user if i click on it and i unfollow this user and i go back to my feed then the post disappears yeah okay that's cool of course um there is a tiny issue when i post myself let's try this out and show you what i mean post and i don't see anything of course not because i'm not following myself but we will actually follow ourselves well only in the database so that we see our own stuff as well and it's a nice elegant trick to make this happen we go to the home screen and whenever the whole screen is loaded then we make sure to follow ourselves automatically every time the screen is loaded just to be sure the data is there so what we do is we click on the home screen on top here we go to the actions and we say add another action update myself and add myself to my own follow a following list and that will immediately that will immediately show my own stuff in my own feed which kind of makes sense so let's see preview okay that is great i can finally see my own posts that is cool i can also follow this user here and now i should see two posts in my feed let's go to home and check it out there you go okay the logic is there now the visuals are not optimal so let's fix that first of all we have to tell each button when to show up so that they are not visible at the same time okay so we click on the follow button and the feature is a bit hidden it's here change visibility and it's not always visible it's only sometimes usable well when is it visible it's visible if i'm not already following that user so let's try this out so how does adalo want us to do this well we have to look into our own following list and we have to say does not contain well my follower list does not contain this guy which is the current post user and then well show this button okay sounds logical um let's do the opposite on the unfollow button change visibility sometimes well and when when my following does contain this user when my following list contains that other guy then i can unfollow cool let's test it okay user1 ah nice unfollow photo okay cool well the buttons are not aligned super nicely here with the profile picture we can make this happen but as you can see there is no jumping around so the unfollow button is exactly on the same spot as the follow button and the reason is that we have snapped them together so adalo takes care to flip them so what we do here is just make sure that the follow button is in the right place and the unfollow button will just be placed in that same space when the follow button disappears so it should look fine but there is one tiny bug still because we don't want to be able to unfollow ourselves right the whole point is we following ourselves forever because otherwise we won't see our posts so let's fix that so we have these buttons here but we don't want to show them whenever we look at our own profile we want to show it only when we look on any other profile so we already know how to do this but in order to make this super easy and not adding the same logic to both buttons we we select both of them and create a group and then we put that show hide logic on the whole group makes it easier so well it's only visible when the current post user email let's say is not equal to my email address so well that should do the trick so let's see user two oh interesting yeah it uh it stretches the image because it wants to make use of the whole space but you can see the buttons are gone and instead of those buttons we will add another button here which is an edit my profile button which will show up when i do watch my own profile but that will come up when we create the next screen and the next screen is the edit profile screen okay so we create a new screen here add screen and it's another form because we're editing ourselves okay nice and we are telling adalo that it's a user that we're editing here and what fields do we want to edit well not the email not the password but let's edit the full name that's uh it's not required by the way because it wasn't also required on the on the sign up it's just there so you can set it at all and specifically the profile picture because this is the first time you can actually set this and it's also not required but you can add it and it's not a login form so we have to tell adalo that so here it's not really about logging in it's about updating the user and yeah it's changed all of my fields so let's change that back okay update user the submit button will update the user that's cool it will also send us back to the preview screen also cool before we can test it we have to of course link to that screen you can see that there is no arrow coming into it so it means well we can't get there so let's link this this profile profile button here profile tab into that other one so the action is to go to edit profile okay and we do the same on the one on top okay and now we have two arrows coming in and which means we can get there let's try it out okay click on the button we can add our full name and we can choose a profile picture let's do that update user and now if i look on my own profile which is user two then i can see the picture appearing well okay it's still stretched but we'll fix that soon okay that is great and now what we can do we can add an edit profile button here only when i'm looking at my own profile so that we can get to that screen as well and we just copy one of those buttons and make sure because you're inside of a group here right but double clicking it gets you inside of the group and clicking outside closes that group again and we want to put that button outside of the group so it shouldn't be part of this it's not the same logic as the group the group will will be hidden whenever i look at my own profile but this edit button will be shown whenever i look at my profile so it's really exactly the other way around so let's change this button and make it okay maybe green again and we can delete all of these actions and here we maybe choose a edit icon and we say edit profile make it a tiny bit bigger and again it's it's snapped to the other one to the group really because it will just jump up uh whenever the other buttons are not shown so that the app looks nice so it's sometimes visible well when is it visible when i'm looking at my own profile so really it's when the current current post user email address is the same as my own user email address so yeah pretty easy like we did before and also we want to add an action to link to the edit profile screen which is like this so now you have the first time you have an arrow pointing here into the screen and also let's make this button look a bit different here we'll make an outline button out of it okay let's test it out so we are user two as you can see on the bottom here we click on this and we see edit profile yeah we can click on it and we arrive on our own profile we can edit everything and then we come back and you can see now that the picture is not stretched anymore because there is a button next to it so a dollar tries to fill up the whole screen so that if you have a bigger screen the app still looks good maybe we should put the buttons more to the left here so that there's not so much space but that's easy to do by just marking all of them and i usually do that with shift and the arrow keys on the keyboard i'm just jumping in that direction i think that is pretty that is pretty good okay great we finished those screens and they work perfectly fine okay the next thing to do is to link the final and third tab on our app here to our own profile so you can see that this one doesn't have any link on it check this out here it doesn't have any link on it because we didn't build that screen yet now you would maybe expect that we can link the user profile to this user profile but it doesn't work like that in adalo simply because on this screen we are referring to a post that has been clicked on from one of those streams and then when you click on it adalo gives this other screen the current post so let's see here you see it it passes on to that user profile screen the current post the thing is that when we click on user profile here in the tab menu there is no post to give to that screen so that screen will be very confused and doesn't know what to display so what we have to do is we have to create another screen just for that use case to display our very own profile so in order to do that we copy this one command c command v maybe put it somewhere here and we just delete everything we don't need from that screen and of course we do not need the follow buttons so we can just backspace or delete them and we just place this button back where it should be like that and instead of displaying any data here based on the current post we want to display it based on the logged in user so i will have to delete this and set it to current logged in users username and current login users picture and so on and so on also the list has to take the posts from from the current login user and so on i think that's it basically the link to edit profile is still okay because well that screen is just for us we can only edit our own profile that's fine so that should work out fine and now we can go ahead and link it from the tab bot add an action and link to user profile too well because i gave it the worst name ever let's rename that to be called my profile click done that's important really i mean name your screens and then it's much easier in the drop downs here it's missing then link to my profile okay and of course let's test it okay my profile coming here and for some reason yeah of course of course the button has a visibility constraint and we can just remove it and say always visible because when i'm looking at my own profile of course i want that button to appear so let's check it out again okay that's nice edit profile coming here change my name just to prove that it works that's cool and let's post another picture here in the name of user two and then we log in again with user one and we see how that looks like okay as you can see my feed shows my own post but also the post from the user i'm following you can see that when i click on another user's post i arrive on their profile and i can unfollow them and when i click on my own uh posts then i arrive on on my own profile and i can edit my profile and it's a bit different than the other users and that's cool i can explore other users content as well i don't see my own content there which is absolutely desired i can unfollow this user and then i can go back to my feed on the home tab and i can see that this user's post just completely disappeared and i just see my own stuff and i can click on my user profile as well and i can i can edit it so hey we are almost done the only thing missing are the notifications the notifications that are sent out to all of your followers whenever you post something new okay but why does this work well that's because adalo is capable of exporting your adalo app as a native application so check this out you can publish this app as an ios app or an android app and put it into the app store but also as you can see adala wants you to upgrade to a paid plan in order to make this happen speaking of a dollar pricing you can see that their most expensive plan is at 200 a month and also more importantly it limits you to 20 gigabytes of data storage now imagine your instagram application goes through the roof then you can hit that very quickly so keep in mind when you're building content heavy applications with adalo there is a way around this by using adalos api connector you can connect also by upgrading of course your plan you can connect to a third-party api let's say you want to put your data on some other storage and you can do that and then just load the data within the adalo app from outside then you will not hit that limit but that goes a bit too far for today so make sure you like and subscribe so that you get that video when i create it okay now so let's create those notifications go to the post photo screen and make sure the submit button has another action on it which triggers a notification but now how do we tell it which users should get those notifications now check this out i can send it to all of my followers and that easy right because we created this relation at the very beginning of the video you can go back and check it out where we said that a user has followers and those followers are created every time this green button is clicked right so adela knows exactly who those users are so it's a list of users and all of them will get this notification now the only thing left to do is to tell a dollar how to phrase this notification so i will say this user which is me has posted new content so check it out and also please when user clicks on that notification send them to the user profile the user profile is a screen up here that we created and adalo will basically send a reference to which user that is so the screen can then start rendering all of my posts and this other person that is following me can see my content it looks like we have created all the features that we want to create that was cool right don't forget the copy there is one more thing that you should know about adalo's data layer it offers an api connector over here and you can use it to connect to any kind of api that exists out there for example for searching for images or to connect to your own api for face detection or any kind of machine learning or simply to fetch data out of a massive database that you do not want to copy into adalo because it wouldn't make any sense so keep this option in mind it's really powerful especially when used with backendlist.com which also allows you to create an api and a business layer and then you can put those two together where you have backendless as your backend with the business logic with all your data it can scale super nice and then you just read this data into adalo which also saves you some money on the pricing plans that's it for this video i hope you had a lot of fun creating an app like instagram using adalo and you can see the possibilities that lie in front of you by knowing such tools if you don't mind leave a like and subscribe to the channel because i will be releasing new videos on the limitations of no-code tools and what is not possible with them until next time keep creating and [Music] you

Channel: Michael Ionita

Views: 63,749

Keywords:

Id: N29KrGIwwqg

Length: 44min 57sec (2697 seconds)

Published: Sun Nov 22 2020