arifshariati / dinstagram Goto Github PK

Imagine you want your ReactJs frontend to talk to ethereum blockchain via MetaMask wallet. Here i have tried to put together web3 with reactjs alongwith dummy smart contract on ganache blockchain called Dinstagram.

    1. Web3
    2. ipfs-http-client # for decentralized file storage
    3. chai and its related dependencies #for testing smart contracts

A user wants to upload his/her images on bloackchian rather conventional applications or websites like facebook or instagram. Since, you upload your images or data to blockchian, it is never owned by any single entity rather is made public.

Users visit the website which is based on blockchain and may want to tip you with ETH if they like it.

So, basically, this repo covers two use cases such as posting image and tipping image.

nonetheless, all transactions (uploading images or tipping an image) here does have a cost associated with it, called gasFees.

You don't have to worry about the gasFees since you will be trying on your local machine with ganache.

Post list from blockchian.

Pay gasFees for Posting image or tipping an image.

Ganache facilitates with local blockchian and gives 10 free account. You must have ganache installed on your machine.

If you want to use cli version of ganache, you can download globally by running below command on your terminal;

npm install -g ganache-cli

Install MetaMask chrome extension.

clone this repo to your local machine, navigate to the folder and run below command;

# npm
npm i

# yarn 
yarn

Launch Ganache desktop version and run below command in terminal while your are in project folder;

# for first time (deploys smart contract to ganache blockchain)
truffle migrate

# for re-migrating smart contract
truffle migrate --reset 

Once, smart contract is deployed on ganache locally, you can import account to MetaMask by copy account private key and paste in import field of MetaMask. Once done, connect your account with blockchain, connect option will be provided in MetaMask.

If everything till here went well, you can spin frontend by running below command in terminal;

npm run start