Wanna know how I cloned one of the world's best UI/UX android Applications?

Vinod Kumar C
4 min readJul 16, 2021

Ok let’s start with, what is the app name?. The original App name is AIRBNB but I kept the cloned App name as FLAIRBNB isn’t it fun😁. let’s get into the actual story, my name is Vinod Kumar C. from Bengaluru. As I was about to graduate from Masai School, I was challenged to design a complex UI/UX App called Airbnb as I was a bit poor in-app UI designings, so I accepted the challenge and started working through it.

The Complete App Navigations — Used the JETPACK NAVIGATIONS

In the beginning

I started using the original app, in the original, they are using the complete material design as I was very far from the design, I started thinking about how to do these designs, I went through the various helper platforms like Mindorks, Stackoverflow and finally found-out some solutions which do not make any sense at the start, but after going through the complete code walk got a better understanding about the UI/UX components and also understood how to make a material prototype for a complete project. Then I started to gather all the resources needed to implement and make a note of step-by-step procedures needed to make such design.

Wondering who challenged me

It’s none other than Vinod Kumar C (it’s Me LOL). Yes as I was much better at backend stuff, but I haven’t taken a chance to design the complex layouts before, but this time I took it as a challenge and the results are like…never mind. Just see the below screenshots. (zoom out a bit for better view)

Now let's talk about the tech stuff

The best thing about this project is, whatever I learned from the Masai School till now was put together as a compressed zip file and showcased in form of this project.

Tech-Stacks used

  1. Jetpack Navigations — one Activity, many Fragments.
  2. Kotlin and Java — used a 9:1 ratio.
  3. Firebase — for storing real-time data and authentications.
  4. Firebase Storage — for storing real-time photos.
  5. GoogleMap Sdk — for place locations. (The Most Difficult Part)
  6. MVVM Architecture — for better development.
  7. Dagger Hilt — for simplified dependency injections.
  8. Material Designs — for the backdrop, buttons, and cards.

Key Features Included

  1. Users can see all the nearby places and book whichever they want.
  2. Users can host their place to make money.
  3. Bill exporting to Pdf and Screenshot.
  4. Secure payment gateway (Razor Pay).
  5. Handy to use.

Let's see more screenshots.

Journey

Well, I was all alone developing so no restrictions no rules. As working in a single-minded environment, results came very much positive I was able to implement the new SDKs in a very short span of time.

Finally

I just want to say thanks to the Masai School and the Masai team for their continuous support, and for making me a Full-Stack Android developer.

Source Code and Build Apk

Github Link (v-1.0): FlairBnb Repository
FlairBnb 1.0 APK : FlairBnb Apk
App walk-through: Complete Walk-Through

Thank You for your precious 5 min, never mind my English you can’t expect more than this from a vernacular medium guy.

THANK YOU.

Feel free to contact me with any doubts.

--

--