How To Build An Instagram Clone With No-Code Using Bubble (2024 Flexbox)

Подписаться 22 тыс.

Просмотров 26 тыс.

50% 1

2024 UPDATE - INCLUDING FLEXBOX RESPONSIVE DESIGN
In this video, I'll be walking you through the step-by-step instructions to build your own photo and video sharing app like Instagram without touching a single line of code.
Follow along as I take the time to carefully explain the unique workflows to create your own social media app with Bubble.io.
From creating user accounts, building a social media feed, uploading photos, carousels, videos and stories, liking and commenting on posts, displaying user profiles, and building a message inbox - my full tutorial covers everything you need to build a functional MVP.
You can access the working Notion doc and create a duplicate from this template: lachlan-kirkwood.notion.site/...
---
About me:
In 2020, I worked directly with the Bubble team to write their 'How-to build' blog series. Each installment shared written instructions on how to recreate popular products using their no-code tool. To simplify the building process, I've created my own video series to help guide you in a more engaging way.
Note: This video series has no direct affiliation with Bubble themselves. This is something I've created on my own.
---
Interested in the full course?
If you'd like to uncover the full tutorial, you can purchase the complete course here: buildingwithbubble.com/how-to...
---
Timeline:
00:00 - Product demo
02:00 - Course overview
05:05 - Building your Instagram database
36:07 - Uploading an image post
54:35 - Uploading a carousel post
1:15:47 - Uploading a video post
1:45:25 - Demo: Uploading a post
1:47:44 - Building the home page feed
2:47:37 - Demo: Home page feed
2:50:45 - Additional insights

Наука

Опубликовано:

27 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 136

@BelarusianThunderPodcast 18 дней назад

Very underrated teacher for Bubble. Thank you

@BuildingWithBubble 16 дней назад

Comments like this always make my day. I genuinely appreciate it 🙏

@Hatedomain Год назад

What's great about this is, as a new Bubble user, this feels advanced and is teaching me a lot of useful and cross functional information that I can use in a modified capacity for other apps I want to build. A lot of great information packed into this lesson, and it wasn't boring at any point!

@BuildingWithBubble Год назад

Glad it could help! I always find the best way to learn is by using real-world examples from apps you're already familiar with. You'll be a Bubble wizard in no time 👏

@fizakhatri6505 Год назад

You are a great teacher. You explain everything so calmly, your teaching method is so good 👍🏻

@BuildingWithBubble Год назад

Genuinely appreciate this 🙏 It's always great to know the content is helpful.

@bitcoinisfreedommoney.fckt2663 2 года назад

Dude you're a beast! I can't believe you created all these clones so effortlessly. Amazing!

@BuildingWithBubble 2 года назад

Thanks my man! What you don't see is the 3 years of experimentation in Bubble before I created this channel 😅

@alejandrasalgado3378 Год назад

I am completely and infinitely grateful to you for making these videos. ❤

@BuildingWithBubble Год назад

Genuinely appreciate it 🙏 I remember how challenging it was to learn Bubble when I first started, so I'm glad I can help streamline the process for others.

@MotorcyclesandArt Год назад

This is FANTASTIC! Thank you for doing this. You are helping many people.

@BuildingWithBubble Год назад

Always glad to hear it can help 🙏

@Rockicoin Год назад

This is properly the best video in the world of no code tools, bubble to the moon

@BuildingWithBubble Год назад

Glad it could help! Bubble all the way 😍

@hariharanelangovan32 Год назад

your so great bro.. i admire your work. Please don't stop spreading knowledge. Your calm, and explaining so effortlessly. Good job sensei.

@BuildingWithBubble Год назад

Genuinely appreciate it 🙏 There's plenty more to come!

@blankplusblank 7 месяцев назад

This is an amazingly clear and concise tutorial! Thank you so much!

@BuildingWithBubble 7 месяцев назад

Appreciate it! I got you 😎

@KeilorT 2 года назад

Impressive!! Thank you!!

@BuildingWithBubble 2 года назад

Glad it could help 😎

