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

Подписаться 4,1 тыс.

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

50% 1

I’m Jason and I teach non-technical people, like myself, how to build apps without writing one line of code!
This is the first video in a series that will teach you how to make an Instagram clone with Bubble. We also get a little crazy and use Bubble’s new Flexbox responsive design engine for the first time on this channel!
🔔 Subscribe for more no-code tutorials just like this: ru-vid.com...
⚠️ Don't forget to grab the link to this exact project so you can see it in Bubble! www.buildappswithoutcode.com/...
🚀 Do you need extra help with your no-code project and want to work with me directly? Let's chat! Go to www.buildappswithoutcode.com/....
🎥 Related videos:
How to build a mobile app - • How to Build a MOBILE ...
How to build an Instagram clone (Part 1) - • How to build an Instag...
How to build an Instagram clone (Part 2) - • How to build an Instag...
How to build an Instagram clone (Part 3) - • How to build an Instag...
How to build an Instagram clone (Part 4) - • How to build an Instag...
How to build an Instagram clone (Part 5) - • How To Build a LIKE Sy...
#nocode #bubble #buildwithbubble

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

27 июл 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

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

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 Год назад

Hats off to your teaching skills

@tmmerlo Год назад

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

@jacksondanielles3347 Год назад

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

@BuildAppsWithoutCode Год назад

Thank you! More to come! 🙌🏻

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

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

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

Thanks for watching! Part 2 coming soon!

@xDwTz Год назад

Appreciate your humour, good tutorial!

@djovaynedelacroix306 Год назад

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 !

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

Great tutorial! Thank you!

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

You're very welcome Rubens!

@MotorcyclesandArt Год назад

Thank you. Great video.

@BuildAppsWithoutCode Год назад

Glad you enjoyed it! 🙌🏻

@Riolamusicsession Год назад

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

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

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 2 года назад

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 8 месяцев назад

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 Год назад

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 Год назад

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.

@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?

@user-ql6gs9ro5f 6 месяцев назад

its posible make an app video in bubble? nice contend

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

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 8 месяцев назад

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.".

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

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 2 года назад

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 2 года назад

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

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

10/10 Pinky and the Brain reference

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

Used to watch it daily! 🧠

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

why didnt you showed us how you added data

@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 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.

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

Dumb question; How did you get the iphone template?

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

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 Год назад

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

@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! ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-WOMZ-fYaW-I.html

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

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

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

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 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-BDxrfgqPoso.html . Hope that helps!

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

Jason can I build an online auction with bubble.

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

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

@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.