https://github.com/reaperdragon/web3-youtube
Web3 YoutTube is Decentralize YouTube Clone Built with Next Js, Hardhat, Solidity, IPFS, The Graph Protocol and Tailwind CSS.📹
https://github.com/reaperdragon/web3-youtube
apolloclient blockchain ethereum ethersjs graphql hardhat ipfs ipfs-client javascript nextjs openzeppelin-contracts react-hooks reactjs smart-contracts solidity tailwindcss thegraphprotocol typescript youtube
Last synced: 8 months ago
JSON representation
Web3 YoutTube is Decentralize YouTube Clone Built with Next Js, Hardhat, Solidity, IPFS, The Graph Protocol and Tailwind CSS.📹
- Host: GitHub
- URL: https://github.com/reaperdragon/web3-youtube
- Owner: reaperdragon
- Created: 2022-09-25T11:30:51.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-12-31T06:44:35.000Z (over 3 years ago)
- Last Synced: 2024-08-20T14:59:49.243Z (over 1 year ago)
- Topics: apolloclient, blockchain, ethereum, ethersjs, graphql, hardhat, ipfs, ipfs-client, javascript, nextjs, openzeppelin-contracts, react-hooks, reactjs, smart-contracts, solidity, tailwindcss, thegraphprotocol, typescript, youtube
- Language: JavaScript
- Homepage:
- Size: 571 KB
- Stars: 4
- Watchers: 2
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Web 3.0 YouTube App 📹
### Built with Next Js, Hardhat, Solidity, IPFS, The Graph Protocol and Tailwind CSS.
### Functionalities
- [x] Upload Video
- [x] play video
- [x] Search Videos
- [x] Upload Short
### Stack
- Frontend : [Next Js](https://nextjs.org/)
- Smart Contract Lang : [Solidity](https://docs.soliditylang.org/en/v0.8.17/)
- Indexing : [The Graph](https://thegraph.com/en/)
- Dev Environment for ETH Software: [Hardhat](https://hardhat.org/)
- Testing: [Chai](https://www.chaijs.com/)
- File Storage : [IPFS](https://ipfs.tech/)
- Network : [Polygon](https://polygon.technology/)
- Style : [Tailwind CSS](https://tailwindcss.com/)
- State management : [GraphQL Apollo Client](https://www.apollographql.com/)
- Fonts - [Google Fonts](https://fonts.google.com/)
- Icons : [React Icons](https://react-icons.github.io/react-icons/)
### Installation
#### Fork The Repo
Click on the Right Side of the Top Bar to After the Watch button. 
Now It will be available in GitHub Account.
#### OR
#### Clone
- Clone this repo with url
```shell
git clone https://github.com/Aakrut/web3-youtube
```
##### Setup
> Install npm dependencies using npm install
```shell
cd web3-youtube && npm install
```
> Set up environment Variables I already Provided .env.example file.
> Create a .env file in the root directory.
> Set up required environment variables.
```
URL="POLYGON_TESTNET_URI"
PRIVATE_KEY="METAMASK_PRIVATE_KEY"
NEXT_PUBLIC_CONTRACT_ADDRESS="CONTRACT_ADDRESS"
NEXT_PUBLIC_PROJECT_ID="PROJECT_ID"
NEXT_PUBLIC_PROJECT_SECRET="PROJECT_SECRET"
NEXT_PUBLIC_GRAPHQL_URL="GRAPHQL_URL"
```
> In the Root Directory First Compile Your Smart Contract with This Following Command.
```shell
npx hardhat compile
```
> After Deploy Smart Contract to the Polygon Mumbai Testnet with this command.
```shell
npx hardhat run scripts/deploy.js --network mumbai
```
> Copy Smart Contract Address and replace it in with your "CONTRACT_ADDRESS"
```
NEXT_PUBLIC_CONTRACT_ADDRESS="CONTRACT_ADDRESS"
```
## For Setting up Graph Protocol - [The Graph](https://thegraph.com/en/)
now replace the graph url with
```
NEXT_PUBLIC_GRAPHQL_URL="GRAPHQL_URL"
```
Let's Run this command for dev
```shell
npm run dev
--or--
yarn dev
```
### Screenshots