@deboraha6696 Год назад

Woww what I will say is I've never once considered buying a course from RU-vid till I saw this video. This was awesome in so many ways. I'm surprised even this demo course was free. Thank you so much this was great and very valuable.

@BuildingWithBubble Год назад

Genuinely appreciate it Deborah 🙏 I put a lot of work into the courses I create!

@ndelledenisnkwelle6676 2 года назад

Thank you so much sir for this amazing Tutorial. I is absolutely wonderful.

@BuildingWithBubble 2 года назад

Always appreciate it 🙏

@danielmaina4942 2 месяца назад

Your tutorials are heaven sent!

@BuildingWithBubble 2 месяца назад

Genuinely glad they can help make a difference 🙏

@user-kf5ct5zc7s Год назад

This is FANTASTIC!

@BuildingWithBubble Год назад

Glad it could help ✌

@mathegriffiths8896 Год назад

This is incredible bro, thank you

@BuildingWithBubble Год назад

Appreciate it 🙏 Glad it could help

@momar180 2 года назад

Thank you for your time!! That’s big first off. Second great tutorial

@BuildingWithBubble 2 года назад

Genuinely appreciate it 🙏

@viniciusel-mar7449 10 месяцев назад

Thanks a lot dude for this great and fantastic video!

@BuildingWithBubble 10 месяцев назад

My pleasure ✌

@megadontee9780 Год назад

Thanks a lot. i will need to go over it more times to be effective

@BuildingWithBubble Год назад

Glad it could help. And while Bubble does have a steep learning curve, once you understand a few core concepts, the possibilities are endless!

@strauss7151 2 года назад

This is great. Will you be releasing the updated flexbox versions of your other tutorials as well?

@BuildingWithBubble 2 года назад

Thanks! And yes, this is the plan. I'll still be releasing a few new tutorials in between as well 👌

@daneyum6011 Месяц назад

How does he link the upload front end to the index page database? Please help out!

@uen1857 23 дня назад

please how we restrict special characters and spaces from input

@wealthyman5420 2 года назад

Hi, really comprehensive tutorials, Please do a tutorial on building a market place or e commerce website. Thanks

@BuildingWithBubble 2 года назад

Thanks! If you're looking for a tutorial about building a marketplace, I'd recommend checking out my Fiverr clone tutorial here: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-_7j3Pzaj9ps.html Building an e-commerce platform is at the top of my list right now as well 👍

@nitinmahajan5028 Год назад

Thank you so much for this video🎉 Just one quick question: which plugin did you use for instagram stories? If it is not free, any free alternative to that plugin!?!

@BuildingWithBubble Год назад

Glad it could help! And I use the 'Instagram-like stories' plugin. It is a paid plugin, but it simplifies the entire process. Unfortunately, there's no free alternative to this plugin.

@Solitoapp Год назад

What a great video, thank you!!! Does the full tutorial include functions like signing up with google account verification or being able to delete pictures a an user? Please let me knowww

@BuildingWithBubble Год назад

Glad it could help! Unfortunately the full course doesn't cover third-party logins, however, I already have free tutorials on my channel that walk through these 👌 If you ever have any other questions, my inbox is always open. Feel free to shoot me an email at lachlan@buildingwithbubble.com

@toungewithgills1 Год назад

I like your videos. They teach so much, and take away anxieties. One question have you ever thought of an adult friend finder clone. I am mainly looking to build dating apps and websites. Thank you for the videos!

@BuildingWithBubble Год назад

Appreciate it 🙏 And I haven't considered an app like this, but I'd be happy to add it to my list. Are there any key features you'd be looking to see?

@toungewithgills1 Год назад

@@BuildingWithBubble I am looking at key features like, landing page, home page, profile pages, as well profile flows, and conditional logic to choices, searches, where filters, and user choices are concerned.

@toungewithgills1 Год назад

