paint-brush
Building a Full Stack Airbnb Clone with Next.js, Tailwind CSS, Amplication, and Moreby@kishansheth
12,446 reads
12,446 reads

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

by Kishan ShethAugust 16th, 2023
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

Learn to create a Full Stack Airbnb Clone with Amplication: Low-code Next.js frontend, Tailwind CSS styling, JWT-based auth, Mapbox API maps, and more.
featured image - Building a Full Stack Airbnb Clone with Next.js, Tailwind CSS, Amplication, and More
Kishan Sheth HackerNoon profile picture


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.

Amplication login page

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.


Amplication Service

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.


Git Providers

After you connect with GitHub, you need to select a repository. Select the Airbnb repo.


Selected Git 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.


API Selection

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.


Amplication Polyrepo


It will generate two folders at the root of our repository, named server and admin-UI


Code Directory


Now hit continue.


Step 7: Select the database.

Amplication provides three types of databases at the moment.

  • PostgreSQL
  • MongoDB
  • MySQL


Amplication databases


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.


Templates

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.


Amplication Auth

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.


Amplication code generated


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.


Merge Pull Request


You can also check the code generated by Amplication by clicking the Files Changed Option.


Github Files Changed


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.


Amplication Setup Success


You have successfully set up your Amplication app.


Now click on create entities option to create entities.


Amplication Create Entities Option


Entities are like tables in DB.


Now there is a predefined entity here which is for users in your application.


User Entity

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.


Amplication Entities

Setup Listings

Now click on Add Entity button in Top Right Corner


Create Entity


On the new Entity Modal screen, type listings as the name of the new entity and hit create entity.


New entity modal


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.


Listings Entity Details


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.


Entity Add Field

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.


New Entity Config


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.


Types of data types


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.


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.


price field

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.


mapdata field


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.


Relation


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.


user field

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.


listing entity


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.


Trips


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.


Pending Changes


Click on the Commit Changes & build button.


Commit Changes


With this Amplication will start building your code.


Build Screen


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.


Pull Requests


Click on the pending pull request that is generated by the Amplication bot.


Pull request


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.


Repoi


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.


Package.json file


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.


API's


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.


Prisma Upload Schema


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,


Prisma upload schema process


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.