👋 Hello world! This is Santhosh Reddy, a 17 year old developer and a curious web3 learner. I keep building projects on blockchain like Dapps and smart contracts which reflects the real world use cases.
Intro ... 🙋♂️
Recently I completed building my blockchain project, UMart.
UMart is a blockchain based single vendor ecommerce web app template built on Ethereum blockchain (ropsten-testnet).
Though this kind of template may not be used currently due to the low population segment using crypto wallets, It's a futuristic one and will be used 2-3 years later.
The areas where the blockchain technology is used are, data storage and supply chain & payments.
Please forgive me for writing such a lengthy article. Just joking 😄. It's lengthy because the project is also big.
Preview : UMart
Code : Github Repo.
Aim behind... 💡
Blockchain technology has disrupted almost all the industries including ecommerce. Many ecommerce giants like Walmart have adopted blockchain for secure supply chain management.
Blockchain can increase the transparency between the vendors & users as well as the efficiency & security of the supply chain system.
But, it's not that easy for the small vendors right? Having a blockchain ecommerce app template can really be helpful to develop apps at low cost (to customise it by other developers) and less time.
Sadly, I found no ecommerce app templates built on blockchain on the internet (google search). I decided to build a full-stack ecommerce web app template that's built on blockchain. UMart has emerged here.
UMart can rapidly decrease the development time to build a blockchain ecommerce web app (for their clients) and hence, can decrease the development cost for the small vendors too.
As UMart uses simple CSS styling, it's very easy to customise and deploy.
Tech stack... 🧑💻
ReactJS & CSS (UI development)
IPFS (store data in json format)
Firebase (store hashes of data files)
Moralis (Authentication, RPC Node & IPFS Gateway)
Web3JS (interact with smart contract)
Solidity (create a smart contract)
CryptoJS (Encrypt the private data)
How I built it..? 🛠
As mentioned, I used the above tech stack to build UMart.
The user needs to get authenticated with his Metamask wallet to use the dapp.
All the data is in a json format and those files are stored on the IPFS network. Though the hashes of those files should be stored on blockchain through a smart contract, I did that in Firebase Firestore to overcome the gas fees.
To avoid re-filling of order formThe form data is stored and updated in localStorage. Even if the user didn't place the order, once the form's input field is changed, it persists.
Data security has been given the highest priority while building UMart. The Admin details, product details and reviews data are kept unencrypted as they are public data. Whereas User's wishlist data, orders data and localStorage's order form data are private and they are secured with AES256 encryption algorithm using CryptoJS.
Currently, the admin panel is kept public. It can be made secure by verifying if the ethereum address of the current user is equal to the address of the actual vendor. But, currently it wasn't implemented to make it available for testing publicly.
The smart contract was created using solidity and deployed to the Ethereum ropsten-testnet using Remix IDE. Checkout the smart contract here.
The responsibility of handling the core part, Supply Chain Management was given to blockchain. I'll explain it later...
In this ecommerce template, shipping has not been integrated because currently, third party shipping services aren't providing a service that syncs with UMart's supply chain system. So, the vendor must setup his own shipping system, till any of them provide a blockchain powered shipping service. As this kind of template will be used widely in future, blockchain powered shipping services might emerge then.
While placing the order, the sum amount was converted from USD to ETH using crypto-compare api .
The only concern here is, writing data to the IPFS network is a bit slow. However, Blockchain is still evolving and I hope this issue may be solved by the IPFS's developers - Protocol Labs.
A small note to mention here is, I didn't use Environment Variables to secure my keys and NPM to download required packages (used CDN). The only reason is, I don't have access to a pc/laptop and don't have nodejs installed. I built my projects on a mobile using spck editor.
App Components... 🗃
UMart is divided into two, User Interface(/) and Admin Panel(/admin).
The components of users interface are,
home with featured products and search bar.
search page to show search results.
cart page to show the cart items stored in localStorage.
shop page to show all the products with category filters.
About page to show the vendor's details, privacy policy and T&C
user profile page with a small profile banner, wishlisted products and order history.
product pages with an image, details & description, cart & wishlist buttons and reviews.
checkout page with an order form to place orders.
The components of the admin panel are,
Analytics Banner to show the numbers of total products, inventory worth, revenue & unfulfilled orders.
Admin Details to update the details of the vendor that's shown on the about page.
Inventory Management to perform CRUD operations on products.
Orders to check orders data and change the order status to shipped (click a button on top right of order box after shipping the order)
What makes it special..? 🏅
There are many ecommerce templates out there and what makes this ecommerce template special ? Let me tell you...
Complete Transparency 🪟
What makes UMart transparent is, the vendor doesn't have any access to the reviews and can't remove the negative reviews. So, shoppers can trust the product reviews without any doubts. The other important thing is, there is no user database and the vendor doesn't have the data of users. The vendor only has the orders data...
Secure Supply Chain 🚛
Now, let me explain how blockchain powers the supply chain in UMart. Here is the step-by-step process...
The user completes his shopping, fills the order form, confirms and places the order by completing the transaction of the order summary in his Metamask wallet. Here the supply chain is started.
The amount in Ethers gets transferred from the user's wallet to the smart contract. The smart contract holds the ethers until the order is either confirmed or cancelled.
The vendor will see the order data in the admin panel, set the order for shipping along with a secret pin that's generated while placing the order is tagged to the order package and then change the order status to shipped by clicking the button in the order-box in admin panel.
The delivery boy arrives at the destination and asks the user for the secret pin before handing over the products to the user.
The user can get the secret pin of that order only when he confirms the order. By clicking the 🚚 button in the order-box of the user's orders history, he should complete the transaction in his Metamask wallet.
When he confirms the order, he can see and tell the secret pin and receive the order and at the same time ethers get transferred from the smart contract to the admin's wallet. Here the supply chain has ended.
The user can also cancel the order before he received the order by clicking on the "cancel order" in his orders history. Then, the ethers get transferred from the smart contract back to the user's wallet. This can happen if the shipping is late or for any other reason.
In this way, users can trust that their hard earned money is safe and can't be cheated. Isn't it great and secure..?
Serverless App 🚫
Serverless App, isn't this phrase amazing? This Web app uses the IPFS network to store data. IPFS is a decentralised files storage network/protocol which is similar to blockchain. To make our data persist, we need to set up our own node. I'm using the Moralis's gateway and Moralis sets up everything for me.
Though Firebase is used to store the hashes, it is going to be changed in the near future when Ethereum 2.0 is released and the gas fee is reduced.
Hence, UMart uses a decentralised files storage network and is a serverless app.
It's PWA... 📥
UMart is a Progressive Web App (PWA) that can be installed on any OS. Though it's not a completely native app, it can cache the files and provide a native like experience. This can also increase customer retention.
UMart - The End Product 📦
Hmm... Finally, UMart is a ready to use blockchain based single vendor ecommerce web app template.
If you are to create an ecommerce solution for your clients, don't reinvent the wheel and consider using UMart to reduce your development ⏰ rapidly (currently may not, but in the next few years 😉)
The way to use this template is, download the code from github, customize CSS files, images, and even other backend systems if you like and host it on any great hosting platform like Netlify
However, to use it in the real world few changes must be made like, deploying to mainnet, making the admin panel private and adding tax and other charges while checking out.
Future Plans 🔮
My plans for further upgradation of UMart are,
Storing the hashes of files in blockchain using smart contract instead of Firebase Firestore.
Adding dynamic analytics to the admin panel.
Changing the UI from 2D to 3D 🎊.
Yes, currently I'm learning three.js, a WebXR & WebGL framework to build 3D UIs and AR & VR experiences on the web. I'm planning to build a 3D shopping mall along with AR experiences in the next few months.
Final Thoughts... 🙂
Oh! I forgot something. A very big thanks to Netlify for making it easy to deploy our projects for free and most importantly for hosting this hackathon and giving me such a great chance to showcase my talent and skills.
Finally, I'm submitting UMart - A blockchain based single vendor ecommerce web app template as my Netlify×Hashnode Hackathon project.
Taking a leave for now... 👋 Bye!