@@BuildingWithBubble As well intrested how to interact between pages like; 1)Landing Page 2)Home Page 3)registration Page 4)Members Page 5)Subscription Page 6)Payment Gateways Page 7)Privacy Page 8)Policy Page 9)Terms Of Use Page 10)Functions Page 10)a)Delete Account Page So forth of building the interactive interaction. Where you have check ✔️ boxes lets say that builds the choices and builds the flow and search parameters so to speak.

@BuildingWithBubble Год назад

@@toungewithgills1 Sweet, I'll add these to the list!

@Ad-vg1jb 2 года назад

how to make a user be able to block another user? so he can't send private messages

@adrianmunevar654 5 месяцев назад

Hi! You're such an awesome teacher, I just finished this tutorial and I'm so glad with the results so far. Anyways I have an important question, is it possible to get just the IG clone template on your website with the personalization guide without the whole course? If so, please let me know. Thank you!

@BuildingWithBubble 5 месяцев назад

Appreciate it! And unfortunately, I only sell my templates alongside a course. When you buy a template, it's important to know exactly how it's built. Without this, it'll often leave you with more questions as you look to make changes.

@adrianmunevar654 5 месяцев назад

@@BuildingWithBubble it makes sense. I gotta make some tests and after that I'll see if I buy the whole pack. Thank you! 💪🏻

@enockkiplangat5852 17 дней назад

Very impressive

@BuildingWithBubble 16 дней назад

The possibilities are endless with Bubble 😍

@briankwak571 6 месяцев назад

Is it possible to get access to the template? I followed the build of the post module but I think there were certain things I might have missed

@BuildingWithBubble 6 месяцев назад

Yes, if you follow the link in the description, you can get access to the template 👍

@MdMamunurRahman-kw9yh Год назад

Hello sir, Thank you so much for making such kind of tutorial and make understood us so easily. As a learner i am really greatfull to you. By the way, there are some part at the end could not understand that how you upload the profile picture and how did you share the post with images at carousel image's part after making home page. So it will be great if you make little bit more clear the preview after finishing the work.

@BuildingWithBubble Год назад

Glad it could help! And if you were interested, I'd recommend getting access to the full course through the link in the description. The full tutorial goes into more depth around these features. Hope this helps!

@farahal8928 20 дней назад

I have an issue, although I am following your instructions to the tea, after I set the width and hight to 300 for the Carousel to allow it to repeat, when I came to test it in the responsive mode, it did not repeat like in yours ( meaning it is only displaying one cell for me), despite me setting it to be horizontal. To add, when i came to test everything in preview mode, the Single post did not show when tapped on, like the Carousel and the video post, Any idea why it did not work for me?

@BuildingWithBubble 18 дней назад

Happy to try and help! When it comes to the carousel not displaying more than one post, can you just double-check that there is actually multiple posts in your database that can be shown to a user. Remember, your repeating group has constraints that filter which posts should be display. For the sake of testing your app, you could temporarily delete these constraints and see if it displays more than one post. As for the single post. Could you just share some insights about what you mean when you say 'did not show when tapped on'? Cheers

@karencelebrity4287 Год назад

hi! .. can you make video about how to build home pages ads screen like yahoo. home page.. thanks

@BuildingWithBubble Год назад

Happy to add this one to my list 👌

@Richard-op5rb 2 месяца назад

Hi Lachlan, I was just wondering if you can implement Adverts on a repeating group like instagram has on their app when scrolling. I’ve been looking for a video on this to try and implement into my app and i’m wondering if that’s possible.

@BuildingWithBubble 2 месяца назад

Good question. This is definitely possible in Bubble, but unfortunately, I've never built this out before. I'm under the impression this could be possible by creating a condition on the elements inside your repeating group. Bubble has a something called that might do the trick for you. I'd recommend checking out the Bubble forum to see if there's any resources that explain how to use this feature in full detail. Sorry I couldn't be more help here, but I hope this points you in the right direction!

@Richard-op5rb 2 месяца назад

@@BuildingWithBubble Thank you very much this was very helpful! Definitely earned yourself a subscriber👍

@tnt5844 9 месяцев назад

This tutorial is so amazing! I am so super appreciative. I've completed up to the point of the demo of posting a carousel. The one issue I have is once the pictures are uploaded to the multi-file uploader, the file names above the actual carousel are still showing. I went through the video twice, but still seem to be missing how to fix that. Any guidance is greatly appreciated. Again, thank you so much for a great video!

@BuildingWithBubble 9 месяцев назад

Glad it could help! And good question. The multi-file uploader plugin is formatted to display this, but I'm under the impression you could add some basic CSS to remove it I'll do some searching around to see if I can find a fix, but in the meantime, I'd recommend checking out the Bubbe community forum to see if someone's already shared a workaround 👍

@tnt5844 9 месяцев назад

Thank you for the response! I guess I thought I made an error, since, I saw in your demo that once the carousel files were uploaded, you could no longer see the list of file names. Nevertheless, I will definitely search for a workaround! Thanks, again.

@MajorGrooves Год назад

When you make the Group- Carousel-post a Container layout of Row, is that correct? On the Carousel upload section, you made it a Column. I am trying to kinda copy this to improve my existing Instagram clone, and it would only work for me when I set the Group Container Layout as Column. Indeed, later on it seems to be a Row. Maybe I am missing something.

@BuildingWithBubble Год назад

If there's only one element inside of the group (the repeating group that displays the posts), it won't make much difference as to what container layout you select (row or column). It's only when you start stacking elements inside the group that you'll need to select a specific container layout. Hope this helps!

@michalose1 Год назад

Hi, I like your tutorial, I folow step by step up to end. How can I execute this app to googleplay. If I use just preview its not working for me. Did I missed something or this tutorial its not fully working app. I just started with bubble and I dont have any experience. Thank you for your tutorial.

@BuildingWithBubble Год назад

Great question. When it comes to publishing your app on either the Play Store or the App Store, you'll need to convert your Bubble app into a special file format. Bubble has a great guide that explains the process here: bubble.io/blog/bubble-mobile-apps/ Hope this helps point you in the right direction!

@user-rb8zb6fh1c 10 месяцев назад

Quick question, how did you make your header with instagram and the icons move up the page when you scroll down the repeating group as mine doesn’t do this but stays at the top when I scroll down. Thank you!

@BuildingWithBubble 10 месяцев назад

Are you using a floating group for your header?

@user-rb8zb6fh1c 10 месяцев назад

@@BuildingWithBubble No just a standard group. Would I need a floating group? Everything else works perfectly! Thank you for the tutorial

@BuildingWithBubble 10 месяцев назад

@@user-rb8zb6fh1c If you're wanting the header menu to continually stay on the top of the page as you scroll down, I'd recommend using a floating group 👍

@Bosgob 2 года назад

it's a great tutorial channel. I was gonna purchase the lifetime courses but I realize it's in USD, not AUD. is it possible to upgrade a single course to lifetime courses by paying the difference since I don't know if I like it or not or change my mind? or if any coupons coming in future? (i saw there is coupon input:) BTW, I will look forward to coming more apps tutorial in the futuer. channel subscribed! Let's go!

@BuildingWithBubble 2 года назад

Glad to hear the content has been helpful so far! And yes, it's possible to upgrade once you've purchased a single course. In fact, roughly a week after accessing a single course, you'll receive an email with a link you can use to upgrade 😉 I'm always happy to answer any other questions you have. My email's always open at lachlan@buildingwithbubble.com ✌

@housefull2432 2 года назад

@@BuildingWithBubble do tutorial how desing app like ui and ux tutorials to make buttons& animations ect

@BuildingWithBubble 2 года назад

@@housefull2432 Happy to add this to my list 👍

@Francotujk Год назад

Hi! your content is so valuable! I'm only facing a problem filtering the repeating group with posts created by users in following list. I need to filter the repeating groups with other filters (and I need to use tick the 'ignore empty constraints' option). Is it possible to fix this?

@BuildingWithBubble Год назад

Glad it can help 🙌 Happy to help. What problem are you running into with the 'ignore empty constraints' option?

@Francotujk Год назад

