Build Your Own Airbnb Clone - a No-Code Rental Marketplace

Chapters

• 00:00Intro
• 00:19What we'll build - an Airbnb clone with Stays and Experiences
• 01:26Choosing a rental marketplace template
• 01:54Setting up the front page
• 04:24Making the two listing types - Stays and Experiences
• 06:17Adjusting the signup form
• 08:16Creating two listings
• 09:21iCal sync, featured sellers, and how to adjust them
• 12:00Setting up Stripe Connect
• 13:29Making a test Stays booking
• 15:42How the deferred onboarding works from the seller side
• 16:37Making a test Experience booking
• 17:39Checking your transactions in Stripe as a marketplace owner
• 17:48Seeing analytics in Prometora as a marketplace owner
• 18:01Outro - build your own Airbnb clone

Intro

Hey guys, in this video I'll show you how to make an Airbnb-style marketplace with Stays and Experiences. We'll start by making the front page, then we'll set up all the logic in the back office, and then we'll actually go through the whole flow and make two bookings. So if you're considering making an Airbnb-style marketplace, this video is for you. Let's do it.

What we'll build

Okay, so here's what we're going to be building today. We're going to pick the rental marketplace template and call our marketplace Haven - so it's kind of like an exclusive, Airbnb-style marketplace. We'll start by customizing the homepage, and then we'll create two types of listings: Stays and Experiences. Stays are homes, so that's a per-night calendar with property types. For Experiences, we're going to make one experience - a horseback riding experience - which is per person plus date and time, and we're going to make a custom experience level.

Then we'll set up the signup form, where we'll ask for a little bit more than just the email. We'll create two listings, a Stays listing and an Experience listing, so we'll add photos, pricing, and availability. Of course, we'll set up the iCal two-way sync. We'll connect Stripe with our test keys, and we'll quickly go through how the deferred onboarding works. Then we'll make a live booking - request, approve, and pay - and we'll see the payout, and we'll get our 10% commission, which is the rate we'll set for this marketplace. Okay, let's do it.

Choosing a rental marketplace template

So I'm here on Prometora and I'm now picking my template. I could also go the AI route, but for now I'm just going to pick the rental marketplace template. So I pick that one, and the name is Haven, like this. Then we create the marketplace. Great. Now you can see we have our template here.

Setting up the front page

Out here we can make whatever page we'd like. Right now we just have a front page, an about page, and a contact page. Over here you can adjust everything for all elements by just clicking on an element and adjusting it. We're just going to make a front page today for our marketplace, and then we'll adjust the navigation. We'll drag and drop another component in here, and we'll probably also delete some of these ones down here.

We can do that to begin with. We're not going to use this one, so we delete that component. The FAQ - we're also going to delete that one. And this one - no, we keep that one actually, let's keep it. Now let's pick another image for the hero. So I'm uploading another image, and you can now see it here. Cool.

Now let's adjust the H1. I have another text here, let's add this one. And we also adjust the description text to this one: "Exceptional homes, unforgettable experiences. Discover handpicked private homes and curated experiences in the world's most beautiful places. Your next escape starts with Haven." Cool, good. Let's remove the quick searches there and save. We remove this one as well, and we keep this one.

This is a component where you can basically pull in whatever listing you'd like to show on the front page. Right now we don't have any listings, but I'll come back to this. Good. Let's change the link here to the signup, so when you click it, it takes you to the signup page, and we remove this one like that. Okay, good.

Now let's adjust the navigation. We add some links up here, we remove the one for the front page, we add one to the All Listings page, and we remove the ones for about and contact - we're not going to have those to begin with.

One thing I also want to add on the front page is featured sellers. Right now we have a featured listings component, which is this one, but let's also have a featured sellers one. So I click on the components, find the featured sellers component, drag it in here and drop it. Now you can see we can highlight some sellers here. Right now we don't have any sellers, but we'll come back to this. Let me publish that, and let's take a look.

Okay, so it looks like this right now. You have the H1, the hero image, then the featured listings - no listings are available because we didn't make any yet - and then the featured sellers. Good, let's leave it like this for now.

Making the two listing types - Stays and Experiences

Now let's go to the next part, which is setting up the two different listing types: the Stays listing type and the Experiences listing type. Let's do it.

