How to Build a Simple Web3 Ecommerce App with Astra DB

It can take a long time to learn how to build a Web3 ecommerce app. Here’s an example of how you can build your own app and open your very own NFT shop based on the Ethereum blockchain in about a week.

In this post we’ll show you how to build a Web3 ecommerce app with DataStax Astra DB. If you read our previous post on how we view Web3 app development, you’ll know that blockchain technology isn’t good for everything.

The costs and latency of querying a blockchain make it crucial for your app to limit the interactions as much as possible.

This sample app is a simple ecommerce application based on Next JS and it’s designed to sell NFTs using the Ethereum blockchain. To make it easy and affordable to scale, we’ll only use the blockchain for transactions of payments and ownership. Other tools used to build this app are:

Information that doesn’t need to be on the Ethereum blockchain is stored in the cloud solution that works best for each specific purpose. We’ll store product descriptions, pricing, and buyer profiles on the Apache Cassandra® database using Astra DB. This allows the app to serve up this data in real-time.

Since we’re not making actual transactions on the Ethereum blockchain, we’re using the Rinkeby Testnet blockchain as a stand-in. Metamask will be our gateway wallet installed as a browser extension.

Figure 1: How Astra DB delivers speed and availability at scale to Web3 apps.

1. Setting up your Web3 app tools

Here’s what you have to do to get set up.

Set up the Metamask Wallet
Before we start, you’ll want to download and install the Metamask Wallet browser extension. Once you’ve added the extension, a page from Metamask will pop up. You can use your secret recovery phrase to import your existing wallet or create a new one.

If this is your first time setting up a cryptocurrency wallet, we highly recommend you read up on how to store your secret recovery phrase and keep your wallet safe. That’s all in the security section of the Metamask FAQ.

Select Rinkeby Test Network
When your Metamask wallet is set up, you’re ready to connect to a test network. We recommend the Rinkeby Testnet. You could use a number of other testnets, but Rinkeby was the best performing one when we put this app together.

Simply click the Ethereum Mainnet dropdown in the Metamask extension and click on “show/hide test networks”. Toggle “show test networks” on. When you go back to your wallet, you’ll see the available test networks in the dropdown.

Figure 2: When you’ve chosen to show test networks, Metamask Wallet lets you select Rinkeby Test Network among others.

Creating accounts in Metamask Wallet
Now you’re ready to create buyer and seller accounts in your Metamask Wallet. Click the dropdown, click “create account”, name them buyer and seller respectively. Sadly, your wallets will be empty, so you’ll need test funding.

Funding your test accounts
Go to Rinkebyfaucet.com to request 0.5 Rinkeby ETH test crypto. Copy your seller address from the Metamask Wallet extension, paste it into the Rinkeby Faucet request line, and click “send me ETH”. After a few minutes, you’ll have the test funds in your wallet.

Splitting the test currency
Copy your buyer address and send half of the Rinkeby ETH to your buyer account so each of your wallets have about 0.25 ETH. Now you’re ready to set up your database.

2. Creating your database in Astra DB

Go to the Astra DB website and click “create database”. Enter the database name and a keyspace name. We went with “crypto” and “ecommerce” to keep things simple.

Figure 3: The simple interface of Astra DB lets you create a database in seconds.

Then you should select a provider and a region. Click “create”. When your database is set up, you will be sent to the dashboard showing you usage data, region information, data center ID and keyspaces.

Figure 4: The Astra DB dashboard gives you a quick overview of your database setup and usage.

From the Astra DB dashboard you can now click on the CQL Console tab to get started adding tables and data. Go to the keyspace “ecommerce”. Copy and paste the create table statements from our README file on GitHub. This will create your first table catalog for storing product information.

The second table is for activity stream storing all user clicks in the app. Now confirm that the tables were created correctly. Use DESCRIBE tables and get the name of both tables. You’ll then use data from the README file to populate tables with product information.

To view that in our console, use a SELECT statement and select all from your catalog table. You’ll see all the product information has now been inserted. You can use another SELECT statement to show the activity stream. You’ll be using the POST request to add this data as a user goes through the process of selling and buying.

3. Connecting your crypto ecommerce application to the database in Astra DB

To connect your application to your new Astra DB database, you’ll need to create an application token. Click the “current organization” dropdown in the top left corner. Select organization settings, token management, and select administrator user. Then click “generate token”.

Figure 5: After generating the admin token you’ll see your token details and be able to download them.

You’ll see your token details, client secret, and token. You can download and save them for later. For now, we just need to copy the token ID and paste it into our ENV file.

4. Getting started with your crypto ecommerce app

To get started, click on the “connect Metamask” button in the top right corner of your app interface. This will pull up your Metamask wallet, where you can select the buyer and seller account. Click on “next”, then “connect”, and it will pull up your store.

Make sure you’re now in the seller wallet in Metamask so you can create a product. We’re using API calls to let the application interact with Astra DB and populate the product catalog with content from the product table.

Figure 6: In the application you can add a product using the simple interface.

5. Creating your NFT

