{"id":21361148,"url":"https://github.com/kaymen99/decentral-medium","last_synced_at":"2025-06-22T18:04:33.865Z","repository":{"id":37254973,"uuid":"505620970","full_name":"kaymen99/Decentral-medium","owner":"kaymen99","description":"A decentralized web3.0 clone of the medium application built on the polygon blockchain","archived":false,"fork":false,"pushed_at":"2023-02-04T21:53:17.000Z","size":613,"stargazers_count":8,"open_issues_count":0,"forks_count":3,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-06-22T18:03:29.147Z","etag":null,"topics":["blockchain","dapps-development","ethersjs","hardhat","medium-clone","reactjs","solidity"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kaymen99.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-06-20T22:54:10.000Z","updated_at":"2025-03-06T10:59:58.000Z","dependencies_parsed_at":"2023-02-18T19:45:56.665Z","dependency_job_id":null,"html_url":"https://github.com/kaymen99/Decentral-medium","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/kaymen99/Decentral-medium","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaymen99%2FDecentral-medium","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaymen99%2FDecentral-medium/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaymen99%2FDecentral-medium/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaymen99%2FDecentral-medium/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kaymen99","download_url":"https://codeload.github.com/kaymen99/Decentral-medium/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaymen99%2FDecentral-medium/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261338954,"owners_count":23143891,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blockchain","dapps-development","ethersjs","hardhat","medium-clone","reactjs","solidity"],"created_at":"2024-11-22T06:08:47.318Z","updated_at":"2025-06-22T18:04:28.814Z","avatar_url":"https://github.com/kaymen99.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv id=\"top\"\u003e\u003c/div\u003e\n\n\u003c!-- ABOUT THE PROJECT --\u003e\n## Decentral-medium\n\nThis 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.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"Dark\" src=\"https://user-images.githubusercontent.com/83681204/175719913-82469809-5fbc-4f0b-a341-53f30c9f8226.png\" width=\"100%\"\u003e\n\u003c/p\u003e\n\n\n### Built With\n\n* [Solidity](https://docs.soliditylang.org/)\n* [Hardhat](https://hardhat.org/getting-started/)\n* [React.js](https://reactjs.org/)\n* [ethers.js](https://docs.ethers.io/v5/)\n* [web3modal](https://github.com/Web3Modal/web3modal)\n* [material ui](https://mui.com/getting-started/installation/)\n\n\n\u003cdetails\u003e\n  \u003csummary\u003eTable of Contents\u003c/summary\u003e\n  \u003col\u003e\n    \u003cli\u003e\n      \u003ca href=\"#getting-started\"\u003eGetting Started\u003c/a\u003e\n      \u003cul\u003e\n       \u003cli\u003e\u003ca href=\"#prerequisites\"\u003ePrerequisites\u003c/a\u003e\u003c/li\u003e\n       \u003cli\u003e\u003ca href=\"#project-structure\"\u003eProject structure\u003c/a\u003e\u003c/li\u003e\n       \u003cli\u003e\u003ca href=\"#initial-setup\"\u003eInitial Setup\u003c/a\u003e\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\n      \u003ca href=\"#how-it-works\"\u003eHow it Works\u003c/a\u003e\n     \u003cul\u003e\n       \u003cli\u003e\u003ca href=\"#contracts\"\u003eContracts\u003c/a\u003e\u003c/li\u003e\n       \u003cli\u003e\u003ca href=\"#user-interface\"\u003eUser interface\u003c/a\u003e\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#how-to-use\"\u003eHow to Use\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#future-developements\"\u003eFuture developements\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#contact\"\u003eContact\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#license\"\u003eLicense\u003c/a\u003e\u003c/li\u003e\n  \u003c/ol\u003e\n\u003c/details\u003e\n\n\n\u003c!-- GETTING STARTED --\u003e\n## Getting Started\n\n### Prerequisites\n\nPlease install or have installed the following:\n* [nodejs](https://nodejs.org/en/download/) and [yarn](https://classic.yarnpkg.com/en/)\n* [MetaMask](https://chrome.google.com/webstore/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn) Chrome extension installed in your browser\n* [Ganache](https://trufflesuite.com/ganache/) for local smart contracts deployement and testing\n\n### Project structure\n\nThis a full stack web3 decentralized application built using Hardhat/React js, so the project is devided into 2 main parts:\n\u003cul\u003e\n \u003cli\u003e\u003cb\u003eSmart contract/backend side:\u003c/b\u003e\u003c/li\u003e\n 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. \n  \u003cli\u003e\u003cb\u003efront-end side:\u003c/b\u003e\u003c/li\u003e\nThe code for the UI can be found in the src folder (as in all reactjs apps)\n\u003c/ul\u003e\n\n### Initial Setup\n1. Clone the repository and install all the required packages by running:\n   ```sh\n   git clone https://github.com/kaymen99/Decentral-medium.git\n   cd Decentral-medium\n   yarn\n   ```\n2. Private key \u0026 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 :\n   ```sh\n    RINKEBY_ETHERSCAN_API_KEY=\"your etherscan api key\"\n    RINKEBY_RPC_URL=\"https://eth-rinkeby.alchemyapi.io/v2/apiKey\"\n    POLYGON_RPC_URL=\"Your polygon RPC url from alchemy or infura\"\n    MUMBAI_RPC_URL=\"Your mumbai RPC url from alchemy or infura\"\n    PRIVATE_KEY=\"ganahce-private-key\"\n   ```\n* \u003cb\u003eIMPORTANT : \u003c/b\u003e For the purpose of testing you can just provide the ganache private key and ignore all the other variables.\n\n3. 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](https://web3.storage), when you finish add your api token into the `src/utils/ipfsStorage.js` file:\n   ```js\n    const web3storage_key = \"YOUR-WEB3.STORAGE-API-TOKEN\";\n   ```\n   \n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- Working EXAMPLES --\u003e\n## How it Works\n\n### Contracts\n\nThe blog is based on the MediumBlog.sol smart contract which contains all the backend logic :\n\n\u003ch4\u003eCore functions:\u003c/h4\u003e\n\u003cul\u003e\n  \u003cli\u003e\u003cb\u003esubscribe:\u003c/b\u003e allow any user to subscribe \u0026 create a profile in the app for posting articles.\u003c/li\u003e\n  \u003cli\u003e\u003cb\u003eeditProfile:\u003c/b\u003e enable author to update his profile (username, picture, description).\u003c/li\u003e\n  \u003cli\u003e\u003cb\u003ecreatePost:\u003c/b\u003e once subscribed each user can add it's own posts by providing a title,an overview, main content and the read time\u003c/li\u003e\n  \u003cli\u003e\u003cb\u003eupdatePost:\u003c/b\u003e author can change the details of previously published posts \u003c/li\u003e\n  \u003cli\u003e\u003cb\u003etipPostCreator:\u003c/b\u003e allow any user to give a tip to a certain post author\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003ch4\u003eAdmin functions: (admin is the only one that can call this functions)\u003c/h4\u003e\n\u003cul\u003e\n  \u003cli\u003e\u003cb\u003echangeListingFee:\u003c/b\u003e change the fee charged when posting a new article\u003c/li\u003e\n  \u003cli\u003e\u003cb\u003ewithdrawBalance:\u003c/b\u003e the admin is able to withdraw th contract balance which is accumulated from the charged posting fee\u003c/li\u003e\n\u003c/ul\u003e\n\n\n### User interface\n\nThe app is structered into 4 pages:\n\n* The home page is the landing page of the app, it lists all the published posts (both featured and normal).\n\n![Capture d’écran 2022-06-24 à 21 50 22](https://user-images.githubusercontent.com/83681204/175750937-d4bbbaf2-6d43-4c36-8729-9538c07ab7d3.png)\n\n* 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\n\n![Capture d’écran 2022-06-28 à 22 26 45](https://user-images.githubusercontent.com/83681204/176301443-ade559bc-7898-4498-b61d-384f57f95058.png)\n\n* To be able to create a post the author must first register into the app by providing: username, profile description \u0026 picture. The 'register' button can be found in the dashboard page on the first visit.\n\n![Capture d’écran 2022-06-24 à 23 50 17](https://user-images.githubusercontent.com/83681204/175751091-7fbd6341-310b-411b-8353-20b653260534.png)\n\n* 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'. \n\n![Capture d’écran 2022-06-24 à 21 56 27](https://user-images.githubusercontent.com/83681204/175751246-df4a73f5-4b56-4583-b76f-f475abd3772a.png)\n\n* 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,...).\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd valign=\"top\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/83681204/175751412-8a3adda8-5648-4e02-b075-e9a03af37189.png\"\u003e\u003c/td\u003e\n    \u003ctd valign=\"top\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/83681204/175751552-7d21b151-6f4d-4c7d-8287-d82e1cb97e7a.png\"\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n \u003c/table\u003e\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\n\u003c!-- USAGE EXAMPLES --\u003e\n## How to Use\n\nAfter going through all the installation and setup steps, you'll need to deploy the smart contract to the ganache network by running: \n   ```sh\n   cd hardhat\n   npx hardhat run scripts/deploy-script.js --network ganache\n   ```\nThis 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\n\nIf you want to test the functionnalities of the MediumBlog contract you can do it by running:\n   ```sh\n   npx hardhat test\n   ```\nTo start the app you have to go back to the Decentral-medium folder and run the command:\n   ```sh\n   yarn start\n   ```\n   \n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- FUTURE DEVELOPEMENT --\u003e\n## Future developements\n\n* Add article search and filter functinnalities.\n\n* Perfom contracts audit using known tools such as echidna \u0026 slither.\n   \n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- Contact --\u003e\n## Contact\n\nIf you have any question or problem running this project just contact me: aymenMir1001@gmail.com\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\n\u003c!-- LICENSE --\u003e\n## License\n\nDistributed under the MIT License. See `LICENSE.txt` for more information.\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkaymen99%2Fdecentral-medium","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkaymen99%2Fdecentral-medium","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkaymen99%2Fdecentral-medium/lists"}