Buying and Selling with Crypto: How Our MERN Stack E-Commerce App Integrates with MetaMask Wallet

5 min readFeb 18, 2023

Introduction:

Hi, we’re Mouadh and Rym, a team of two full-stack web developers. We’re thrilled to introduce our latest project, an e-commerce web app called “Trusty”. Trusty is a platform where users can buy and sell products using their MetaMask wallet in Ethereum.

The app is built using the MERN stack, which includes MongoDB, Express, React, and Node.js. In addition to the MERN stack, the app also use the ether.js library to interact with MetaMask on the Ethereum network.

Our e-commerce web application is a final study project in software engineering with specialization in full-stack web development.

Our team has worked together to create a smooth and secure buying and selling experience for our users. Sellers can list their products for sale, while buyers can browse products and purchase them directly using their MetaMask wallet.

We built Trusty because we believe that cryptocurrency and blockchain technology have the potential to revolutionize the way we transact online. Our goal was to create a secure, decentralized platform that allows buyers to search and purchase products, and for sellers to list and sell their products using Ethereum.

Gallery:

Landing page:

main page:

Post details:

where users can buy a product, create a feedback etc

Technologies Used:

MongoDB is used as our database to store product and user information. We chose MongoDB for its flexibility and ability to scale with our application’s needs. We used Mongoose, a Node.js library, to create models for our data and to query the database.

Express.js is used as our backend framework, providing a robust and scalable foundation for our server-side code. We used Express to handle requests, authenticate users, and interact with our database. We also used Express to create APIs that allow our frontend to communicate with our backend.

React is used as our frontend framework, providing a modern and intuitive user interface. We used React to create our user interface components, manage state, and handle user interactions. We also used React Router to handle client-side routing and Redux to manage global state.

Node.js is used as our runtime environment for server-side JavaScript. We used Node.js to run our server-side code, which includes our backend logic, API endpoints, and database interactions. Node.js allows us to write our server-side code in JavaScript, which provides consistency and simplifies our codebase.

In addition to the MERN stack, we used the ether.js library to interact with MetaMask on the Ethereum network. Also we used them to connect to the MetaMask wallet account via its extension, where users manage their wallets.

Features:

Some of the key features of the app include:

Search and browse products: Buyers can browse products by pagination or use the search bar to find specific products. Each product listing displays a title, description, price, tags, seller name, button to buy and image.
Payment through MetaMask: Users can make payments using the MetaMask wallet, a browser extension that allows users to interact with the Ethereum network. This feature ensures secure, fast, and low-cost transactions, while also providing an immutable record of transactions on the Ethereum blockchain.
Commentary section: Buyers can make their feedback for sellers and helping other buyers make informed purchasing decisions.

code snippets:

Payment is a critical aspect of any e-commerce application, and in Trusty, we integrated with the Ethereum network to enable payments using the MetaMask wallet. Here are a piece of code to illustrate how this feature works:

This is a JavaScript function that starts a payment transaction using the Ethereum network. Here’s a breakdown of what it does:

It takes in an object as an argument with the following properties:
setError: a function that sets an error message if something goes wrong
setTxs: a function that sets an array of transaction objects if the payment is successful
ether: the amount of Ether to send in the transaction
addr: the Ethereum address of the recipient of the transaction
It first checks if the user has a crypto wallet installed by checking if window.ethereum exists. If it doesn't, an error is thrown.
It then requests access to the user’s Ethereum accounts by calling window.ethereum.send("eth_requestAccounts"). This will prompt the user to connect their wallet to the website if it's not already connected.
It creates a new Web3Provider using window.ethereum as the provider, and gets the current user's signer object.
It validates the recipient’s address by calling ethers.utils.getAddress(addr) which throws an error if the address is invalid.
It constructs a new transaction object by calling signer.sendTransaction() with the recipient's address and the amount of Ether to send.
Finally, it logs the transaction details and sets the transaction object in the setTxs function. If there's an error, it sets the error message using the setError function.

Challenges:

Making some pages fully responsive was challenging because we wanted our app to be accessible and functional across all devices, from smartphones to desktops. However, we realized that some of the pages we had designed were not responsive.

Accomplishing the deployment of the app was also a challenge because we wanted to make sure the app was accessible to as many users as possible. However, we had limited experience with deploying apps, so we had to do some research to figure out the best way to deploy our app.

We currently working to overcome these challenges.

Conclusion:

Building Trusty using the MERN stack and ether.js library was an exciting and challenging journey for us. Our goal was to create a decentralized e-commerce platform that leverages the potential of blockchain and cryptocurrency to make online transactions more secure and efficient. With features such as product search and browse, payment through MetaMask, and a commentary section for feedback, we have created a smooth and secure buying and selling experience for our users. However, challenges such as ensuring full responsiveness of the app and deploying it proved to be obstacles that we must overcome. We are currently working on these challenges and hope to make Trusty even more accessible and functional for all users. We hope that our step-by-step guide and code snippets will be helpful for other developers looking to build their own MERN app with Ethereum integration.

Mouadh Amemri: https://www.linkedin.com/in/mouadh-amemri/

Rym Joudi: https://www.linkedin.com/in/rym-joudi/