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

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

Features of the Amazon Clone

• Built using Next.js
• Styled with Tailwind CSS
• Backend generated using Amplication
• State Management with Zustand
• Typescript for type safety
• Login Signup using JWT Tokens
• API Call's using Axios
• Recharts for charts
• Next UI for amazing prebuilt components
• React Pro Sidebar for prebuilt amazing sidebar.
• Admin Panel
• Table Pagination

Functionalites of the Amazon Clone

• Categories CRUD (Create/Read/Update/Delete)
• Products CRUD (Create/Read/Update/Delete)
• Order Management
• Dashbord for Admin
• Admin Login
• User Login & Signup
• User view products
• User search products
• User add products to cart
• User place order
• And many more features that you can watch it from the video below

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

Unleashing Amplication's Potential: Streamlining Software Development Efforts

Amplication, is a powerful open-source backend development tool engineered to streamline and accelerate web application creation. It offers a user-friendly interface and a comprehensive feature set, making it a valuable resource for developers and organizations aiming to swiftly develop robust, scalable applications while conserving time and resources.

At its core, Amplication revolves around the concept of a low-code backend development environment. This innovative approach allows developers to construct applications by configuring and connecting pre-built building blocks, eliminating the need for extensive manual coding. Consequently, development teams can direct their efforts towards crafting business logic and delivering a polished final product with greater efficiency.

Step 1: Create a new GitHub repository

Amplication connects to our GitHub repo and pushes the code to a branch and creates a pull request.

Step 2: Head over to the Amplication website and click on the Start Now button

Step 3: Continue with Github Account

In this step, click on the continue with Github button to start the connecting Amplication with your Github account.

Step 4: 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 Amazon-backend and hit continue.

Step 5: 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 amazon-clone repo.

The repo would be selected now.

Now hit continue.

Step 6: 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 the purposes of this demo.

We are going to use the REST API throughout the Amazon clone. Also, we will be using Swagger to test out the APIs.

Step 7: Selecting 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”, “ee/packages” are all valid.

We are going to use the Polyrepo option for this project.

Step 8: 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 in the plugins page.

For this Amazon Clone, we are going to use the PostgreSQL DB.

Now hit continue.

Step 9: Selecting a Template for your Project

Amplication provides two options for your entities.

• Empty Manually define your own 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 10: Selecting Auth Services

Amplication provides an built 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 Amazon 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.

You will see the success page.

You have successfully set up your Amplication app.

Now click on the "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 Amazon Clone

• user: Manages all users with their details.
• products: This will store all products created by admin.
• category: This will store all the categories of the products.
• reviews: After the user buys a product they can add reviews for the product. This entity will store the reviews of the products.
• orders: This will store the orders of the products.

Setup Users

The user entity is already created. Click on it to view the fields of the user.

isAdmin field

Now we want to add a new field here named isAdmin.

Click on the add field on the left sidebar.

Now type the name of the entity and press the plus icon beside it, which will create the entity.

After you click on it, the field will be created, and you can configure it from the right-side field settings.

This field will let us know if the current logged-in user is an admin. Its datatype is boolean.

Now click back, and the setup for the user entity is complete.

Products entity

This entity will store all products with their details

Now, let's create a new entity for products.

Click on the Add Entity button.

This will open up a modal. Type the name of the entity as products and press create entity.

This will create a new entity. Now, let's add all the required fields.

title field

Write 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 description, but for the datatype, we will change to Json because we will have multiple descriptions for the product.

salePrice field

This will store the orignal price of the product. The datatype of this field will be Decimal Number

discountPrice field

This will store the discounted price of the product. We will have the datatype of this field as Decimal Number.

colors field

This will store the colors of the products. We will be able to store multiple colors, so we will be using the Json datatype for this field.

variants field

This field will store all the different variants of the product. For example, the size of clothes, storage of digital devices, etc. We will be able to store multiple values for variants so we will use the Json datatype for this field as well.

images field

We will upload the images to cloudinary. Cloudinary will return us the URL's of the uploaded images. We will have an array of images; we will be using the Json datatype for the images field as well.

That's all for the products entity.

Category entity

This entity will store the category of all the products.

name field

