This is a Next.js project bootstrapped with create-next-app.
https://www.linkedin.com/in/mohd-ziyad-565081225/
https://mumbai.polygonscan.com/address/0x55525391d1A9EBd9FbAc0B44bb65E9336047f2dA
https://thegraph.com/hosted-service/subgraph/mohdziyadc/peer-tube-v2
PeerTube is a decentralized video sharing and viewing platform. It is like a Web3 version of YouTube. PeerTube lets you upload a video, view it, subscribe to a channel, like/dislike and comment on a video publicly. Users can also search for the videos which are present on chain. Users pay a subscription price to follow creators.
We combined Push Protocol, TheGraph Protocol and Livepeer, and deployed it all on Polygon Mumbai Testnet.
There are three parts to our project.
First - The Backend.
The Backend is basically our smart contract which interacts with the blockchain. For the smart contract, we have used Solidity. We have used Hardhat for compiling, deploying and testing our contract. Then we have setup a subgraph using TheGraph Protocol for indexing events from Ethereum. For storing thumbnail to IPFS, we have used Web3 Storage which uses Filecoin under the hood.
Second - The Frontend
We built an extensive front-end. For this we have used Next.js. We used Apollo to interact with the subgraph, and used wagmi+ethers.js to interact with the PeerTube smart contract. We have used RainbowKit for the connect wallet button.
Third - Push Protocol and Livepeer
Once a user uploads their video from the frontend, it would be uploaded to ipfs using Livepeer’s API and from there the video will be fetched and streamed. The IPFS url is used to create a video. We have also implemented Push Protocol by showing notifications in a notification box. The creator of the video can only notify their subscribers. For subscriptions and push notifications, we have used Push Protocol.
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.
API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.js.
The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.
This project uses next/font to automatically optimize and load Inter, a custom Google Font.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.