Deployed contract

• About the Project
  • Use cases
  • Architecture
• Directory Structure
• Installation
  • Prerequisites
  • Smart Contracts
  • Frontend
  • Local development
• Deployment
  • Smart Contract
  • Web App
• Screencast link
• Public Ethereum wallet for certification
• Happy Path User flow
• Documentation
• Environment variables
• TODO Features

My idea for blockchain bootcamp is to create a decentralized pinterest where people can share images. People can also like images shared by others. This action transfers some amount of cryptocurrency (0.01 ETH) to the author of the image being liked. The idea is to move away from Pinterest having central authority over the platform. This ensures decentralized uploading of images and allows people to appreciate art by tipping the author of the image.

• Users should be able to upload image
• Users should be able to scroll through their feed and see all the images uploaded across the globe
• Users should be able to tip any image they like with 0.01 ETH
• User is shown tip confirmation with some level of determinis

• Local blockchain development : Ganache
• Smart contracts development : Truffle
• Decentralized File Storage : IPFS
• Frontend library : React
• Interaction with Ehtereum node : Web3.js
• Crypto wallet for transactions : Metamask

The project was bootstrapped from Razzle. The client/ folder contains the React frontend app, everything outside of this folder contains the smart contract code. Note, that the smart contract code has its own package.json and node_modules/ for the smart contract's dependencies (which are different from the ones inside of client/). There is also a docs/ folder with the generated documentation (see more in the Documentation section). test/ folder contain's smart contract's tests.

• client: Project's React frontend.
• contracts: Smart contracts that are deployed in the Ropsten testnet.
• migrations: Migration files for deploying contracts in contracts directory.
• test: Tests for smart contracts.

• Install Node.js >= v14
• Install Truffle and Ganache
• Yarn
• git checkout main
• Install MetaMask extension in your browser

• Run yarn install in project root to install Truffle build and smart contract dependencies
• Run local testnet in port 7545 with an Ethereum client, e.g. Ganache
• truffle migrate --network development
• truffle console --network development
• Run tests in Truffle console: test
• development network id is 1337, remember to change it in Metamask as well!

• cd client
• yarn install
• yarn start
• Open http://localhost:3000

• truffle migrate --network development
• truffle console --network development
• let dp = await Depinterest.deployed()
• Add two images:
• dp.uploadImage("https://images.hdqwalls.com/wallpapers/doge-to-the-moon-05.jpg", "Doge coin is the best. Wohhooo!")
• dp.uploadImage("https://themarketperiodical.com/wp-content/uploads/2021/08/s2-3.jpg", "Solana is the future folks.")
• Send ETH to local wallet: web3.eth.sendTransaction({ from: "<your local address>", to: "<your local network wallet>", value: web3.utils.toWei("10") })
• cd client && yarn start
• Open local ui from http://localhost:3000
• Make sure your Metamask localhost network is in port 7545 and chain id is 1337.
• If you get TXRejectedError when sending a transaction, reset your Metamask account from Advanced settings.

The web app (everyting inside the client/) folder and the smart contract (everyting EXCEPT the client/ folder are deployed separately).

We will deploy the smart contract to Ropsten Network using Infura.

• Create an .env file inside blockchain-developer-bootcamp-final-project.
• Copy the contents of .env.sample to .env
• Pick an address that is going to deploy the contract (and make sure that address has funds) and fill out its mnemonic in the ROPSTEN_MNEMONIC variable in the .env file.
• Create an Infura account - follow these directions up to and including Step 2.
• Copy the PROJECT_ID generated on Infura dashboard and add to the .env file in the ROPSTEN_INFURA_PROJECT_ID variable.
• Run truffle migrate --network ropsten

DO NOT SHARE YOUR INFURA URL OR MNEMONIC OR COMMIT THEM TO VERSION CONTROL!

• Create a Vercel account if you don't have one.
• Setup you project by following these steps.
• Connect this github repo to the pipeline.
• Make sure you have the following Build and Deployment Settings in your Project Settings on Vercel
• Trigger deployment by selecting the branch main

Youtube Link

0x9fd84217708c3360F50372533f57B35Aaa2B9606

1. Enter the website
2. Login with Metamask
3. Browse the images
4. Select an image
5. Pay a tip to the image author with Metamask (smart contract call) as a token of appreciation.
6. The tip is successful after there are 2 Block confirmations added to the chain as a guard rail.

Run this command to generate the documntaion for the smart contract. The generated *.md files wil appear in the docs/ folder.

npx solidity-docgen --solc-module solc-0.8 

These are not needed for local development

ROPSTEN_INFURA_PROJECT_ID=
ROPSTEN_MNEMONIC=

• Fund withdrawal
• Custom tipping