⚛️ Full Stack Amazon Clone with Next.js, Typescript, Tailwind CSS, Zustand, Next UI, Recharts and Amplication 🚀

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.

⭐ Give Amplication a Star! ⭐

Step 1: Create 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 amplication and click on Start Now button.

Step 3: Continue with Github Account

In this step click on the continue with Github 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 generate 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 for 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 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.

Step 8: Select the database.

Amplication provides three types of database 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 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.

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.

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

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

isAdmin field

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

Click on the add field on the left sidebar.

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

After you click on it the field would 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 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.

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

This will create the 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 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 Type according to your needs an 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 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. 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.

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

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

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.

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.

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.

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.

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

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

{
  "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 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.

🟣 Join Amplication Discord 🟣

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.

Comments

[Erez Greenberg]

Great guide on creating a Full Stack Amazon Clone with Amplication and other tools. As someone from Amplication, it's rewarding to see its capabilities highlighted in real-world scenarios. The step-by-step approach and integration details are very helpful. Well done!