How To Build A Tinder Clone With No-Code Using Bubble (2024 Flexbox)

2024 UPDATE - INCLUDING FLEXBOX RESPONSIVE DESIGN
In this video, I'll be walking you through the step-by-step instructions to build your own dating app like Tinder without writing a single line of code.
Follow along as I take the time to carefully explain the necessary workflows to create your own Tinder clone app in Bubble.
From registering user accounts, updating user dating preferences, allowing users to swipe through potential matches, displaying a full list of successful matches, then building a direct messaging feature - 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:18 -Course overview
5:42 - Creating a custom Tinder database
31:35 - Building the home page
1:42:52 - Creating a match
2:07:25 - Additional insights

[@hnnhml]

This is soooo helpful and to the point, thank you so much!

[@BuildingWithBubble]

Awesome to hear 🙏

[@vincentchin88]

I thoroughly enjoyed your tutorial. I watched it over a span of few days.

[@BuildingWithBubble]

Awesome to hear! Glad it could help.

[@vey134]

Added to the watchlist.

[@abhijeetdoshi332]

Thanks for the awesome tutorial!!

[@BuildingWithBubble]

Appreciate it ✌

[@danielgandara5719]

Amazing man!

[@BuildingWithBubble]

🙏🙌

[@hammedakindunbi]

Thanks, thanks, thanks. You make bubble easy to learn.

[@BuildingWithBubble]

Always glad it can help ✌

[@viniciusnoyoutube]

Excellent tutorial!

[@BuildingWithBubble]

Glad it could help 😎

[@Officialchens]

Hi first of all thanks for your tutorial. It is very helpful! Learned a lot from it and going to purchase. I have 1 tip to give you and that is to show us some previews in between after adding something so we can visually see what you did. It would be very helpful to do some checkpoint and show us some previews of what you did. Thanks!

[@BuildingWithBubble]

Glad it could help! And great suggestion, I'll be sure to include these throughout any future tutorials 🙌

[@leonardiux345]

Nice 👍

[@BuildingWithBubble]

Thanks 🙏

[@thatpsychologyguy]

I came. I saw. I subscribed. But Dude, can you build a playlist where in a learning track is laid out for us?

[@BuildingWithBubble]

That's a great idea! Happy to compile this together 👍

[@mattball7074]

Thanks a lot for this. Are there future courses/steps available? i couldn't find it on your site I dont think. My goal is to have a sort of foundation that I can then hire people to play with for my own customized company. As I went over the steps I added my own thing in some places haha Thanks again

[@BuildingWithBubble]

You can get access to the full version of this course through the link in the description of this video 👍

[@mireyapolitron7880]

Hello, great video! I actually purchased the full course but do you know how I could reset a limited amount of users shown or likes given by day? I have a limit but I haven’t been able to forgive out how to display another set of user after a day passes

[@BuildingWithBubble]

Good question. Happy to help. You could create a data field under your user data type called something like 'daily limit' and set this field type to be a number. You can even set a default value of this to be 100. Then, each time a user swipes on a user, you could add an additional step within the workflow to increase the count of their daily limit by '1'. So this would be 'the current users daily limit +1'. Then if you'd like this limit to reset every day, you could use what's known as a backend workflow to reset the 'daily' limit for every user at midnight. Backend workflows are a slightly advanced feature, but it'll help you create the experience you're looking for. Hope this helps point you in the right direction!

[@hubapptechnologies5708]

Hi mate, thank you for your video and tutorial. I am wondering to ask you how to set up geolocation-based as parameter to identify users close by and match them. I need to create a match based on users geolocation. I look forward to hearing from you. Thank you in advance.

[@BuildingWithBubble]

Happy to help where I can. Did you get a chance to watch this full video? When I build the home page, I add a geolocation filter on the data source for the Tinder pile element. This ensures that users are only shown user within a proximity someone sets.

[@theaetelier7846]

Very cool! Do you think it would be possible to make 3 modes like in Bumble? (Dating, friends, and business)

[@BuildingWithBubble]

Yes, this would definitely be possible with Bubble 👌

[@GeofferyNnalue]

Hi, trust you are good, is your video course(tinder clone) in line with the new flexbox engine?

[@BuildingWithBubble]

Yes, this full course is built entirely using the updated Flexbox engine ✌

[@toungewithgills1]

Thank you for the tutorials. I am intrested in making a adult friend finder clone website.

[@BuildingWithBubble]

Glad they could help! The possibilities in Bubble are endless.

[@Fernandogordilloramos]

I understand that managing large lists within a field becomes a nightmare if they exceed more than 100 records. If a user who chooses several users that he likes a day, say 20, in a matter of a few weeks he would easily exceed 1000. Then the question arises. The only way to filter users is with a list?

[@BuildingWithBubble]

