Shih-Yu / Broadcaster

A walk though of building a Full stack Dapp for live streaming and pricefeed

Broadcaster - Site to stream Web3 News

A simple webpage that can live stream

With the following features:

• Tip the streamer
• Displays updated token prices in real time

Objectives

• Setup the project
• Install dependencies
• Write Smart contract for tip feature
• Import Chainlink pricefeed and incorporate into smart contract
• Setup network configuration
• Compile and deploy contract to testnet
• Connect to hot wallet(Metamask)
• Build a simple website to interact with contract
• Test interaction to contract on website

Back-end

• Create project folder
• npm init -y
• npm install dependencies
  • @chainlink/contracts
  • @truffle/hdwallet-provider
  • dotenv
• Set up and obtain key for Web3 provider(Alchemy)
• Create dotenv file
• Set up network configuration
• Import Chainlink Pricefeeder contract
• Write Broadcaster contract
• Write migration script
• Compile and deploy contract to testnet(Rinkeby)

Front-end

• Create React App
• npx create-react-app client
• npm install dependencies
  • ethers.js
• Get JWPlayer code
• Create dotenv file
• Connect to Metamask
• Get pricefeed from Chainlink
• Display video stream

Project interaction

To recreate this project

• clone this on your computer in the terminal

git clone [e-mail]:Shih-Yu/Broadcaster.git

• Then install in using npm

npm init

• Then start the react project

npm start

Make sure you have Metamask browser extention install and setup