DEV Community

Cover image for Making an Airbnb clone in Vue3 (Desktop + Mobile PWA) + Admin Backend
Andreo Costa
Andreo Costa

Posted on • Updated on

Making an Airbnb clone in Vue3 (Desktop + Mobile PWA) + Admin Backend

I think I just finished the Airbnb clone that I worked for over 4 months. My back is hurting, unshaved, eyes hurt, I can barely watch TV.
I had to make a desktop version and mobile version as well. Bonus, an installable PWA for both desktop and mobile.
And a backend for api ..

Alt TextAlt TextAlt TextAlt TextAlt TextAlt TextAlt TextAlt TextAlt TextAlt Text

Project is huuuge! remember; just one person as a hobby.
So; the project is written in Vue 3 with composition API, all the new stuff, all the bells and whistles.
Let me know what you think …

Demo client-side https://airbnb-cloudcdn.surge.sh/rooms/23049796

Not working if you use proxy vpn etc..

Animated GIF Screenshot https://dev-to-uploads.s3.amazonaws.com/i/lhs207ewg4tin3l7tuxk.gif

Demo mobile
Alt TextAlt TextAlt TextAlt TextAlt TextAlt TextAlt TextAlt TextAlt TextAlt Text

Top comments (30)

Collapse
 
worawat101 profile image
Worawat Kaewsanmuang

Ohh, man! the UI build is just awesome. Will definitely follow this article and build an Airbnb clone app of my own using Vue. The UI dashboards just look spectacular and the features are also mesmerizing. I love this. Thanks for sharing this. And also, you should check out the Flutter Airbnb app templates if you are looking for a mobile app alternative.

Collapse
 
may4eto profile image
Maya

What did you use for the backend?

Collapse
 
andreocosta2 profile image
Andreo Costa

Custom build with firebase for db and prime-vue for the html and css components.

Collapse
 
may4eto profile image
Maya

So you don't need a backend language like PHP or Python or Ruby?

Thread Thread
 
andreocosta2 profile image
Andreo Costa

No, both the admin and client front-end are hosted on free stuff like surge. as for the DB , firestore is used. Authentication is Auth0
smtp is my google account with smtp.js
phone validation is namsor
ip geolocation is IpGeolocation, free
etc..

Thread Thread
 
andreocosta2 profile image
Andreo Costa

Admin is made with sigma-vue, a vue 3 admin template with components included
github.com/primefaces/sigma-vue
Database is firebase/firestore

Thread Thread
 
eddie_v_55ab8c4bfe2d3e28d profile image
Eddie v

Hey Andreo, Great job on the AirBNB clone you developed. Is the code available in a repository or available for purchase? Let me know how i can contact you and we can discuss further.

Collapse
 
arishojaei profile image
Arman Shojaei

This is so cool man, please share its Github link

Collapse
 
andreocosta2 profile image
Andreo Costa

right now I can't, I have a few offers to sell the project and it wouldn't be right if I open sourced it. Let's see ...

Collapse
 
jimmont profile image
Jim Montgomery

Why not just start a paid service with it if it's not open source?

Thread Thread
 
andreocosta2 profile image
Andreo Costa

what do you mean ?

Thread Thread
 
jimmont profile image
Jim Montgomery

Is this a commercial product? Can I post my listing or rent a place now? If not perhaps do that? It sounds like you're commercializing the software currently--by selling it with licensing, etc.

Thread Thread
 
andreocosta2 profile image
Andreo Costa

No, this is just a clone of the airbnb. To see if I can do it . I cant use it as a real thing because it's the airbnb's design, logo, writings, etc..

Thread Thread
 
jimmont profile image
Jim Montgomery

If you work with others apply design variations to not conflict with copyright (etc), and to create and maintain the serivce, it is possible to monetize this effort. If you are interested in creating additional revenue streams, this can be useful. And if I can provide more info and participate just send me a message. AirBnb could use competition I imagine anyway.

Collapse
 
adeviss2 profile image
Alain Deviss

Is the code open source, is it for sale ?

Collapse
 
andreocosta2 profile image
Andreo Costa

I just want to see if there are people interested in the project.

Collapse
 
jimmont profile image
Jim Montgomery

What motivated this work? How will you monetize and use it?

Collapse
 
andreocosta2 profile image
Andreo Costa

I just like the Airbnb design and I had to depart from Vue 2 somehow. Last year I learned Vue in general and the best way, in my opinion is to learn the basics and start a project by yourself. Youtube is filled with notes or todo apps tutorials. As for the monetisation.. you can just change the logos some css and be used as yet another hotel/ real estate/ vacation rentals app.

Collapse
 
oggo profile image
oggo

Cool!

Collapse
 
andreocosta2 profile image
Andreo Costa

thanks

Collapse
 
cantilux profile image
Enrico Cantile

A crazy project. Congratulations, really well done.

Collapse
 
rados51 profile image
Rados51

This is craaaaaazy. Cool work!

Collapse
 
pricealvinakfrhl16 profile image
pricealvinakfrhl16

Hi bro, can we speak in private?

Collapse
 
jimmont profile image
Jim Montgomery

Andreo is this available on Github or somewhere to repurpose and what is the licensing? Feel free to message directly with this info.

Collapse
 
michaelparkadze profile image
Michael Parkadze

Very Impressive, wish it was in react haha

Collapse
 
santosh profile image
Santosh Kumar

Is there a tutorial for this?

Collapse
 
andreocosta2 profile image
Andreo Costa

I cant make a tutorial because the project is too big. The source folder has 803 files in it. Each file is packed with code. that's one project and then there's the admin which is not that big because I used components from prime-vue but it's half of that.

Collapse
 
kaeson profile image
Kaeson

Have you open sourced the project, or is it available to purchase?

Collapse
 
kaeson profile image
Kaeson
Collapse
 
fuenrob profile image
Roberto Morais

Very cool!!