In this blog post, you'll learn how to create a Full Stack Airbnb Clone using Amplication.
This blog post is a part of my Youtube video. Check out the amazing video.
Amplication is an open-source development tool designed to simplify and expedite the process of building web applications. With its user-friendly interface and a wealth of features, Amplication empowers both developers and organizations to create robust and scalable applications quickly, saving valuable time and resources in the process.
The platform is centered around the concept of a low-code development environment, which allows developers to build applications by configuring and connecting pre-built building blocks rather than writing code from scratch. This approach dramatically reduces the amount of manual coding required, enabling teams to focus on creating business logic and delivering a polished end product.
Clone this git repository to get starter files for the Airbnb Clone.
Head over to amplication login and connect your GitHub.
Now you need to create a service for amplication which in turn generates your backend code. Give it a meaningful name.
We are going to name it AirBnb and hit continue.
Now you need to connect with Git. There are various options available, but we are going to use Github as our Git provider.
After you connect with GitHub, you need to select a repository. Select the Airbnb repo.
Now hit continue.
In this step, you can enable the options for support of the GraphQL API, the REST API & Swagger UI, and the Admin UI provided by Amplication.
We are going to enable all the options here. Though we will not be using the GraphQL API for the app, for demo purposes, we are enabling it.
We are going to use the REST APIs throughout the AirBnb clone. Also, we will be using Swagger to test out the API's.
Amplication provides two types of structure for the generated code.
We are going to use the Polyrepo option for this project.
It will generate two folders at the root of our repository, named server and admin-UI
Now hit continue.
Amplication provides three types of databases at the moment.
Amplication generates the service with all the required configuration and code to start working with a DB.
You can easily change the type of the DB later on the plugins page. For this AirBnb Clone, we are going to use the PostgreSQL DB. Now hit continue.
Amplication provides two options for your entities.
You can start from scratch or select a demo template.
We are going to select the empty option here.
Hit continue.
Amplication provides an inbuilt auth module that pre-generates code for your authorization and authentication.
For this, Amplication provides two options:
For our AirBnb clone, we are going to use the auth module provided by Amplication, so we are going to select the Include Auth Module Option.
Now hit continue
All the initial setup is done, and now Amplication will generate the code. Wait for it to generate. This may take a minute or two.
After the code is generated, you can see on the following screen that the code has been generated.
Now you select the view my code button, and it will redirect you to the GitHub Page.
Now after every change in the Amplication service, it will generate a new pull request that needs to be merged in Github with our code.
Now on the GitHub Pull Request page, you have to merge the code with the Merge Pull Request button.
You can also check the code generated by Amplication by clicking the Files Changed Option.
This will show you all the code generated by Amplication.
Now head over to the amplication tab and hit continue. You will see the success page.
You have successfully set up your Amplication app.
Now click on create entities option to create entities.
Entities are like tables in DB.
Now there is a predefined entity here which is for users in your application.
We will be using four entities in our AirBnb Clone:
Now click on Add Entity button in Top Right Corner
On the new Entity Modal screen, type listings as the name of the new entity and hit create entity.
Now you will be redirected to the listings entity details page.
From here, you can add new fields to your entity or even give granular permissions to the entity according to the roles.
Now from here, we need to create some fields that we are going to use for our AirBnb Clone.
Click on the add field button.
Write the title as the name and click on + right beside it. You can see that the new field is created, and there are various options to configure.
We are going to mark this field as required
.
Also, we will select the Data Type as Single Line Text
from the dropdown.
Amplication provides various Data Types according to your needs and takes care of the constraints on your code as needed according to the data type.
Now amplication auto-saves everything after each change, so your selections are already selected.
Do the same process for the description, but for the datatype, we will change it to Multi Line Text
.
This field will store the type of location of the listing, whether it is a house, flat, bungalow, etc.
Do the same process as we followed for the title field.
This field will store the details like if there is a full room in this place, if this place is shared, etc.
Do the same process as we followed for the title field.
This field will store the price of the listing.
For the datatype, we will use the Whole Number
type.
The minimum and maximum values would be set by default. We do not need to change it.
This field will store the map coordinates for the Mapbox to load the specific location with the accurate marker.
For this field, we will select the datatype as the Json
type because we will have JSON data inside of it.
This field will store the location Data like the pincode, address, city, etc.
This will be a Json
data type.
This will store the total number of rooms and total guests the place can have.
This will be a Json
data type.
This will store the links to the photos for the listings.
This will be a Json
data type.
This field will store the data of the user that created this listing. This would be related to the User entity. Select the data type as Relation to entiity
.
In the Relation Entity Dropdown Select the User
Entity.
And select the One 'listings' can be related to one 'listingCreatedBy'
option. This means that one user can create many listings.
That's it. With this, we have created our listings Entity.
This entity will store the wishlists of the user.
This will store which user has added the listing. The data type will be Relation to Entity
with the user, with the One 'wishlists' can be related to one 'user'
option toggled.
This will store which listing has been added by the user. The data type will be Relation to Entity
with the user, with the One 'wishlists' can be related to one 'listing'
option toggled.
That's it for the wishlists entity.
This will store the trips that have been booked by the user. We will follow the same procedure for the trips as we did for the wishlists with the same field names and the same relations.
And that's all for the Trips entity.
Now we have created all the entities that are required, and we can build our app and push the code over to GitHub.
You can see that we have some pending changes in the right sidebar. We need to push these changes to GitHub to integrate it with our app.
Click on the Commit Changes & build
button.
With this Amplication will start building your code.
As soon as the build is successful, the code will be pushed over to GitHub.
Now head over to your GitHub repository.
Now click on the Pull requests.
Click on the pending pull request that is generated by the Amplication bot.
Now you will see the request page. You can either check the code or merge the pull request to merge it with the main source code.
Now we have successfully generated the backend code with Amplication.
Now we need to set up the app on our local machine. For that, clone the repository or pull your source code from git. Now to set up the app, we need to install the dependencies.
For this, there's already a pacakge.json file created in the root of the directory.
You need to run npm install
.
This will install the root dependencies.
After this, you need to run the npm run postinstall
script to install the frontend, backend, and admin-UI dependencies.
After the process is completed, your app is successfully setup with the backend code generated with Amplication.
Now to start the app, you can run npm run start
.
If you want to check the APIs generated by Amplication, head over to http://localhost:3000/api
.
This will open the Swagger UI with all the APIs. You can test out APIs here.
But wait, there's something more,
If you find yourself in the midst of the development phase and wish to seamlessly transition to Amplication's services, this powerful tool will be a game-changer.
Imagine having the ability to effortlessly import your Prisma schema into Amplication, enabling the automatic generation of entities and relationships required for your application. This simplifies the migration process, saving you time and effort while ensuring a smooth transition to Amplication's services.
With Amplication's Upload Prisma Schema feature, you can take your development project to the next level, leveraging the platform's robust capabilities to accelerate your app's progress.
The integration of your existing Prisma schema will pave the way for a more efficient and productive development experience.
Here's what the process looks like,
This feature is still in beta mode and will be available to end users shortly.
This blog post has taken you through the process of creating a Full Stack Airbnb Clone using Amplication, a powerful open-source development tool. With Amplication's low-code development environment, developers can build web applications by configuring and connecting pre-built building blocks, reducing the amount of manual coding required. The post covered the various features and functionalities of the Airbnb Clone, including real-time maps, JWT-based authentication, API calls using Axios, and more.
The step-by-step guide walked you through setting up the project using Amplication, creating entities for listings, wishlists, and trips, and how to push the code to GitHub for integration. Additionally, it demonstrated how to test the REST APIs generated by Amplication using Swagger UI.
By leveraging Amplication's capabilities, developers and organizations can accelerate software development, save valuable time and resources, and deliver robust and scalable applications. Whether you're a seasoned developer or just starting, Amplication provides a user-friendly platform for building impressive web applications with ease. So, go ahead and unleash the power of Amplication in your next development project! Happy coding!
Also published here.