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. https://www.youtube.com/watch?v=JVVJcFGV5p4&embedable=true Unleashing Amplication's Potential: Streamlining Software Development Efforts Amplication, is a powerful open-source backend 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. development tool 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 Manages all users with their details. user: This will store all products created by admin. products: This will store all the categories of the products. category: After the user buys a product they can add reviews for the product. This entity will store the reviews of the products. reviews: This will store the orders of the products. orders: Setup Users The user entity is already created. Click on it to view the fields of the user. field isAdmin 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 and press create entity. products This will create a new entity. Now, let's add all the required fields. field title 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 from the dropdown. Single Line Text 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 field description Do the same process for description, but for the datatype, we will change to because we will have multiple descriptions for the product. Json field salePrice This will store the orignal price of the product. The datatype of this field will be Decimal Number field discountPrice This will store the discounted price of the product. We will have the datatype of this field as . Decimal Number field colors This will store the colors of the products. We will be able to store multiple colors, so we will be using the datatype for this field. Json field variants 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 datatype for this field as well. Json field images 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 datatype for the field as well. Json images That's all for the products entity. Category entity This entity will store the category of all the products. field name This field will store the name of the category. Datatype for this field will be . Single Line Text field products 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 option. One 'category' can be related to many 'products' 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. field rating This field will store the number of ratings the review has. The datatype for the field would be . rating Whole Number field description This field will store the text of the review. The datatype of the field will be . description Multi Line Text field products 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 option. One 'reviews' can be related to one 'products' This means that one product can have more than one review. field user 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 option. One 'reviews' can be related to one 'user' 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. field user 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 option. One 'orders' can be related to one 'user' This means that one order can only have one user associated with it. field products 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 option. One 'order' can be related to many 'products' This means that one product can have more than one review. field price This field will store the total amount of all the products in the order. The datatype for the field would be . price Decimal Number field status This field will store the status of the order. The datatype for this field would be . Json field paymentIntent This field will store the payment data by payment gateway. The datatype for this field would be . Single Line Text field paymentStatus 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 button. Commit Changes & build 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 file in the root of your app and paste the following code in it. package.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 script to install the frontend, backend and the admin-ui dependencies. npm run postinstall 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 . http://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.

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

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

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

A Compilation of the Best Full-Stack Clones: Amazon, Whatsapp, Netflix, Spotify & More

10 React Admin Dashboard Templates For Your Next Website

10 Fascinating PHP and PHP-friendly admin templates

10 Dashboard Templates and Effective Indicators for Tracking KPI’s

5 Cool React Admin Templates for Bootstrap Dashboards in 2021

6 VueJS Admin Templates With Cool UX Design You Should Check Out

A Compilation of the Best Full-Stack Clones: Amazon, Whatsapp, Netflix, Spotify & More

10 React Admin Dashboard Templates For Your Next Website

10 Fascinating PHP and PHP-friendly admin templates

10 Dashboard Templates and Effective Indicators for Tracking KPI’s

5 Cool React Admin Templates for Bootstrap Dashboards in 2021

6 VueJS Admin Templates With Cool UX Design You Should Check Out

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps