kaymen99 / web3-blog

A web3.0 personal blog supporting membership and onlyMembers posts built on the Ethereum blockchain

Web3-Blog

A web3.0 personal blog supporting public articles available for everyone and only members posts accessible only for the blog members (who paid a monthly/yearly membership), its built completly on top of the Ethereum blockchain.

Built With

• Solidity
• Hardhat
• React.js
• ethers.js
• web3modal
• material ui

Table of Contents

1. How it works
   • Smart Contracts
   • Backend
   • User interface
2. How to Run
   • Prerequisites
   • Contracts
   • Backend
   • Front-end
3. Contact
4. License

How it works

Smart contracts

The dapp is built around the MyBlog.sol contract it give the blog owner the opportunity to post public articles available for everyone and private one's only accessible for the blog members, a user can become a blog member by subscribing through monthly/yearly plan. The contract have the following functionnalities :

• createPost : for adding new posts to the blog (both public and only members ones)
• updatePost : to update post title, content, overview...
• becomeMember : it allows user to subscribe to the blog either with monthly or yearly membership plan
• setMonthlyMembershipFee : it allows the blog owner to change the value of the monthly membership fee
• setYearlyDiscountRate : it allows the blog owner to change the value of the yearly membership discount rate (by default it's set to 90%)
• withdrawBalance : the blog owner can collect all the fees paid by the blog members

All the article are written from the user interface in a page only available for the blog owner and their content is stored into IPFS. As it is impossible to keep data private on the blockchain, the real IPFS URL for the only members articles are stored into a private database and a hashed version of the URL (hashed with keccak256) is stored on chain.

So when a random user calls the contract he can not see the post content, but once the user subscribe through the app he can access the true post URL from the database and thus he can see the post content and he can easily verify that it's the correct content by hashing the URL using keccak256 and comparing the result with the post hash stored on-chain.

Backend

As mentionned previously the app needs a private database for saving the only members articles IPFS URLs, so i built a backend server with express js, it support two calls:

• get : for getting all the only members articles IPFS URLs
• save : allow the blog owner to add or update the URL of a given article

For the moment the server doesn't use an advanced database (like MongoDB, SQL) but it uses a simple local JSON database, when a user tries to read an only member article the front-end verify first if he is a member or not, if yes it sends a request to the backend to get the correct post URL.

User interface

The app fron-end is built with React JS, it uses ethersjs and web3modal libraries to connect to the blockchain, as it's a personal blog their are to parts one for all the users and a part for creating & updating posts and managing the blog (through a dashboard) reserved to the blog owner. In total it contains 4 pages :

• The Home page is the lanfing page of the blog it contains a list of all published articles with their titles and overviews, it allows the users to access to each after connecting their wallet with Metamask using the "connect wallet" button at the top.

• In the article page users can see the article content, when the user try to access this page the app will first check the article type if it is a PUBLIC one (meaning that it's available for everyone) it immediataly shows the content, but if it's a member only post the app will verify if the user is a blog member or not, if yes it will redirect him to the post page :

• If a non blog member try to access a PRIVATE article (only members), he will be immediataly redirected to the subscription page where he can choose a membership plan and pay directly in ETH through Metamask wallet :

• The app offer a simple dashboard which can be accessed only by the blog owner from the window that appears when clicking on the account button after connecting to Metamask, there the owner can change the current membership fee or discount rate, and he can also see/withdraw the blog balance :

• By clicking on the "Add New Post" button available in the dashboard the owner will be rediracted to the Create Post page where he can enter the article title, overview, read time, cover image and the article type (public or only members). The page also contains a text editor built with the @uiw/react-md-editor library which allow the owner to write and design the article in any prefered way :

(back to top)

How to Run

Prerequisites

Please install or have installed the following:

• nodejs and yarn
• MetaMask Chrome extension installed in your browser
• Ganache for local smart contracts deployement and testing

Contracts

The MyBlog.sol contract was developed with the Hardhat framework, before deploying it you must first install the required dependancies by running :

cd smart_contracts
yarn

Next you need to setup the environement variables in the .env file, this are used when deploying the contracts :

 RINKEBY_ETHERSCAN_API_KEY="your etherscan api key"
 RINKEBY_RPC_URL="Your rinkeby RPC url from alchemy or infura"
 POLYGON_RPC_URL="Your polygon RPC url from alchemy or infura"
 MUMBAI_RPC_URL="Your mumbai RPC url from alchemy or infura"
 PRIVATE_KEY="your private key"

• NOTE : Only the private key is needed when deploying to the ganache network, the others variables are for deploying to the testnets or real networks and etherscan api key is for verifying your contracts on rinkeby etherscan.

After going through all the configuration step, you'll need to deploy the smart contract to the ganache network by running:

yarn deploy --network ganache

This will deploy the contract to the Ganache network and create a config.js file and an artifacts folder and transfer them to the src folder to enable the interaction between the contract and the UI.

• IMPORTANT : I used the ganache network for development purposes only, you can choose another testnet or real network if you want, for that you need to add it to the hardhat.config file for example for the rinkeby testnet

  rinkeby: {
     url: RINKEBY_RPC_URL,
     accounts: [process.env.PRIVATE_KEY],
     chainId: 4,
   }

If you want to test the functionnalities of the Blog contract you can do it by running:

yarn test

Back-end

To run the Dapp completly you must also start the backend server responsable for the only members articles URLs handling, first as previously install the required dependancies by running :

cd backend
yarn

Then start the server with the command :

yarn start

• IMPORTANT : To run the app correctely the server must stay active all the time you are testing the app, so i recommend opening 2 terminal one for the server and the other for the front-end.

Front end

To start the user interface just run the following commands :

cd front-end
yarn
yarn start

As infura recently removed its free IPFS storage gateway i used web3.storage api for storing data into IPFS, this api is as simple as infura it requires the creation of a free account and a new api token which you can do here, when you finish add your api token into the front-end/src/utils/ipfsStorage.js file:

 const web3storage_key = "YOUR-WEB3.STORAGE-API-TOKEN";

If you did everything right, you can now connect to Metamask and access your Dashboard, there you can start blogging.

(back to top)

Contact

If you have any question or problem running this project just contact me: [e-mail]

(back to top)

License

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)