DEV Community

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

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

andreocosta2 profile image Andreo Costa Updated on ・2 min read

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

Discussion (27)

Collapse
arishojaei profile image
Arman Shojaei

This is so cool man, please share its Github link

Collapse
andreocosta2 profile image
Andreo Costa Author

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 Author

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 Author

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
may4eto profile image
Maya

What did you use for the backend?

Collapse
andreocosta2 profile image
Andreo Costa Author

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 Author

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 Author

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

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
adeviss2 profile image
Alain Deviss

Is the code open source, is it for sale ?

Collapse
andreocosta2 profile image
Andreo Costa Author

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

Collapse
oggo profile image
oggo

Cool!

Collapse
andreocosta2 profile image
Collapse
jimmont profile image
Jim Montgomery

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

Collapse
andreocosta2 profile image
Andreo Costa Author

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
santosh profile image
Santosh Kumar

Is there a tutorial for this?

Collapse
andreocosta2 profile image
Andreo Costa Author

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
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
parkadzedev profile image
Michael Parkadze

Very Impressive, wish it was in react haha

Collapse
cantilux profile image
Enrico Cantile

A crazy project. Congratulations, really well done.

Collapse
fuenrob profile image
Roberto Morais

Very cool!!

Forem Open with the Forem app