kaymen99 / Decentral-medium

A decentralized web3.0 clone of the medium application built on the polygon blockchain

Decentral-medium

This a decentralized web3.0 version of the Medium application built on the Ethereum/Polygon network (or any EVM compatible blockchain), users can create posts and save them directly into the blockchain using IPFS.

Built With

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

Table of Contents

1. Getting Started
   • Prerequisites
   • Project structure
   • Initial Setup
2. How it Works
   • Contracts
   • User interface
3. How to Use
4. Future developements
5. Contact
6. License

Getting Started

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

Project structure

This a full stack web3 decentralized application built using Hardhat/React js, so the project is devided into 2 main parts:

• Smart contract/backend side:
Located in the hardhat folder, it contains the blockchain developement envirenment built using Hardhat, with all the smart contracts tests, deployement scripts and the plugins used.
• front-end side:
The code for the UI can be found in the src folder (as in all reactjs apps)

Initial Setup

1. Clone the repository and install all the required packages by running:

   git clone https://github.com/kaymen99/Decentral-medium.git
   cd Decentral-medium
   yarn

2. Private key & Network Urls setup: in the hardhat folder you'll find a .env file, it's used to store all the sensible data/keys like your private key, RPC url for mainnet, rinkeby, kovan... (you get RPC url from services like Infura or Alchemy for free), you can also provide Etherscan api key to allow automatic contracts verifications :

    RINKEBY_ETHERSCAN_API_KEY="your etherscan api key"
    RINKEBY_RPC_URL="https://eth-rinkeby.alchemyapi.io/v2/apiKey"
    POLYGON_RPC_URL="Your polygon RPC url from alchemy or infura"
    MUMBAI_RPC_URL="Your mumbai RPC url from alchemy or infura"
    PRIVATE_KEY="ganahce-private-key"

• IMPORTANT : For the purpose of testing you can just provide the ganache private key and ignore all the other variables.

3. 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 src/utils/ipfsStorage.js file:

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

(back to top)

How it Works

Contracts

The blog is based on the MediumBlog.sol smart contract which contains all the backend logic :

Core functions:

• subscribe: allow any user to subscribe & create a profile in the app for posting articles.
• editProfile: enable author to update his profile (username, picture, description).
• createPost: once subscribed each user can add it's own posts by providing a title,an overview, main content and the read time
• updatePost: author can change the details of previously published posts
• tipPostCreator: allow any user to give a tip to a certain post author

Admin functions: (admin is the only one that can call this functions)

• changeListingFee: change the fee charged when posting a new article
• withdrawBalance: the admin is able to withdraw th contract balance which is accumulated from the charged posting fee

User interface

The app is structered into 4 pages:

• The home page is the landing page of the app, it lists all the published posts (both featured and normal).

• Eash author have it's own dashboard where he can find all his previously published posts, and he can add or edit the posts, the dashboard can be accessed from the 'connect' button

• To be able to create a post the author must first register into the app by providing: username, profile description & picture. The 'register' button can be found in the dashboard page on the first visit.

• For creating a new post the app provide the author a content editor built using the package @uiw/react-md-editor where he can freely design his post, then by providing a title, overview, cover imae and the article read time the author can publish the post while paying a small 'posting fee'.

• Each post can be viewed on it's own page, there readers can also choose to give a tip to the author by clicking on the 'give a tip' button which will open a window where the reader can select the tip amount. The author on the other hand can find and 'Edit Post' button which will redirect him to a page where he can modify the post informations (title, content,...).

(back to top)

How to Use

After going through all the installation and setup steps, you'll need to deploy the smart contract to the ganache network by running:

cd hardhat
npx hardhat run scripts/deploy-script.js --network ganache

This will 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

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

npx hardhat test

To start the app you have to go back to the Decentral-medium folder and run the command:

yarn start

(back to top)

Future developements

• Add article search and filter functinnalities.

• Perfom contracts audit using known tools such as echidna & slither.

(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)