Join, compete & win! Prize pool of $100,000
Search
Generic filters

How to Build a Web3 Amazon Marketplace

When it comes to Web2 marketplaces, Amazon is, without a doubt, the largest Web2 e-commerce marketplace. However, as Web3 is just getting started, there are no serious Amazon alternatives in the crypto realm yet. Hence, this offers developers an incredible opportunity to build a Web3 Amazon marketplace. Of course, you may aim high, so your ultimate goal may be to create something as big as Amazon. However, just by learning how to create a Web3 Amazon clone, you can offer many businesses a way to start accepting cryptocurrencies. In this article, we’ll present you with a detailed guide on how to build a Web3 Amazon marketplace. As such, you will be able to use the same principles to build on the various blockchains that Moralis supports. Fortunately, cross-chain interoperability is at your disposal when you use the right Web3 tech stack.   

With that said, moving forward, you will learn how to work with the ultimate Web3 development platform, Moralis. This “Firebase for crypto” option is the best Web3 backend platform. It provides you with an impressive Web3 SDK, including the ultimate Ethereum API and NFT API. As such, it’s an important tool when your goal is to build a Web3 Amazon marketplace. Essentially, Moralis is the tool that enables you to create a Web3 Amazon clone in about an hour or so. In the following sections, you’ll actually have a chance to join us as we create a Web3 Amazon clone. By doing so, you will also learn how to complete the initial Moralis setup and, thus, be covered when tackling other projects. So, if that sounds interesting to you, make sure to create your free Moralis account before moving on. 

Build a Web3 Amazon Marketplace with Moralis

As mentioned above, we will take on an example project where our goal will be to create a Web3 Amazon clone. Moreover, one of the essential tools that will enable us to get things done with as little friction as possible is Moralis. The latter will enable us to cover all of our backend needs with maximum ease. 

For instance, we will use Moralis’ MetaMask integration to cover Web3 authentication. In addition, by using the Moralis Web3 API, we are able to copy short snippets of code to include all sorts of functionalities and features. Without this shortcut, we’d be forced to face all of the limitations of RPC nodes. However, when building with Moralis, you can devote all of your efforts and resources to creating the best user experience. As such, the chances of you creating a great Web3 UI are much higher. Moreover, the latter ultimately gives your dApps (decentralized applications) noticeably greater chances of success.  

Before we actually start to build a Web3 Amazon marketplace, we want to ensure that you have a clear picture in mind. Thus, we will take a closer look at an overview of our finished example dApp. By doing so, you will have a much better understanding of what our example project will be all about. Furthermore, with that information at your disposal, you can easily decide whether or not you want to create a Web3 Amazon clone yourself.  

Before You Create a Web3 Amazon Clone – dApp Preview

We will build an Amazon-like web bookstore as part of today’s example project. In short, here is the preview of its homepage:

Looking at the screenshot above, you can already see that our example Web3 bookstore has that “Amazon” look. Moreover, we created a search bar at the top. Further, next to the search bar is the “login” button. There, users get to complete their Web3 login easily. While we’re using the most popular Web3 wallet in our example, Moralis also enables you to set Web3 social login in place. 

In addition, below the search bar is the top menu. There, users can select among different categories, including comics, dictionaries, novels, fantasy, horror, and adventure. Then, we have the carousel area with three rotating banners to engage customers. Further down the page, there are four sections: shop by category, browse comics, Artemis Fowl, and Moby Dick. Nonetheless, all of these four sections come with a button at the bottom. For example, let’s say users click on the “Shop Now” button under the “Browse Comics” section:

By clicking on the above button, they will land on the page where they can buy comics:

As you can see in the image above, users now get to see the available comics, their review stars rating, and their prices. Moreover, on the left-hand side, there are several filters. For instance, users can select to only view comics with five stars. Aside from the review filter, there is also the price filter. The latter enables customers to select one of the predefined price ranges or enter their own price range. 

Example Web3 Amazon Clone Preview – Completing a Purchase   

Let’s now assume that customers want to buy a specific comic. As such, they first need to click on the “Go to Product Page” button under a comic of their choice:

By doing so, the customers land on that product’s page. This is where customers can view the product title, star reviews, price, and a short description:

There’s a cover image on the left-hand side that you can zoom in on by hovering over it. Furthermore, there is a frame on the right-hand side where users can select the desired quantity, preview the overall price, and buy the item by clicking on “Buy Now”. However, before the customers can actually purchase any item, they need to log in.

Example Web3 Amazon Clone Preview – Login

In order for users to log in, they need to have their MetaMask browser extension and their crypto wallet ready. With that set in place, they need to click on the “login” button:

Next, a signature request from MetaMask will pop up. As such, users need to click on the “Sign” button to log in:

Once logged in, users can complete their purchases by clicking on the “Buy Now” button:

As you can see from the screenshot above, a new pop-up window will appear once users click on the “Buy Now” button. This is where they need to enter their delivery addresses and click on the “OK” button. Then, MetaMask will prompt them to confirm their purchase. In our case, we are using the Mumbai testnet. As such, the cryptocurrency used is “test” MATIC. As you can see from the screenshot below, the price is automatically converted into MATIC. Moreover, to confirm the purchase, users need to click on the “Confirm” button:

Note: “Account 1” is an example user’s account, while “Account 2” is our example Amazon clone’s store owner’s account. The latter is where all MATIC transactions used for purchases are sent to.

Moralis Dashboard Preview

Once the transaction is complete, we can view it in our Moralis dashboard:

The Moralis dashboard is essentially a Web3 database that comes with every Moralis server. The latter is what you need to create as part of the initial Moralis setup. Moreover, the Moralis dashboard is a powerful tool that, together with the Moralis “sync” feature, enables you to sync and index smart contract events. This gives you the power to index the blockchain without breaking a sweat.

This also concludes our preview. You should now have a solid understanding of what we’ll be building as we take on our example project.

Build a Web3 Amazon Marketplace with Moralis – Example Project

In this section, we’ll show you how to use Moralis to build a Web3 Amazon marketplace. The goal is to implement all of the features as presented in the preview above. Furthermore, we are aiming for the same appearance as well. Moving forward, we will guide you through the initial project setup. However, for a more detailed code walkthrough, we will hand you over to one of Moralis’ experts in their detailed video tutorial.

Create a Web3 Amazon Clone – Project Setup

As mentioned, let’s go through the project setup together. Start by launching your favorite code editor. We prefer to use Visual Studio Code (VSC). As such, our instructions will be focused on using that piece of software. Next, open a folder (or create a new one) in which you want to create your project. We are using a folder called Amazon:

Next, use VSC’s terminal to enter your commands. Start by cloning the starter code, which we made available at GitHub. Of course, if you want to use the finished code, you can also access our final code. To clone the code, use the “git clone” command, followed by GitHub’s link for that code:

Next, enter “cd amazon-clone-1” in the terminal to open the cloned project:

Then, you also need to install all of the dependencies. As such, run “yarn” (if you prefer NPM, go with that option):

Finally, you are ready to run your template application. You do this by entering “yarn start” in the command line:

Moreover, this is what you should be seeing after running the above command:

Essentially, the above represents your blank canvas. By using the details in the video tutorial below, you’ll get to implement the code to build a Web3 Amazon marketplace. Furthermore, here’s also the preview of all the files that your project will contain:

As the final step of your project setup, let’s make sure you also import the “antd” CSS library. Thus, go to the “App.css” file and paste “@import ‘antd/dist/antd.css’;’” at the very top:

Another important part of this example project is completing your initial Moralis setup. This is where you will learn how to create a Moralis server and copy its details to the “index.js” file (video below at 01:00:58):  

Create a Web3 Amazon Clone – Video Tutorial

With the initial setup completed, we’re handing you over to a Moralis expert. In the video below, he will first show you how to go about creating a header that matches the above preview (05:45). Next, he will guide you through the details of building your home page (15:50). Then, you will learn how to create your categories page (22:14). At 47:14, the Moralis expert will guide you through the steps required to build a proper product page. With that completed, you will have your frontend ready. As such, you will start focusing on the backend. Hence, you will first complete the above-mentioned Moralis setup. Finally, you will learn how easily you get to cover all of your backend needs. This is possible thanks to Moralis’ Web3 API. To finish things up, you will also learn how to set payments in place (01:05:57).

This is the video we’ve been referencing throughout the article:

How to Build a Web3 Amazon Marketplace – Summary

By following along with the instructions and video tutorial above, you should now have learned how to create a Web3 Amazon clone with Moralis. Furthermore, you know how to build a Web3 Amazon marketplace in just over an hour. As such, you also know how to properly set up your project and how to create a Moralis server. Since the latter is your gateway to full Moralis SDK functionality, it is crucial to complete that step. Once you create a Moralis server, you get to access its details, which you then paste inside your code.

If you enjoyed this educational tutorial, we have many others waiting for you at the Moralis blog and the Moralis YouTube channel. Aside from example projects, both of these outlets also offer great explanations of various crypto topics. As such, they offer an excellent way to learn more about blockchain development for free. For instance, some of the latest topics include how to connect a Unity app to a Web3 wallet, Alchemy API alternatives, how to create a BNB Chain token, cloning Coinbase Wallet, how to create a Solana token, an NFT minting page walkthrough, how to create a metaverse dApp with Unity, how to boost Web3 user onboarding, governance tokens, and much more.

However, if you are serious about becoming a blockchain developer as soon as possible, you may want to consider taking a more professional path. To replicate the success of many of our students, enrolling in Moralis Academy might be just what you need. Aside from getting access to professional courses, you’ll also become part of one of the most advancing communities. On top of that, you’ll get expert mentorship and a personalized study path. 

February 27, 2022
Become a Moralis Mage
Get the latest information about Moralis Web3 in your email
Search
Generic filters
Related Articles
Become a Web3 Expert
Subscribe to our newsletter and get our E-book Web3 Speed run for FREE