@@BuildingWithBubble thanks for your answer! Basically I have a feed to see posts for the users who follow; but also with filters for each post (for example: the post have categories -sports, music, etc.-). So I would like to make a feed where the user can filter the post of their following by categories. Here I need to 'ignore empty constraints' if the users doesn't want to filter. And here is my problem (don't know if it's a Bubble's bug or my fault).

@Francotujk Год назад

Because.. if i 'ignore empty constraints' it shows me all the post (not only those made by the users I follow)

@BuildingWithBubble Год назад

@@Francotujk I see the problem. You could also create a condition on your repeating group that recognises when any one of your filter inputs is not empty. When this is true, you could update the data source and apply the filter to this. You wouldn't need to use the 'ignore empty contraints' option as there won't be any empty constraints due to the nature of the condition. Let me know if this helps.

@Francotujk Год назад

@@BuildingWithBubble Thank you so much! It worked!

@greijnders7315 Год назад

Can you help me please? a 'course library', would this be a Data type? and the different course categories would be data fields, connected to files? For example i'd like users to be able to upload and view, report and read courses in a library on the platform. How do I put this in the databank? + the potential subcategories... and 'outdated' courses as well. Thank you in advance

@BuildingWithBubble Год назад

Hey, you're on the right track. I'd have each 'course' as an overall data type, then store all of the information for each course as data fields

@greijnders7315 Год назад

@@BuildingWithBubble Okay Thank you

@suzalkhan.3886 7 месяцев назад

Can J build this complete on free pack ?

@BuildingWithBubble 6 месяцев назад

Yes, all of this was built using Bubbles free tier

@mk48sz33 Месяц назад

As always, great tutorials. Is it possible for users to show their actual Instagram posts in bubble using the geaph api?

@BuildingWithBubble Месяц назад

Thanks! And yes, that's definitely possible. You'd just need to use a plugin or connect to the API yourself.

@mk48sz33 Месяц назад

@@BuildingWithBubble thanks for your reply. Do you have a tutorial on that?

@BuildingWithBubble 28 дней назад

@@mk48sz33 I don't at this point, but I'd be happy to add it to my list 👍

@alexmunns3500 2 месяца назад

I've purchased this full course (and taken it far past MVP), but there's one thing that I can't figure out without destroying your entire chat set up. How do I change the chat icon colour on the feed to show there are unread messages? The circle icon inside the inbox is nice, but the vital one is an icon (or colour change) on the feed to show that there are unread messages. FYI the chat setup is exactly as you have it in your tutorial so there's no confusion. Thanks, Alex

@BuildingWithBubble 2 месяца назад

Happy to help with this one. Could you shoot me an email at lachlan@buildingwithbubble.com It'll be easier to explain a solution through email rather than typing a long comment here!

@farziverse4209 Год назад

Respnsive Engine for the Multi-Folder is on now

@BuildingWithBubble Год назад

Awesome to see!

@jennessacumberbatch4048 Год назад

Hi I've been experiencing some trouble with my app and i wish you could help, well here is what im experiencing , when ever a user post new post you cant see the other user profile photo or name on their post how can u hlp me

@BuildingWithBubble Год назад

That does sounds strange. Happy to help! I'm under the impression this might be because of a privacy rule. Could you just double-check that you follow the same steps that I cover at 9:35 in this tutorial. Let me know if you still experience the issue after this.

@jennessacumberbatch4048 Год назад

@@BuildingWithBubble yes i did double check, I'm still experiencing the same issue

@SOSSVT Год назад

hello , i think your tutorials are awesome , i just need to know if i can sell my app to google play store after completing building my app , is there any chance that you'll made a video about it and if bublle can handle a huge traffic flow depending if your app is a succes regards from a far away land .....

@BuildingWithBubble Год назад

Great question. When it comes to publishing your app on the Play Store, you'll need to use a third-party service to reformat your app file. This process is referred to as 'wrapping your app'. Bubble has shared a great guide about this on their blog here: bubble.io/blog/bubble-mobile-apps/ Hope this helps!

@SOSSVT Год назад

