63
loading...
Creating an Airbnb clone
Airbnb is one of the most successful products and is widely used across the world. It fits under the marketplace category and therefore we decided to recreate it on Canonic. The goal was simple:
We'll show how easy, fast and flexible it is to build your production-ready backend in less than 25 minutes. What are we waiting for then! Go to app.canonic.dev and Log In. If you don't have an account, Signup! It's free to use under very generous limits! After you log in, you'll come straight to the dashboard.
Create a New Project *by clicking on the *+ Create New button on the top.
After you click, you'll be presented with the options to name your project, select which category it belongs to, etc.
After filling in the details, click Next. It'll present you with 3 options for the Database Configurations. Since we are making a new project from the start, we'll select the first option Create, where canonic will automatically provision a database for your project!
Hit Create, and your new project is created! You can find more about creating a project here.
Now as per our requirements, we have 5 main points of information that we need to make the backend for our Airbnb marketplace:
In database terms, we can think of them as tables that will hold all the information related to them respectively. Let's start defining them! Once you fill in all the information, you'll see an option to create a table:
Enter the name: User. We'll choose the type of the table as Identity since we want to allow users to login via Facebook, Google, etc, and store all user information in one place. Hit Create!
Click on the + Field option to add attributes to our table. A panel will come up from below, where you can set, what type the field should be, its name, etc. Different types are available for different needs like: TEXT, NUMBER, DATE, IMAGE, etc. You can see some system-generated fields automatically for you! + Fieldset option allows you to group certain fields for better structuring of the CMS.
We'll define 4 additional attributes to our table, the rest are pre-created and available on Canonic as system fields: You can also set default values for your fields, setup validations if you like, etc.
Here is how to create a TEXT field type under the name Phone Number.
Create Email Verification as a FIELD SET and then add the Date and Time fields as DATE and TIME field types. Your graph should look like this:
Next, you can click on the + Table option and create a table called Listing and set table type as a LIST
Listed below are the attributes required apart from System Fields pre available in the Listing Table.
Click on the + Field option to add all the above-mentioned attributes to the Listing table. I'm sure you have an idea of how to create and choose field types by now.
Here's how to create a PICKER field type for the Type of Listing attribute.
Click the edit options button on the bottom left to add types of listing
Here's how to add a TOGGLE functionality to your table for some of the properties
This is what the final Listing Table should look like.
Next, you can click on the + Table option and create a table called Reservation and set table type as a LIST.
Listed below are the various field types you can define for
the Reservations Table. You can also set default values for your fields, set up validations if you like, etc.
the Reservations Table. You can also set default values for your fields, set up validations if you like, etc.
This is how your graph will look like:
Next, you can click on the + Table option and create a table called Listing Review and set table type as a LIST
Listed below are the attributes required apart from System Fields pre available in the Listing Review Table.
This is how your graph will look like:
Next, you can click on the + Table option and create a table called Guest Review and set table type as a LIST. Listed below are the attributes required apart from System Fields pre available in the Listing Review Table.
This is how your graph will look like:
Next, you can click on the + Table option and create a table called Wishlist and set table type as a LIST. Listed below are the attributes required apart from System Fields pre available in the Wishlist Table.
This is how your graph will look like:
Once your graph is complete just go ahead and hit Deploy
Canonic will:
You can find more documentation on modeling your content here.
Navigate to the CMS to start entering or managing the data!
Once you deploy your project, all the CRUD APIs are also deployed and are there to use straight-up for you. If you head to the DOCS tab, you'll be able to see all necessary information needed to fetch your data over REST and GraphQL Endpoints. You'll be able to see:
Hope this guide was helpful and we are excited to see you built your Airbnb App using Canonic. If you want you can also duplicate this project from Canonic's sample app and easily get started by customising it as per your experience. Check it out app.canonic.dev.
You can also check out our other guides here.
Join us on discord to discuss or share with our community. Write to us for any support requests at [email protected]. Check out our website to know more about Canonic.
63