May 13
How to Build a Simple Web3 Ecommerce App with Astra DB
Authors: Eric Hallow, David Joy
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.
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.
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.
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.
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”.
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.
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.
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.
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.
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.
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.
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.
