How to build an Instagram clone app! With NO CODE! (Full Tutorial)

hey guys demetrius here and welcome back to my channel now in today's video i'm going to build a simple instagram clone app or in other words a photo sharing application and most importantly this is going to be a no code tutorial so don't worry if you don't have any coding knowledge the tool that i'm going to use in order to create this app is glide you can go to glideapps.com to sign up for a free account it's a fantastic tool for building apps with no code and if you're a beginner with glide or never used it before i'm actually going to put a link below this video to a video series that i made which will help you get started with glide so with that being said let's get started now as you can see i have already created a glide up right here and i have linked it to this google sheet this is where i'm go we're going to be storing all the data for this app and the first thing i'm going to do is actually create the news feed page right so on instagram you have the main page which is uh that long feed where you just scroll through your through the post of the people you're following right so that's what i'm going to try and replicate right here now the first thing i've done here is created a sheet right and i named it pause so this is where i'm going to be storing all the post information all the posts are going to be displayed on this page so what i need to do is actually create some fields for these posts so i'm going to have for each post i'm going to have a title a caption caption i'm gonna have the actual image right i'm gonna have a publish date uh the number of likes and then finally and this is the most important field is the user email right so that's the field that's gonna help me identify who made this post which user made this post and on glide the only unique thing we have for each user is their email the email that they sign in with therefore this is going to be the um the the email that we're going to submit with every post in order to identify the owner of the post right so then what i'm going to do is actually add some example data here so i have some example data that i created for this sheet right so caption date posted uh likes i'm gonna put one and then user email i'm gonna leave empty right so i'm just gonna i'm just gonna create one example pause there just so you can see so now i'm gonna go ahead and reload the sheet and that post should appear right here so there you go our post has appeared so now i'm gonna customize the way that this data gets displayed right so here on the sidebar we have a bunch of different style options and these are the style options for this particular list now i'm actually going to choose the cards style option because i really like the way that cards look and what i'm going to do next is actually assign the the the data from the spreadsheet to the different components on the card right so for the image i'm going to get the data from the image field on the spreadsheet for the header which is this text right here i'm actually going to leave that empty for now and then for the title i'm getting the data from the titles field and then the caption is the caption perfect now the next thing i'm going to do is change the image shape to be square you know very similar to instagram and uh yeah i think that's pretty much it you know there's many different styling options you know you can make it look however you want uh but yeah this is it for the um this is how i want the the the pause to be displayed so now every time a new pause gets added to this sheet right here and obviously we're going to configure a way so the the the user is actually able to make a post and every time a post is made it's a new raw is going to be created on this sheet and then automatically that data is going to appear on this page right here so as you can see if i go ahead and copy and paste this row so now we have two posts if i go ahead and reload the sheet there we go so at least for now this page is pretty much done so i'm going to go ahead and get rid of this pause right here and now we're gonna focus on uh the uh i'm gonna create a new tab right or in other words a new page so i'm gonna go here create a new tab and this is gonna be the profile tab right so this is where i'm going to display all the user all the user information uh this is where the user is also going to be able to make a new post and also see all the posts they make basically the exact same thing you get on instagram on your profile page um now the source of this page needs to be a different sheet right because i need to create a new sheet that will store all the user information right so i'm going to call it users and on this sheet i need to create a few fields so we're going to have the name of the user we're going to have their email we're going to have their image or another i'm actually going to make this i'm going to call this profile image we also need a bio right so you on instagram you also have a bio we're going to have a date joined a user name right that's important so i'm going to move this username to the beginning there uh and then we can also have the uh date of birth right so dob okay that's it for now i'm gonna make these bold and uh now what i'm gonna do is go back reload the sheet here to detect the new data and now i should be able to let's go back to the profile tab here i should be able to select the users sheet to be the source right okay now what i need to do is create user profiles now the way that you create user profiles on on glide is by going to the uh the first thing you need to do is go to settings privacy and enable the the sign in method to be public with email so what this is going to do is basically create a sign in screen every time the user visits the app that is going to ask them to enter their email and then uh log into the app right so if i go here and share this up and publish it and i'll copy this link and open it up in a new tab this is what the user is going to see right now as you can see we get a sign in screen this is where we enter our email so i'm going to go ahead and create a a new email here random user create mailbox i'm going to copy this email paste it right there continue and this is going to send a pin to my email it's going to take a few seconds there you go so now i'm going to go ahead and copy this pin to my app here enter it and sign in and that's how we sign into the app now this doesn't mean that the user has an account right this just means that the user is is able to sign in with an email right so then what we're going to do next is actually configure the profile page right here to allow the user to create an account using the email that just you um using the email they signed in with right so in order to be able to do that first of all you need to select public with email here and then the next thing we're gonna do is go to this sidebar and click on the sign in button right so as you can see on the right hand side now we have this user profile option so now we're able to select the sheet where all the user information is going to be stored so we have already created a user sheet so i'm going to go ahead and select that and then i'm going to link all the fields right here to the correct data fields on the sheet so for name this is going to be the name column email is going to be the email column and image this is the profile image this is actually going to be profile image right perfect so we now have user profiles so now the next thing i need to do is allow the user to create an account now on this profile tab what i'm going to do is select the details style option because this is the only option that allows you to add custom components to your page all the other style options are used to display data but this style option allows you to add any component you want on the page as you can see right here so i'm going to go ahead and get rid of all these ones right here because i don't want them and the first component that i'm going to go ahead and add is going to be a form button component right because i want to create a form that will allow the user to create an account so i'm going to change the title on this component to be create account right and once i click on this button this is going to open up a form right so this is where i can enter all the data that i want to submit in order to create an account the first thing i need to select is the destination so where is this data going to go to and it's obviously going to be the user sheet because every single one of these rows on this sheet is going to be a different account on the app right so the data is going to go to the user sheet and as you can see we get we we have all these uh fields right here which link to the fields on the sheet however what i'm gonna do is go through each one of them and see if they're relevant so username is a text entry field so that's fine this is where we're gonna enter the username name once again is a text entry field that's fine for the email though what i need to do is get rid of this and actually add a new component which is going to be a special value right because i want to detect the email that the user has signed into my app with right so remember on the sign in screen we sign in with an email and this component right here is able to detect that email and pass it as a data field to the form right so i'm going to select this component right here and as you can see this is a special value it's hidden it doesn't get shown on the form and the the data of this component gets passed to the email column on the sheet right so the email that the user is currently signed in with will get passed to the email column on this sheet perfect so then let's see we have a username name profile image now the profile image needs to be uh an image picker you know so i need to allow the user to upload an image so this cannot be a text entry field so i'm gonna get rid of this and i'm actually going to add an image picker component now the data from this component is going to go to the profile image column on the sheet and as you can see i'm going to be able to upload an image from the camera and the photo roll right so that's perfect now uh let's see what else do we have a bio that's fine it's going to be a text entry component data joined i'm also going to get rid of this one because the date joined i can actually select that to be a special value and that's going to be the current date and time at the submission of this form so as soon as this form is submitted um the the app is going to detect the current date and time and it's going to pass this value to the date joined column on the sheet right so right here so that's another special value and then finally for the date of birth uh i'm more i'm going to get rid of this one as well and i'm going to add a date component instead because this is going to require the user to enter enter a text in this format right so i'm going to make sure that the user actually enters a date this data is going to go to the dob column and i'm also going to change the title to be date of birth right and yeah that's perfect i'm gonna now move this above the image picker there we go perfect um okay so now we can go ahead and test this form currently i'm going to use this preview as feature right here to sign in as an example user right so this is a really cool feature that allows us to test the app based on a particular user that is signed in so george gmail.com is a new user that i just came up with so i'm going to go ahead and create an account for this user i'm going to give them the username george test name is going to be george l bio this is my example bio date of birth is zero four zero five one nine two i'm not going to upload an image from the here because i don't have an image on my computer i'm just going to paste the link later on so i'm going to go ahead and submit this form and as you can see on the sheet now we have a new user right the only thing that's missing is the profile image but i'm actually going to get an example one from my test data right here so i'm going to copy this one right here and just add it there perfect so now what i need to do is actually display this data this user data on the profile page right because i'm currently signed in as george i have successfully created an account on the app however on this page i still get a create account button and i don't see any information that's relevant to this user right so there are a couple of things to do first of all need to get rid of this button and then we also need to display the user's data now the first thing i'm going to do is actually um let's get rid of this button first so i'm going to click on the button i'm going to go to features and i'm going to set up a visibility condition right so the idea is that i want this button to only be displayed when the user doesn't have an account so i'm going to add a new condition and i'm going to say as you can see right here i get a new section called user because now i have user profiles so i'm going to say if the user if the if the email column on the user sheet is empty then show the button now i'm currently signed in as george therefore this statement is is not true because george does have an account and does have an email therefore the button disappears but if i sign in as a new user called mike as you can see the button appears so what this what this condition translates to is basically if user doesn't have an account show the button if they do have an account then don't show the button right so this works now the next thing i need to do is display the user data so i'm going to sign in as george again so we have some data to display and what i'm going to do is i'm going to add a new component which is going to be the title component this is a component that i like to use because it allows you to have three different elements so it has an image it has a title and a small text below it so uh what i'm gonna do is here on the data section i'm gonna assign the data to be for i'm gonna get i'm actually going to get the data from the user section right here so i'm going to have the username to be dot text then for the details i'm going to get the bio right and then for the profile image i'm going to get the profile image from here right and the reason i'm getting this data from this section instead of this section is because i want this data to change according to the user that is currently signed in right that's something really important so now if i log in as a mic who doesn't have an account as you can see we get nothing right but if i sign in as george we get this perfect so we're now able to get rid of the create account button and also display a uh the user's data now another thing i'm going to do before jumping to the next section is actually also have a welcome message so if the user doesn't have an account so mike i also want to display a little welcome message above this button so i'm going to add a text component this one right here and i'm going to set this to be custom text so i don't want to get this data from anywhere on the sheet i actually want to have my own text welcome to no code gram right and we can also have a little emoji and then i'm gonna change the style of this text to be heading two right so it's nice and bold and i'm gonna put this above the button right there and then i'm gonna duplicate this text component and i'm also gonna have a little uh instruction text so uh create an account today to start posting right and i'm going to make this regular right like that perfect so now the last thing i need to do with these text components actually also create a visibility condition so they only appear when email is empty and i'm gonna do the same with this one so only appear when user email is empty perfect so now let's login as george perfect mike george okay now the next thing i need to do here is create a new post button right so i want to allow this user to create new posts on the app so what i'm gonna do is add a new form button right and i'm gonna name this button new post now when i click on this button the first thing we're going to do is select the destination that the data of this form is going to go to and it's obviously going to be the pause sheet because that's where i'm going to be storing all my post data right and let's see the components so we have title text entry text intro caption uh image picker for the image uh published data i'm gonna get rid of that likes i'm gonna get rid of that and user email i'm also going to get rid of that so i only want the user to enter these three pieces of information however i also need to pass in some special values so i need the user's email so the user that the the the the email that the user is currently signed in with because remember on the post on the post right here we have the user email which is what's gonna allow us to identify the owner of this post therefore i need to pass that in as a special value because i want that to be i want that to be the the email that the user is currently signed in with so user that's that this data is going to go to the user email column and another special value that i'm going to add is going to be the current date and time and this is going to go to the publish date so as soon as this form gets submitted the current date is going to be retrieved and get it will get passed to the publish date field um okay what else do we have so likes obviously that doesn't need to be added uh now yeah that's that's pretty much everything i'm also going to add a little title for the image and this is going to be image right or yeah let's just leave it as an image it's fine um okay now another thing you can do here and this is something i could have done on the on the other form as well the the create account form uh is you can actually set a minimum length and maximum length for the for the text fields right so for example if you don't want the title to be more than 50 characters or yeah i think that's characters a yeah that's characters so if you don't want the title to be more than 50 characters and no less than three characters you can enter those values right there okay uh same for the caption but i'm not gonna do that anyway so now i'm gonna i'm currently signed in as george so i'm gonna go ahead and submit a new post here so this is my first post this is an example caption i'm not going to upload an image i'm just going to once again just copy and paste in a link for my example data here so i'm going to go ahead and submit this post so if we go to the post sheet right here there we go that's the new post and as you can see it has successfully retrieved the user's email now for the image what i'm going to do is just go here and i think i have some images yeah so let's copy this one paste it right there so now if i go back to my app and reload sheet and then i go to the post page right here as you can see the new post is now there now one thing i'm going to do at this point is actually reorder this list so the latest pause appears first you know that's something you get on instagram so uh what i'm gonna do is actually go to the features of this page right here and i'm gonna go to the sort option and i'm gonna sort this based on a publish date right and i want this to be a descending order right there you go so the latest post appears first perfect so now let's go back to the profile page and then the next thing i want to do is actually display the users pause below right here right so these are the posts that the user has made now in order to do this i'm going to add an inline list component right so this one right here so this allows us to create a small list that gets added to the page and the uh the style i'm gonna select for this list is going to be tiles right so on instagram get like little square images right so i'm gonna try and replicate that here so i'm gonna select tiles the source so where we're going to get the data for this list is going to be the posts sheet right because that's where all the pos data is stored uh and i'm actually going to get rid of these ones here i don't want to have anything else other than the image and then what i need to do is select here on the tiles per row i'm going to change this to two tiles per row and then the tile shape i'm going to change to square and as you can see when i get nice square images and you can actually make that make it three um three parts per row you know very similar to instagram but i think i'm just gonna make it two for now i think that looks a little bit better um okay so i think that's pretty much it right here but now what we need to do is actually filter this list to only display the post of this that this user made because as you can see right now we get both of these posts but the only one that this user has made george has made is this one right here so i only need to display this post instead of both so what i'm going to do is actually go to features uh so i'm currently sele i have currently selected the the inline list component so i'm going to go to the features of this component and then on the filter i'm gonna add a new filter and i'm gonna filter based on the user email right so this is the email on the posts um sheet right here the user email so i'm gonna so i'm gonna filter based on that email and i'm gonna say that that email needs to be the user email there you go right so that's the account of this user right here and we're we're comparing with we're matching both of those emails right so now we're able to successfully um show this particular user's post i accidentally enabled this search bar i don't need that okay so now we're able to successfully display this user's posts so now we're pretty much done with the profile page right here however we still have an issue if i go here and sign out and sign in as a new as a new user who doesn't have an account so mike for example right as you can see we're not getting the um we're getting these two components which is correct however we're also getting these two components which is not correct so what i need to do is scope to the uh new post form button go to features and add the same visibility condition we had before so this is email you user email is empty right so uh sorry user email is not empty right so if the user email is not empty so in other words if the user has an account then show that the button however if they don't then don't show the button same with the inline list here so features uh visibility if user email is not empty then show the list so there we have it so now if i log in as george perfect okay so we're now ready to move on to the next thing we need to do so uh that will be the post pages right so when you click on a particular post you know whether it's on the news feed or the profile right here you get a new post page right so this is the page where we will display the full image we will display like um uh the the user's information you know we're also gonna display a like button a comment section and so on right so um what i'm gonna do is as you can see here we're able to completely customize this page with components and i'm actually gonna um i'm gonna get rid of all these ones here i don't need them and i'm going to add a new component which is going to be an image component right so i'm going to display the image of the post right um yeah that's pretty much it and then below this i'm gonna add a like button right so i'm gonna select the like component i'm gonna give it a title likes or like yeah likes i mean this is optional you don't need to do that and yeah this data is going to go to the likes column so right here and every time someone clicks this button uh the like count is going to increase right so uh let's see i think this this is this one right here oh yeah there we go it has increased perfect now the next thing i'm going to do is add a um uh the you i wanna add a link to the user's profile right so when the user clicks on this i want them to see the user's profile so this is gonna be a little complicated what we're going to do is first of all go to the data page right here so this is a representation of all the data we have on the sheet however we get some some really cool features such as we're able to add relations right so i'm able to create a new column here this column by the way is not going to be displayed on the sheet right this is uh this is just for this section right this page right here uh i'm going to create a new column which i'm gonna name user right and i'm gonna select the column type to be relation right and i'm gonna create a relation which is basically gonna look for the user email on each one of these posts right and it's gonna find the same user it's gonna find the user with the same exact email on the user sheet right so on the user sheet we have the field email so it's going to find that user based on their email right so as you can see it has automatically detected george here because it took this email right here it went to the user sheet and it found the same row that has this email right it found the row that has the same email therefore it has detected this user right this is called the relation so now what this means is that i'm able to go back to my page right here and add a new component which is going to be the relation button right so i'm going to click on this and as you can see i'm able to have this little link right here which gets data from the user relation that i just created now what i'm going to do next is select uh the title element so this right here to be user name and then the details element to be the name right so that's how i wanted to display it to be displayed and then um what i'm gonna do next in order to complete this page is add a comments component right so this is gonna allow users to comment on a post then finally i'm actually gonna add a few separators right so this is uh these are just some lines that help you organize things a little bit better right and one thing that i forgot to add is the caption so i'm gonna add a text component and this is gonna be the caption right so i'm gonna move this here below the like button i'm gonna add one more uh one more separator just like that perfect now the good thing is that all this uh setup we've done here is actually going to be replicated across every single one of these posts right so i don't need to recreate everything same here there you go so now what i'm gonna do is actually focus on the uh on the user's profile so when i click on this this is going to open up a brand new page where i'm going to be able to display all the user information so this is going to be actually this is actually going to be a very similar page to the one i have right here on the profile page however obviously we're not gonna have a um a new post button and so on so here i'm gonna go ahead and for the title i'm gonna select um the username and uh for the components i'm going to go ahead and add a title component right there we go and then for the data for the title i'm going to select a username for the details i'm going to select bio and then for the image we have the profile image now if you notice here i'm not selecting this data from the user section right here i'm actually selecting it directly from here because this data is actually for the user that is currently signed in right and this is going to be wrong if i select this because let's say as you can see every post is going to have a different creator right so the the creator of the post is not going to be the user that is signed in right it can be someone completely different therefore it's not going to be correct if i select the data from here so now uh the next thing i'm going to do is add a an inline list right so this is going to display all the posts for this user i'm going to select tiles style and once again i'm gonna customize the style the tile uh to be a square and also display two tiles per row i'm then gonna get rid of this data right i don't want it right there um and i'm going to change the title to be users post now the final challenge we have here is to actually filter these posts once again to display the data of the of of this particular user to display the post of this particular user so what i'm going to do on the inline list here i'm going to go to features add filter and now what i need to do is select the user email right so once again the email on on this um on this column right here for the post um this email needs to be the same as the email of the user of this screen right so as you can see we now have this new screen option which is part of the relation right so this email has to be the same as the email of the user of this page right and as you can see it has it has been successfully filtered so these concepts might be a little bit advanced you know especially if you're a beginner uh but yeah that's how you achieve this um so now all these uh posts if i go okay so this one doesn't have a user you know that's why we're not able to view it but yeah for this one we have a user and that's the user profile and this is going to be the same here so if i select a post from the user's profile i'm able to get the user users uh link right there and that's the user profile so now what i'm gonna do is actually go ahead and test this so i'm gonna sign in as mike so let's go to the profile page as you can see here we have uh the create account button so i'm gonna go ahead and create a username for mike uh name is gonna be mike a uh this is mike's bio date zero six zero three one one ninety two submit um i'm not gonna add a profile image we don't need to do that however what i'm going to do is create a new post right so as you can see now mike should be part of our users sheet right here there we go uh i don't know why that's there delete row so mike is right there we have an account for mike so now i'm going to go ahead and submit a new post so uh mike's first post this is a random caption submit so there we go we now have one post i'm gonna add a an image link to this post i'm gonna select this one right here paste uh and now i'm gonna go back to my app and refresh there we go so as you can see the pause has been made and it's displayed on mike's profile and now if i go to the posts page right here to the news feed there we go last thing you paused and now if i click on the post we have the like button i can go ahead and like this this is a random caption that's correct and then we have a link to mike's profile right so our app is now ready and fully functional now if you want to take this up to the next level and learn how to add more advanced features as well as learn how to monetize your app so you can start making money from it i'm actually going to put a link in the description to my course which is now available in this course i have a complete module on mastering no code app development with both glide as well as other powerful no code platforms i also have a module dedicated on adding monetization options to your app so things are like displaying ads unlocking features for premium users promoting offers selling products and so on um there's also tons of stuff on marketing and building a brand around your app so pretty much everything you need in order to start building money making apps most importantly with this course you also get access to a private community that are set up where you can ask any question you may have and also network with people who are working on similar projects to you so if you're serious and you want to take your no code app development game to the next level the link will be in the description and without being said i'd like to thank you for watching this video i really hope i was able to provide you with some value here subscribe to my channel if you want to stay tuned for when i release new videos like this one and also don't forget to give this video a thumbs up if you enjoyed it i'm gonna see you on the next one

Channel: Dimitris Kamaritis

Views: 17,633

Keywords: instagram clone, instagram clone app, glide apps, glide app, no-code, no code apps, no code app development, no code app builder, app development, glide app tutorial, how to build an app like instagram, instagram clone tutorial, photo sharing app, mobile app development, web app development, web app tutorial, no code web app, how to build an app without code

Id: FdImdt3TTyw

Length: 39min 32sec (2372 seconds)

Published: Sun Sep 20 2020