Video Demonstration: How to build an Instagram-style app

Hey Bubblers!

Just finished part one of a video demonstration on how to build an Instagram-style app for images using Bubble! While this isn’t an exact clone of Instagram, it captures many of Instagram’s features such as uploading images, filters, tagging users, and more.

These video lessons are a part of CodeLess Academy’s iOS Development course, but can help anyone who is looking to add Instagram-like features to their app.

Some things I’ll demonstrate are:

  • Uploading images and applying filters to them
  • Assigning usernames and using them to log in
  • Following/unfollowing users
  • Tagging users in posts
  • Showing an Instagram-style feed

And more!

Part two will be coming in the near future, and I’ll demonstrate how to add even more functionality to the app! And of course, all updates come included with the purchase of the course!

4 Likes

Hey Nate,

I’m doing your instagram lesson now. I’m getting a problem though. I’m creating the new custom state “current-view” but I keep getting this error not found…

Any idea what I’m doing wrong?

Thanks.

Hey @jogo88,

From the looks of it, the custom state was deleted. Any chance you removed the custom state from your header?

you mean nav bar right? No, i just created the new custom state but right after I hit the create button, I keep getting that error. I don’t know why.

I think it’s because you may have created a custom state while editing ‘nav-bar A’ on the page, instead of creating a custom state within ‘nav-bar’ (the reusable element itself). If you create the custom state in the reusable element editor of ‘nav bar’, once you go back to the page with nav-bar-A, you should be able to reference the custom state. :slight_smile:

I was creating the custom state inside the condition tab on the page (or rather, group 'coz its a native app) with the nav bar. And I’m getting that error. If i create a custom state within the reusable element, what do I put in the condition tab? When nav-bar A (create the state) then what?

Wouldn’t that state be always like that if I use the nav-bar on multiple pages (groups)?

Thanks.

You can create it that way in a conditional statement in the reusable element ("when this custom definition --> create a new state… --> [create state] ), remove the condition, go back to the page editor and access the custom state in any conditional statement using “when nav-bar-A’s [custom state] is X”. But it won’t work by creating a custom state on nav-bar-A - only when you’re within the reusable element itself (nav-bar).

That worked! Thank you so much! But its is weird we have to do it that way… I would never have thought of that…

No problem! :slight_smile: You can also create the custom state in the workflows of the reusable element of course. But it’s a little faster setup the other way since in your case you only need to reference the custom state on the pages themselves, not when anything is clicked or happens in the navbar itself.

@natedogg is Part II coming? Looks like Part 1 was back in the summer.

Also, I noticed a bug on the edit profile view. If I go into that view and click “Done” I get the username is taken error, because it is searching and finding my username in the database, so there is no way to save the rest of the content in the profile due to the error.

Hey @jasonwojo,

There isn’t a hard timeline on Part 2 as of now. Definitely still on the list, but there are a few other lessons higher up in the pipeline that people have requested. Right now, I’m also putting out lessons as time permits, as I’m pretty busy at a startup that I recently founded.

If you’re looking for specific functionality/expanding what you’ve already got, I definitely wouldn’t mind chatting about what you’re trying to do. Feel free to shoot me a PM and we’ll talk.

Also, great find on the edit profile view. I just updated the workflows for that, so you won’t see that error anymore.

I don’t advise using these tutorials. They are extremely outdated and, as far as I’m aware, you do not get a refund after purchase.

Indeed, these tutorials are no longer updated, and are now offered for free on our website under “Legacy Courses” with a disclaimer.

We’ve left them up since they may still provide some value when thinking through how to build certain things, but we no longer offer support on them.

1 Like