This field will store the name of the category. Datatype for this field will be Single Line Text.

products field

This field will store all the products associated with the category.

We will name this field as products.

This field's datatype will be Relation to Entity.

In the related entity dropdown select products.

And for relation selct One 'category' can be related to many 'products' option.

This means that one category can have more than one products.

That's all for the category entity.

Reviews entity

This will store the reviews of the products.

rating field

This field will store the number of ratings the review has.

The datatype for the rating field would be Whole Number.

description field

This field will store the text of the review.

The datatype of the description field will be Multi Line Text.

products field

This field will store all the products associated with the review.

We will name this field as products.

This field's datatype will be Relation to Entity.

In the related entity dropdown, select products.

And for relation select One 'reviews' can be related to one 'products' option.

This means that one product can have more than one review.

user field

This field will store the user associated with the review.

Let's name this field as user.

This field's datatype will be Relation to Entity.

In the related entity dropdown select users.

And for relation select One 'reviews' can be related to one 'user' option.

This means that one review can only have one user associated with it.

That's all for the reviews entity.

orders entity

This will store all orders that have been created by the user.

user field

This field will store the user associated with theorder.

Let's name this field as user.

This field's datatype will be Relation to Entity.

In the related entity dropdown select users.

And for relation select One 'orders' can be related to one 'user' option.

This means that one order can only have one user associated with it.

products field

This field will store all the products associated with the order.

We will name this field as products.

This field's datatype will be Relation to Entity.

In the related entity dropdown, select products.

And for relation select One 'order' can be related to many 'products' option.

This means that one product can have more than one review.

price field

This field will store the total amount of all the products in the order.

The datatype for the price field would be Decimal Number.

status field

This field will store the status of the order.

The datatype for this field would be Json.

paymentIntent field

This field will store the payment data by payment gateway.

The datatype for this field would be Single Line Text.

paymentStatus field

This field will let us know the status of the payment.

The datatype for this field would be Boolean.

That's all for the orders 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.

Let's create a package.json file in the root of your app and paste the following code in it.

{
  "name": "amazon-clone",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start:admin": "npm --prefix admin-ui start",
    "start:backend": "npm --prefix server start",
    "postinstall": "npm i --prefix admin-ui && npm i --prefix server"
  },
  "devDependencies": {
    "cross-env": "^7.0.3",
    "npm-run-all": "^4.1.5"
  },
  "repository": {
    "type": "git",
    "url": "git+//github.com/koolkishan/nextjs-amazon-clone.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "//github.com/koolkishan/nextjs-amazon-clone/issues"
  },
  "homepage": "//github.com/koolkishan/nextjs-amazon-clone#readme",
  "dependencies": {
    "qs": "^6.11.2"
  }
}

Now 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 the 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 APIs with Swagger

If you want to check the APIs generated by Amplication, head over to //localhost:3000/api.

This will open the Swagger UI with all the API's. You can test out APIs here.

Conclusion

This blog post has provided a comprehensive guide on how to create a full-stack Amazon Clone using Amplication, a powerful open-source backend development tool. The Amazon Clone features a range of functionalities and technologies, including Next.js, Tailwind CSS, Zustand for state management, TypeScript for type safety, JWT token-based authentication, Axios for API calls, Recharts for charts, Next UI for prebuilt components, and React Pro Sidebar for a sidebar. It also includes an Admin Panel and Table Pagination.

Amplication's potential in streamlining software development efforts has been highlighted. It offers a low-code backend development environment that allows developers to build applications by configuring and connecting pre-built building blocks, saving time and resources.

The step-by-step guide covers setting up a GitHub repository, connecting Amplication with GitHub, creating a service, selecting the database, and defining entities for the Amazon Clone. It explains how to configure various fields for entities like users, products, categories, reviews, and orders.

The blog also outlines the process of building and publishing the code to GitHub and setting up the local app for development. It provides a package.json file for dependency management and offers instructions for starting the app.

Finally, the blog mentions how you can explore and test the REST APIs generated by Amplication using Swagger UI.

Overall, this comprehensive guide empowers developers to create a feature-rich Amazon Clone efficiently using Amplication, demonstrating the tool's capabilities in simplifying backend development for web applications.