@@BuildingWithBubble thank you

@MaxSmm_business 2 года назад

After it all. My post did not display when I previewed it, but every other section displayed. What might be the issue?

@MaxSmm_business 2 года назад

I fixed it ☺️☺️☺️☺️☺️

@BuildingWithBubble 2 года назад

@@MaxSmm_business Glad to hear you found a fix! Was it a privacy setting on your database causing the problem?

@MaxSmm_business 2 года назад

@@BuildingWithBubble I didn't set a condition for it, that was what happened. My bad

@thedesigndatabase Год назад

@@MaxSmm_business Can you tell me how you solved this problem?

@MaxSmm_business 2 года назад

I did it all! But my carousel post wasn't visible even after clicking the make visible button. What do I do?

@BuildingWithBubble 2 года назад

Happy to help! Are both the single image and video posts visible? I'd recommend just double-checking to make sure you don't have a default privacy setting in your database. I explain how to remove this setting at 9:30 in this tutorial. Let me know if this helps!

@MaxSmm_business 2 года назад

@@BuildingWithBubble both single and video posts are visible, just the carousel. But I'll do as you said, thank you! Do you have a social media account I can follow you on?

@MaxSmm_business 2 года назад

@@BuildingWithBubble I checked and the default settings is visible in my database

@BuildingWithBubble 2 года назад

@@MaxSmm_business I'm active on Twitter. You can follow my account - @buildingbubble Feel free to also shoot me an email (lachlan@buildingwithbubble.com) with a link to your app. I'd be happy to jump in and see what might be causing this.

@Superfacilito Год назад

Hi, I'm making an application similar to Duolingo but I'm stuck. Could you do a tutorial? Greetings from Peru

@BuildingWithBubble Год назад

A Duolingo clone is definitely on my to-do list. Be sure to keep an eye out 👀

@Superfacilito Год назад

@@BuildingWithBubble 😅👌 thanks so much...

@fanatsy874 2 года назад

I try Free Course for beginners today, i search particular information but there is no here. Care to no english people like me, video in Crash Course haven't subtitle, i can read english but listen is hard.

@BuildingWithBubble 2 года назад

Hey Hugo, I'm currently in the process of trying to get my content transcribed. In the meantime, if you use a browser like Chrome, I'd recommend checking out the transcription browser extension. It transcribes any video just like it does on RU-vid. Hope this helps!

@fanatsy874 2 года назад

@@BuildingWithBubble Thanks you. You have a great speech and good work.

@PodWave_Official 2 года назад

Can you do youtube?

@BuildingWithBubble 2 года назад

Happy to add this one to my list ✌ Are there any particular features you'd like to see?

@riyajuneja777 2 года назад

@@BuildingWithBubble Playing video in background mode- the feature NOT available in free version

@briankwak571 6 месяцев назад

@@BuildingWithBubbleI would second this feature where you can input a RU-vid link and have the feed show the video

@johnwathiru6845 2 года назад

Contact??

@BuildingWithBubble 2 года назад

Hey, you can reach me at lachlan@buildingwithbubble.com 👍

@MajorGrooves Год назад

I keep leaving this comment and it won't save! Hmm my second comment did not save (maybe because it included a URL). What I said was - phenomenal content. I have been using Bubble for years and never really understood design at all, let alone responsive. I actually have a functioning Instagram clone already (minnnis com) and you can see how bad the mobile design is. I have copied your guide to rebuild the front page and it looks great. One thing I can't get quite working, which I cannot see how it works in your video - is the responsiveness of the carousel. You can see on your video that when you look at a single image on desktop it stretches. I would expect the same of the carousel, but I think by default it does not unless you select to "stretch columns to fill horizontal space". I have done that and not it works quite well, however the row height does not increase, so I have to scroll up and down within the repeating group when viewing on desktop. Any idea how to fix that?

@BuildingWithBubble Год назад

Happy to help. You could try playing around with the max height settings for all of your elements. If you're using a group with a column container layout, you could also look at setting the container alignment to the 'vertical stretch' option. Hope this helps!