If you really wanted, you could create a dedicated data type for any entry that might form a long list. For example, you could create a dedicated 'like' data type. Within this, you can add a series of data fields to determine who the liked user is (the current Tinder pile's user), as well as who the person is that liked this person (the creator of the event). Then, you could perform a search through the likes where the creator = the current user, and the liked user = the Tinder pile's current user. Hope this helps 👍

[@miszerrr300]

nice, thanks for film but how to create register page ?

[@BuildingWithBubble]

Hey, I cover this within the full course. You can get access to this through the link in the description 👍

[@pemakhunjuju2406]

can you help me with, how to add a pile of demo user decks, cause when I do it its just blank

[@BuildingWithBubble]

Happy to help. When I preview the home page of the app, I personally like to remove some of the constraints within the data source. Things like the location constraint will obviously limit which users are displayed. Try and remove these constraints, run another preview of your app, then see if your demo accounts are displayed.

[@pemakhunjuju2406]

@@BuildingWithBubble appreciate on it, as I might have not come out clear, how to add multiple demo users' profile

[@pemakhunjuju2406]

ll be waiting ;)

[@roneilboodie6735]

Love the tutorial. Just have issues with the users show up on the home page!

[@BuildingWithBubble]

Glad it could help! And I'm under the impression the issue might be caused by a default privacy setting that Bubble recently added to the user data type. If you watch from the 9:35 mark of this video (kzbin.info/www/bejne/qYXHe2SJj758ndU), it'll explain how to remove this privacy setting. Hope this helps!

[@roneilboodie6735]

@@BuildingWithBubble others told me it was that issue but I removed the privacy rules on the user data type and it is still not displaying data of the other users

[@BuildingWithBubble]

​@@roneilboodie6735 The only other thing you'll need to keep in mind is all of the constraints under the data source of the swipe pile. If you're filtering users by their sexual preferences, age, gender, and location, you'll need to make sure that there are in fact users in your app that meet all of a persons preferences. If there isn't, no users will be displayed.

[@roneilboodie6735]

@@BuildingWithBubble this makes sense. I am creating a landing page to register test users so I can have those details and see if it’ll populate with the given constraints I have currently

[@roneilboodie6735]

@@BuildingWithBubble Reviewed and removed my location constraint but still no users being shown. Sorry for the back and forth

[@macchese12]

is this feasible with the free plan as well?

[@BuildingWithBubble]

Yes, you can build this using Bubble's free plan 👌

[@abeldesalegn5432]

iloveyouuuu..

[@BuildingWithBubble]

Right back at you 😘

[@gauthammr3171]

Can we publish it after creating it?

[@BuildingWithBubble]

Yes, publishing an application is a relatively straightforward process. I'd recommend checking out this great tutorial from Bubble that walks through the steps involved: kzbin.info/www/bejne/Z3fOf2ugrbeshMk Hope this helps!

[@eseabeke6210]

Hey, tried purchasing your course but my card got declined. Can people from Nigeria buy your course through debit cards?

[@BuildingWithBubble]

Hey Ese, I'm under the impression you shouldn't have any issues buying it within Nigeria. Feel free to shoot me an email at [e-mail] and I'd be happy to help 👍

[@hammedakindunbi]

Are you able to buy this course from Nigeria?

[@CGRealStudios]

Can this be published on Android store and IOS store?

[@BuildingWithBubble]

Great question! Yes, you can publish apps built with Bubble to both app stores

[@solan5331]

Hi. How can I contact you for business purpose?

[@BuildingWithBubble]

Feel free to shoot me an email at [e-mail] ✌

[@robbuc8000]

Hi, do you sell the Clone?

[@BuildingWithBubble]

Hey Rob, unfortunately I don't sell templates. I found that templates can often add more confusion into the picture. Learning how to build and manage an app from the ground up is the fastest way to build and iterate on the product.

[@Superfacilito]

Duolingo clone? Please!

[@BuildingWithBubble]

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

[@Superfacilito]

@@BuildingWithBubble gamification system

[@tohyuliang503]

Hi! Thanks for the awesome tutorial. Is easy to follow. by the way is there any way to contact you if we have further questions or enquiry regarding this tutorial?

[@BuildingWithBubble]

Glad it could help! Feel free to reach me at [e-mail] ✌

[@tohyuliang503]

Hi, I have sent in a contact me forms on your website. May I check did u receive it?

[@BuildingWithBubble]

@@tohyuliang503 Just responded ✌

[@Moonlight-dg9wq]

How do I add other users cause I only see my profile in a tinderpile after i have filtered myself my tinderpile is now empty

[@BuildingWithBubble]

@@Moonlight-dg9wq Hey, you'll just need to make sure you have a user in your app that matches all of the desired settings from a persons profile (e.g. their location is within a certain distance, they're between a certain age range, etc). It could also be worth double-checking to make sure your user data type doesn't have a privacy setting added to it by default. Hope this helps!