I click down here on Store Settings, and it takes me to the back office, you could say. This is where I set up all the logic. If I go to the Listing Form, you can see we only have one listing type right now, which is just called "listing." Let's adjust that one and call it Stays. Then we add another one called Experiences. Good, so now we have Stays and Experiences.

For Stays, the pricing model is per-night with a calendar - that's the date range. Let's save that. For Experiences, the pricing model is per person, and the calendar is date plus time slots, so we pick that.

For Stays, we'd like to first have the iCal calendar sync, and we'd also like to add a custom field. So I click on "Add custom field" and add one called Property Type. That's a select type, and then I add the options: villa, estate, chalet, manor, or penthouse. Good, you can see it over here. We add a placeholder text, "Select property type," so you can see what it looks like, and we make this a required field, so you have to select it when you make a Stays listing.

Then for Experiences, I click on Experiences. We also add a custom field, and we call this one Experience Level - a select as well. We add the different options: beginner, intermediate, advanced, or all levels welcome. I make that a required field too, and add a placeholder text, "Select the experience level," so you can see what it looks like over here. Good.

Adjusting the signup form

Now for the host signup form, let's adjust that one. I know I wrote "list location, about, link," but I think we should just keep it simple. So we go to the signup form, and you can see what it looks like from both the buyer's and the seller's perspective.

First name, last name, and email are always collected. We don't need the phone number, so let's not have that one. Terms and conditions - yes, let's have that on, and you'd add the terms here, of course.

Buyer signup fields: we allow buyers to sign up. If we toggle that off, it would just look like this, but let's have buyers as well, and we can adjust the names right after.

Seller signup fields: business address, shipping address. The listing address is on the listing itself, so we don't need to ask for that right now. But let's add a custom field. We're not going to use the wizard here - if I click here, that would be a step-by-step one, but we're not going to use that, we just keep it simple. So I'm just going to ask, "How did you hear about us?" That's a drop-down, and I add the options: Instagram, Google, referral, other. You can see it here. Let's make that a required field. Good.

And as we were just talking about, "buyer" and "seller" sound a bit weird for an Airbnb-style marketplace, so let's rename them to guest and host. Cool, so now it's guest and host - that's better, right?

So now on the guest side, we're asking for first name, last name, and email, and they have to agree to the terms and conditions. On the host side, we're asking for first name, last name, email, business name (optional), and "How did you hear about us?", and they also have to agree to the terms and conditions. Then they can sign up.

Creating two listings

Now we go to our own marketplace and sign up, and we create two listings - a Stays listing and an Experience listing - and we set up the iCal two-way sync for the Stays listing. Let's do it.

So I go to my marketplace and click "View live." I go to the signup and sign up as a host. Now you can see it's asking me about all the fields we just added, so I go ahead and sign up.

You can see I then get an email with a magic link. I click the email, and now I'm in the seller dashboard area. If I go to "Create listing," you can see I can create two types of listings, Stays or Experiences. Let's make the Stays listing first.

Okay, so now I've added a title and a description, I've selected the property type, I've added two images, and I've also added the calendar sync - for two calendars, as you can see - so you cannot double-book in case I also made this listing on other platforms. By the way, if you go to the documentation and search for "iCal," you can see exactly how the iCal sync works.

For the availability, I'll add my availability. I just select like this and add these 50 days. Okay. Now we add the prices and create the listing. Cool, so now we have this one live.

Now let's also make the Experience listing. I pick Experiences, add a title and description, pick the experience level (intermediate), add one image, and add the price. Now let's add the availability - we'll do it quickly with the quick-fill here. We add these like this and then fill them, and let's say you can do it from 8 to 18 on all these days. So apply them, and I publish immediately and create the listing. Cool.

Now you can see we have these two listings published, an Experience listing and a Stays listing. Nice. So it looks like this - on the Stays category we have this one listing, and if I click on Experiences, we have this one. If I click into it, you can see all the details here, and you can book it, which we'll do in just a second. But let's also look at the Stays one. It looks like this. Nice.

Featured sellers and seller profiles

One thing I want to show you is that now we have a seller on the marketplace. First of all, we have the featured listings here, and you can see there are only two listings right now, so they're being featured on the front page. Down here you also have the featured sellers, where you as the marketplace owner can pick which ones you'd like to highlight. If you click on a seller, you come to their seller profile page, where they can write something about themselves, add their social media accounts if they want, and so on. Of course, this is also optimized for mobile.

