How to build an Instagram CLONE in Bubble - Flexbox - Bubble tutorial (Part 1)

Поделиться
HTML-код
  • Опубликовано: 21 окт 2024

Комментарии • 50

  • @BuildAppsWithoutCode
    @BuildAppsWithoutCode  2 года назад +3

    Thanks for watching! Don't forget to grab the link to this exact Bubble app so you can see exactly how we built it. Get it here www.buildappswithoutcode.com/instagramclone

  • @Rahul_bhusan
    @Rahul_bhusan Год назад +3

    Hats off to your teaching skills

  • @jacksondanielles3347
    @jacksondanielles3347 Год назад +2

    Probably wouldnt have figured bubble out without ur tutorials! Wonderful teacher, thank you 😊 💗

  • @djovaynedelacroix306
    @djovaynedelacroix306 Год назад +3

    Hello, incredible video ! But there is something I don't get. At 12:07, when you create images, I don't see you uploading any images and yet when you go to preview, you have images of several dogs. Can you help me with this ? I tries to upload images but I can only upload one ... Thank you !

  • @Orangez2z
    @Orangez2z 2 года назад +2

    That's an awesome video! Liked it very much. Waiting for the second part. Thanks~

  • @tmmerlo
    @tmmerlo Год назад

    Fantastic video. One of my favorite bubble tutorials I have ever seen (and I've watched a LOT of them). Thank you.

  • @xDwTz
    @xDwTz Год назад

    Appreciate your humour, good tutorial!

  • @rhkina
    @rhkina 2 года назад +2

    Great tutorial! Thank you!

  • @yashodhanbhatawdekar5175
    @yashodhanbhatawdekar5175 2 года назад +4

    can you please make an updated video from the start where you added the data types? Also how did you add those dog images and usernames, in mine the preview shows no images or usernames..im a beginner in bubble so help would be appreciated.

    • @BuildAppsWithoutCode
      @BuildAppsWithoutCode  2 года назад +5

      Hi Yashodhan, make sure you set the 'Type of Content' on 'Group post-username' to 'Post'. If you don't set a type of content on the group, you won't be able to pull data into it.
      The data types we used are 'User' and 'Post'. The custom field names and field types I used are below:
      User-->
      Fullname (text)
      profile-picture (image)
      username (text)
      Post-->
      Caption (text)
      Image (image)
      User (User)
      Also if you want access to this exact Bubble project go to www.buildappswithoutcode.com/instagramclone. You'll be able to see the data types and everything else. Hope this helps!

    • @H3NRY_B
      @H3NRY_B 11 месяцев назад

      I don't understand how to implement this from your instructions here. I have started with this video and using bubble today so excuse my ignorance but would you mind helping me understand how to export the info you have from the read only file? It says I can't currently as I am not an admin.@@BuildAppsWithoutCode

  • @simon.stjohn
    @simon.stjohn 2 года назад +1

    Hey Jason...Awesome video...I like your pace...explains everything without laboring....I have a basic Bubble exp but I could keep up. Question: If I were wanting to build for desktop and mobile, would I just start with a page at say 1280 and keep the guts at 960 max width maybe? Just a bit confused how to recreate this if I also want it to work on desktop. Appreciate your feedback.....And great style too!

    • @BuildAppsWithoutCode
      @BuildAppsWithoutCode  Год назад +1

      Hi Simon! When designing for desktop and mobile I usually use a 1280px width for the UI builder. This gives me enough space to design for desktop. Then I test all screen widths as I go from large desktop to mobile. Usually there is a lot of conditions involved to make things look good on desktop and mobile. You can use conditions to show and hide different elements or change padding depending on the page width.
      E.g. You might have a separate navigation menu on mobile that only shows when Current Page Width < 640.

  • @Riolamusicsession
    @Riolamusicsession Год назад +1

    Hello great teach I love your tutorial so much best ever, pls help me with a video how to make current user view other user profile from the home page or from any page the current user is

  • @MotorcyclesandArt
    @MotorcyclesandArt 2 года назад +1

    Thank you. Great video.

  • @yzwstore532
    @yzwstore532 Месяц назад

    hello , thank you for your teaching skill.
    But why when i add "username Current username" function and repeatinggroup Stories the whole avatar and name are not shown. can you help me. i did all the steps correctly and it stopped there

  • @H3NRY_B
    @H3NRY_B 11 месяцев назад

    Thank you for help. I am learning how to do this for my MSc Leading in a Digital Organisation module, I am currently stuck at trying to add the condition onto the user's profile pic and text. When I type "1" the only option I am met with is "Desktop (1200 px)" do you understand why?

    • @H3NRY_B
      @H3NRY_B 11 месяцев назад

      I found that I had to type "1." for it to work. This was the same for truncating the text to 8, I had to type "8.".

  • @yely6955
    @yely6955 Год назад

    I have created my own data types same as yours, putting multiple entries but when I preview, It only shows 1 user in repeating group, why is that?

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

    its posible make an app video in bubble? nice contend

  • @jesusdcbernal710
    @jesusdcbernal710 2 года назад +1

    Sorry for asking but is this a native app or a web app ?

    • @BuildAppsWithoutCode
      @BuildAppsWithoutCode  2 года назад +1

      Good question! It's a web app, but it could also be a native app if you 'wrap' it. You need a third party service to wrap it before you send it to the Google Play or Apple App Store. I talk a little more about how to make a native app in this video ruclips.net/video/BDxrfgqPoso/видео.html . Hope that helps!

  • @philcote5857
    @philcote5857 2 года назад +2

    10/10 Pinky and the Brain reference

  • @H3NRY_B
    @H3NRY_B 11 месяцев назад

    I just don't understand how at the point of 17 mins in Bubble knows who is the current user? How do you set this part up?

  • @edwardbiolandes4690
    @edwardbiolandes4690 2 года назад +1

    Can you please help me to build a simple app. I have an event coming and I want to make data entry easier. Client arrives to the stand, he enters his name, email, phone number, his title, company name. I would like to know if all this data will be saved somewhere that I can use later. I usually do this manually but i'd like to use a tablet where the client can enter his own details. That will save me a lot of time and make my work more efficient. Thank you in advance.

    • @BuildAppsWithoutCode
      @BuildAppsWithoutCode  2 года назад

      Hi Edward, feel free to email me at jason[at]buildappswithoutcode[dot]com and we can chat.

  • @wt1272
    @wt1272 2 года назад

    hello please, how did you add those dog images and usernames, in mine the preview shows no images or usernames. I'm completely lost

    • @BuildAppsWithoutCode
      @BuildAppsWithoutCode  2 года назад

      Hi WT, are you asking how I populated the database with test users and posts? Go to the Data tab and then to 'App Data'. Here you can click 'New Entry' and add test data.

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

    why didnt you showed us how you added data

  • @ismailakbar6449
    @ismailakbar6449 2 года назад +1

    Jason can I build an online auction with bubble.

    • @BuildAppsWithoutCode
      @BuildAppsWithoutCode  2 года назад

      I don't see why not! You can build basically anything with Bubble.

    • @ismailakbar6449
      @ismailakbar6449 2 года назад

      @@BuildAppsWithoutCode Thanks for your reply Jason. Just one more question. If you build a technology startup and it becomes hugely successful, would it hurt your chances to sell the company to buyers if your product is build with a 3rd party platform like bubble or would they not mind.

  • @tn1st55
    @tn1st55 2 года назад

    Dumb question; How did you get the iphone template?

    • @BuildAppsWithoutCode
      @BuildAppsWithoutCode  2 года назад +1

      Not dumb! I use Google Chrome Developer Tools, and then turn on responsive mode, and then use the iPhone 6/7/8 Plus emulation device. It might not be there by default, click Edit to find it if you need to.

  • @jk9999999able
    @jk9999999able 2 года назад

    how do you make the page responsive? i dont see the option

    • @BuildAppsWithoutCode
      @BuildAppsWithoutCode  Год назад

      This app specifically is built for mobile only, so it is not responsive. I have another video that explains how to build using the responsive editor which might help! ruclips.net/video/WOMZ-fYaW-I/видео.html

  • @bretthorowitz6136
    @bretthorowitz6136 2 года назад +1

    What happened to the AirBnb app??

    • @BuildAppsWithoutCode
      @BuildAppsWithoutCode  2 года назад +1

      Haha I’ll do another one soon! Seems to be a popular one! 🙌🏻

    • @Lifeofbpw
      @Lifeofbpw 2 года назад +1

      @@BuildAppsWithoutCode how about building tripadvisor

    • @BuildAppsWithoutCode
      @BuildAppsWithoutCode  2 года назад

      @@Lifeofbpw I'll add this one to my list!

    • @numetalforchrist
      @numetalforchrist 2 года назад +1

      @@BuildAppsWithoutCode hey can u help me create an app tiktok clone app

    • @BuildAppsWithoutCode
      @BuildAppsWithoutCode  2 года назад

      @@numetalforchrist yes I can! I'll send you an email.

  • @u_walk2251
    @u_walk2251 8 дней назад

    wait what ?

  • @jasonmasina
    @jasonmasina 2 года назад +1

    Sup Ellie 🐶🐾