Click the “create product” button. Now you can put in the title, price, description and add an image. When you click “add to draft”, the product info is stored on the product page within the card.

Confirming creation of the product

To confirm the creation of your NFT, copy the product ID from the application. Then head over to the CQL Console in Astra DB. Run use ecommerce and then SELECT * from catalog WHERE product_id=[your product id]. You’ll be able to view the product information here and confirm that it matches what you defined in the app.

Figure 7: SELECT statement is used in CQL Console to view product details entered in the new application.

Now your app should display the new product and its image.

How the functions work

The product is added with the Node JS client. You’ll use it to make a POST request. The URL ends in our keyspace and table name.

To track user clicks in the buying process, you’ll also use a POST request in our processNFT function. If the operation is equal to listNft, we’ll be making a POST request. The request passes a timestamp, wallet address, product ID, and action message.

High level overview of the smart contract

Between the buyer and seller account, there’s a third party escrow account. It collects fees, confirms ownership transactions, and releases funds.

Figure 8: An overview of the transactions of payment and ownership with the escrow account.

The seller includes the escrow fee when the product is listed. In this app, the fee is 25% of the product price. When the buyer bids, the product price and escrow fee is added to the escrow account. When the seller ships the product to the buyer, the seller gets the escrow fee released. As the buyer confirms receipt of the product, the escrow account releases the escrow fee to the buyer and the price of the product to the seller.

You can see how the smart contract works by looking at the code in the NFT.sol file—also shown in the Gist below.

6. Listing your NFT in the ecommerce app

Now you’re ready to list an NFT from your seller account. Click on “list as NFT” on the product card. This brings up the Metamask contract showing you the seller escrow fee of .00025 ETH. When you click “confirm”, the transaction will be confirmed on the blockchain after about a minute. Now the product is listed as an NFT, which you can see with the block explorer Etherscan and in your app.

Figure 9: The transaction is now visible on the block explorer.

7. Buying an NFT in the app

To test how the app works for buyers, switch back to the buyer account in your Metamask Wallet. Place a bid on the NFT. Now you can see and confirm the smart contract.

Figure 10: The contract details are available for the buyer to view in the Metamask Wallet.

When the buyer confirms the contract, it will be executed on the blockchain. The buyer account sends the escrow fee, and on the product page the status of the NFT will now be updated to bought. The seller can now ship the NFT and confirm transaction of ownership.

You can review the contract in Metamask Wallet as well as with the block explorer. When the buyer has clicked “receive NFT”, the gas fee is paid, and then you’ll just have to wait a little while for the transaction to be finalized and escrow amounts to be released.

Reviewing the clickstream data

Every click made in the buying process has been stored in the database with an API POST request. When you run a SELECT statement in the CQL Console, you get the activity stream data showing wallet address, timestamp, and product ID. This data will help you make business decisions.

Figure 11: The clickstream data stored in your database lets you review the secure transactions. It can also give you valuable insights in user experience and inspire personalisation with A/B testing.

Conclusion

You now have a simple crypto ecommerce app allowing you to list and sell NFTs without relying on the Ethereum blockchain more than absolutely necessary.

As your app becomes successful and your business shoots off to the moon, you’ll need a database that can scale at the same pace. That’s where Astra DB comes in with its ability to scale up to a large amount of requests while maintaining very low latencies.

We look forward to seeing how you use this approach in whatever Web3 app you’re working on!

Don’t forget to show off and share your progress with us on Twitter @DataStax Developers — where we’ll also keep you updated on what we’re working on. Lastly, be sure to subscribe to the DataStax Medium to get notified as soon as our next Web3 posts come out.

Resources

  1. Web3 Changes Nothing for DeFi Apps and Here’s Why
  2. DataStax Astra DB
  3. Metamask Wallet
  4. Amazon Web Services (AWS) S3
  5. Rinkeby Testnet & Rinkeby Faucet
  6. Github repository for the sample app dscryptocommerce-astradb

--

--

--

We’re huge believers in modern, cloud native technologies like Kubernetes; we are making Cassandra ready for millions of developers through simple APIs; and we are committed to delivering the industry’s first and only open, multi-cloud serverless database: DataStax Astra DB.

Recommended from Medium

Decentralized? 10% Cardano Whale Controls 94% Of All ADA in Supply

Decentralized? 10% Cardano Whale Controls 94% Of All ADA in Supply

These Crypto Metaverse Projects to Make You a Millionaire!

How to Prepare for a Bear Market

Against Saber/CASHIO M&A

DragonEx Briefing — 2020/05/22 to 2020/05/29

The BitDegree token crowdsale pledge

BitDegree

The short-term goals of the crypto-market and the future of the blockchain

The Fall of Luna: Revelations and Implications

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
DataStax

DataStax

DataStax is the company behind the massively scalable, highly available, cloud-native NoSQL data platform built on Apache Cassandra®.

More from Medium

Build your first DeFi Application — My experience

Solidity Security Enhancements: Overflows and Underflows

Overflows in bathroom

Building an OCR solution for document analysis with AWS Textract and AWS StepFunctions.

Announcing JCloud