From the seller's perspective, they can adjust all of this from their settings area. So now I'm logged in as the seller, and you can see I can add all the information I want to show on my seller profile page. Great.

Setting up Stripe Connect

Now we're going to do the last part. We're going to connect Stripe using our test keys to begin with, then talk a little about how the deferred onboarding works, so you can list before you onboard on Stripe as a seller. Then we're going to make one or two bookings, talk about the 10% commission and how to set that up, and then we're basically ready to launch our marketplace after all this testing.

Okay, let's go back to the Store Settings. I'm in the Store Settings and I go to the Payments area. Now you can see I can add my Stripe Connect keys here. I click here, and it asks me for the publishable key and the secret key. Let's add those two. I go to my Stripe account - I'm in a test environment, so you can see I'm in a sandbox environment. I click on Developers down here, then Overview, and you can see I can copy my publishable key and my secret key. So I'll do that now - I copy this one, and then I do the same for the secret one, and I click Save. Cool.

So now we basically have enough to start testing. If I scroll down to the bottom here, you can see I can set the commission rate. Right now it's 10%, but I could easily change it to 15. As I said before, we'll leave it at 10% for now, so I change it back to 10% and click Save.

A test Stays booking

Now we go to our marketplace again and sign up as a guest test user. I'm just going to sign up here. I then get the magic link. Cool. Now you can see I'm logged in as a buyer.

Let me go and browse the listings. Let's try to make a booking on this Stays listing. I pick a date from here to here - these two nights, sorry - and book them. Let's say we're two guests. I write a message and request to book. You can see it's pending approval.

The seller then receives this email: "You received a new booking request for this listing, for these dates, and this is the price." So let's respond to that. You can see the request here - I'm logged in as the seller. Now let's approve it. So I approve it, write a short message, "Looking forward," and confirm. Great.

Now the guest receives this email, as you can see, and the guest has to pay within 24 hours. I'm going to go ahead and pay now. It looks like this - you can see I'm logged in as the buyer, and I can click the "Pay now" button. Let's do that. Now I'm directed to Stripe, and I'm just going to add a test card here because we're just testing - we're in a sandbox environment. And I pay.

You can see it went through, so payment was received. The buyer receives this "Payment confirmed" email - payment is confirmed, and you can add it to the calendar. The seller receives this one, where they can see exactly when the booking is and how much they'll be making - they'll be earning $28 - and they can message the guest if they need to send more details.

How the deferred onboarding works

On the seller side here, when I'm logged in, you can see the upcoming bookings, and you can also see it in a calendar view. So here you can see that Rasmus will be coming to your place. In order to receive the money, the seller has to onboard on Stripe. You can see up here, "Connect Stripe now." So I try that. You can see it asks me for some personal details - again, we're just testing, so I'm going to add something. I select the account, agree, and submit. You can see Stripe is now verifying the account information, and I can then see all my money here in this new finance area, where I can also pay out to my actual account. Good.

A test Experience booking

Now let's also make a booking on the experience. I'm signed in as the buyer again. I pick a slot - let's do 9:30 to 10:30 - and book it. I'm one guest, and I write something and request to book. Good. I see my request here, it's pending.

The seller then receives this one: "New booking request - review and respond." Let's do that. On the pending request, I can see I can approve this one, so let's approve it. I'm not going to send a message, I just approve it. The buyer then receives this one - let's click and pay. Similar to before, I click "Pay now," and it redirects me to Stripe. Let's pay for this one. Great, that also went through.

The seller then receives this one: "Payment received for the sunset horseback ride through the hills," and he'll be earning $38.

Transactions and analytics for the marketplace owner

Now, for you as the marketplace owner, you can of course see all the transactions here on Stripe. You can see the two that just went through here. And if you go to your Analytics area, you can also see all the analytics for your marketplace - the total GMV, your take rate, commission, and so on.

Outro

So that's it, guys. I hope you found this video interesting. If you're considering building your own Airbnb clone, just go ahead and test out Prometora - there's a free trial. And if you liked this video, please give it a like and maybe subscribe to this channel. I hope you liked it, and I hope to see you in the next one. See you. Bye-bye.