⚛️ Full Stack Amazon Clone with Next.js, Typescript, Tailwind CSS, Zustand, Next UI, Recharts and Amplication 🚀
Tags: nextjs, webdev, react, javascript
Published: 2023-10-02 16:49:54

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.

{% youtube JVVJcFGV5p4 %}

## Unleashing Amplication's Potential: Streamlining Software Development Efforts

[Amplication](https://amplication.com), 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.

![SpongeBob](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ko6hzxkaowc8u5qp0gl.png)


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.

{% cta https://github.com/amplication/amplication %} ⭐ Give Amplication a Star! ⭐ {% endcta %}


### Step 1: Create new github repository

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

![Github Repo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lo1lwhuv32hijfm9kbgi.png)

### Step 2: Head over to [amplication](https://amplication.com/) and click on Start Now button.

![Amplication homepage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1phvgyzy1dlenbmbqu5p.png)

### Step 3: Continue with Github Account

In this step click on the continue with Github to start the connecting amplication with your Github account.

![Amplication login page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wl6quhp51nyjhy6azul0.png)

### Step 4: Create your first service
Now you need to create a service for amplication which in turn generate your backend code. Give it a meaningful name.

We are going to name it amazon-backend and hit continue.

![amplication service](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fn9cdv81wvr4p2ebe9hi.png)

### 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 for our git provider.

![Git Providers](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fwy573zbl15d4ea7u0gr.png)

After you connect with github you need to select a repository. Select the amazon-clone repo.

![Repo selection](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hueutwz1mocniwyik11o.png)

The repo would be selected now.

![amazon clone repo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/btwqujyfrrgoxdi9xqcg.png)

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.

![API Selection](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6kuts1n86jn0t38w8s7d.png)

We are going to enable all the options here. Though we will not be using the GraphQL API for the app but for the demo purposes we are enabling it.

We are going to use the REST API's through out the Amazon clone. Also we will be using Swagger to test out the API's.

### 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” all are valid.

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

![amplication polyrepo selection](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pows8dile0svxg81gg58.png)

### Step 8: Select the database.

Amplication provides three types of database at the moment.

- PostgreSQL
- MongoDB
- MySQL

![Amplication databases](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vxat2r5e1g7ip48hhmix.png)

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 PostrgreSQL DB.

Now hit continue.

### Step 9: Selecting a Templates 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.

![Templates](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2bvgzoa5wk3ntbhfri8i.png)

Hit continue.

### Step 10: Selecting Auth Services

Amplication provides in built auth module that pre generates code for you 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 Include Auth Module Option.

![Amplication Auth](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a9doyp8mw9aixkgadxwq.png)

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.

![Amplication Setup Success](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/orinfyqzm92wbihyauns.png)

You have successfully setup your Amplication app.

Now click on create entities option to create entities.

Entities are like table in DB.

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


![User entity](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e8rui5aqr8jahu7ebpfr.png)

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

![Amplication Entities](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aulu90ne8so6m2s784uu.png)

### Setup Users

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

![user entity](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9hmhb6910c8cuq4vr8ao.png)

#### `isAdmin` field
Now we want to add a new field here name as `isAdmin`.

Click on the add field on the left sidebar.

![user entity sidebar](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s688v4fkd4jhea23w13z.png)

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

![new field](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/36egx9vwx2by7op8qcj0.png)

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

![Field Settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5qzfdo69vmz25g4yhqze.png)

This field will let us know if the current logged in user is a admin. It's datatype is `boolean`.

Now click back 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.

![add entity](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w2lh94rbvxkq07kcfb4i.png)

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

![new entity modal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/68hckvrtbpkd2rq7xjxj.png)

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

![products entity](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w35r4ubnwj0hdy04ed2y.png)


#### `title` field

Write title as the name and click on + right beside it.

You can see that the 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nlfok93g2osruvb9e68u.png)

Amplication provides various Data Type according to your needs an takes care of the constraints on your code as needed according to the data type.

![Types of data types](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dlq12sa9sk54fs0a4iel.png)

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.


![json datatype](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ep6o5w66qdvqgq91tcfi.png)

#### `salePrice` field

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

![Decimal Number datatype](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1kjq3rqrrky6pamd9v3p.png)

#### `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 a 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](https://cloudinary.com/). 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.

If you want to learn how to upload images to Cloudinary using Next.js check out my detailed blog post [here.](https://dev.to/kishansheth/supercharge-your-nextjs-app-with-stunning-images-learn-the-ultimate-cloudinary-image-upload-hack-31ja)

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.

![product relation field](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zxfw78cqgya7zquytie9.png)

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 rating the review has.

The datatype for the `rating` field would be `Whole Number`.

![rating datatype](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2quqs6zxi1f6rtc1dqje.png)

#### `description` field

This field will store the text of the review. 

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

![description datatype](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6cs3727dlmbkdcy2lbnk.png)

#### `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 selct `One 'reviews' can be related to one 'products'` option.

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

![product relation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5erojeh8d8kbhrcsxvht.png)

#### `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 selct `One 'reviews' can be related to one 'user'` option.

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

![Review User](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pd3tyf9f86xmflwmi7vd.png)

That's all for the reviews entity.

### orders entity

This will store all orders that has 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 selct `One 'orders' can be related to one 'user'` option.

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

![Order user field](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5kds4msckwfy5f024k1d.png)

#### `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 selct `One 'order' can be related to many 'products'` option.

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

![product field](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m9mf5o3rcx8agm0ll8dv.png)

#### `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 is required and we can build our app and push the code over to github.

![All Entites](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1p5kbugb77lj36ib4xwu.png)

## 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ayq8pswszzmc49x4psy.png)

Click on the `Commit Changes & build` button.

![Commit Changes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e3ejwa84mw2qsibjs8v9.png)

With this Amplication will start building your code.

![Build Screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mdazk58gzccpru1zttuh.png)

As soon as the build would be successfull the code would be pushed over to the Github.

Now head over to your github repository.

Now click on the Pull requests

![Pull Requests](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qd9va6g1lb9s4k2ru174.png)

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

![Pull request](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ve3a9izh6g28to738ecr.png)

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.

![PR Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/77to5dkp98ezft5h74xr.png)

Now we have successfully generated the backend code with Amplication.

### Setup Local App

Now we need to setup the app on our local machine.

For that clone the repository or pull your source code from git.

Now to setup the app we need to install the dependencies.

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

```json
{
  "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+https://github.com/koolkishan/nextjs-amazon-clone.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/koolkishan/nextjs-amazon-clone/issues"
  },
  "homepage": "https://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 for starting the app you can run `npm run start`.

## Amplication REST API's with Swagger

If you want to check the API's generated by Amplication, head over to `http://localhost:3000/api`.

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

![Amplication API's](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7yab6h2jp2qtulrk7ndm.png)

### Amplication Discord Server

If you're stuck anywhere in the process or have any issues regarding amplication or just want to particapte in thier monthly giveaways join their discord server.

{% cta https://amplication.com/discord %} 🟣 Join Amplication Discord 🟣 {% endcta %}

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

![End](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0one9fml57tzkosrgowz.gif)