Building a Full Stack Airbnb Clone with Next.js, Tailwind CSS, Amplication, and More

In this blog post, you'll learn how to create a Full Stack Airbnb Clone using Amplication.

Features of the Airbnb Clone

• Built using Next.js
• Styled with Tailwind CSS
• Backend generated using Amplication
• State Management with Zustand
• Realtime Maps using Mapbox API
• Login Signup using JWT Tokens
• API calls using Axios

Functionalites of the Airbnb Clone

• Create Listings
• View Listings
• Book Listings
• Delete Listings
• Add Listing to Wishlist
• Remove Listing from Wishlist
• View booked Listings
• Search Listings
• Search Listings using Map
• View Listings Data on Map

This blog post is a part of my Youtube video. Check out the amazing video.

Unleashing the Power of Amplication: Accelerating Software Development with Ease

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.

Step 1: Fork the starter git repository:

Clone this git repository to get starter files for the Airbnb Clone.

Step 2: Create an amplication account

Head over to amplication login and connect your GitHub.

Step 3: Create your first service

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.

Step 4: Connect with Github and Select Repository

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.

Step 5: Selecting GraphQL / RestAPI & Swagger UI / Admin UI

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.

Step 6: Select the type of backend structure generated by Amplication.

Amplication provides two types of structure for the generated code.

• Polyrepo If you are using a polyrepo, Amplication will push the code to the root of the repo in separate folders for the server and the admin-ui.
• Monorepo If you are using a monorepo, you can select the folder where you want to save the code of the service. “apps,” “packages,” and “ee/packages” are all valid.

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.

Step 7: Select the database.

Amplication provides three types of databases at the moment.

• PostgreSQL
• MongoDB
• MySQL

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.

Step 8: Selecting a Template for Your Project

Amplication provides two options for your entities.

• Empty Manually define your entities and fields.
• Use a Template Pre-defined set of entities and fields Address, Orders, User.

You can start from scratch or select a demo template.

We are going to select the empty option here.

Hit continue.

Step 9: Selecting Auth Services

Amplication provides an inbuilt auth module that pre-generates code for your authorization and authentication.

For this, Amplication provides two options:

• Include Auth Module Generate the code needed for authentication and authorization.
• Skip Authentication Do not include code for authentication.

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.

Step 10: Merge the pull request generated by amplication

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.

Setting up Amplication Entities

We will be using four entities in our AirBnb Clone:

• user: Manages all users with their details.
• listings: This will store all entities created by a user.
• trips: If a user books a listing then it would be stored in this entity.
• wishlists: If a user adds a listing into their wishlists then this would be stored in the Wishlists entity.

Setup Listings

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.

title Field

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.

description Field

Do the same process for the description, but for the datatype, we will change it to Multi Line Text.

locationType Field

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.

placeType 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.

price 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.

mapData Field

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.

locationData Field

This field will store the location Data like the pincode, address, city, etc.

This will be a Json data type.

placeSpace Field

This will store the total number of rooms and total guests the place can have.

This will be a Json data type.

photos Field

This will store the links to the photos for the listings.

This will be a Json data type.

listingCreatedBy field

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.

Setup Wishlists

This entity will store the wishlists of the user.

user field

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.

listing Field

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.

Setup Trips

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.

Build and publish the code 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.

Setup Local App

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.

Amplication REST API's with Swagger

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,

Amplication introduces a groundbreaking feature: Upload Prisma Schema.

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.

Conclusion

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.