> ## Documentation Index
> Fetch the complete documentation index at: https://docs.livepeer.org/llms.txt
> Use this file to discover all available pages before exploring further.
# Youtube clone with FVM
> Learn how to Build a decentralized video application with FVM and Livepeer
This tutorial is based on Livepeer React version 3.9 or earlier, which is now
deprecated. Please ensure that you use Livepeer React version 4 or later, with
the new Livepeer JavaScript SDK. The integration process may appear different,
but the underlying concepts remain same.
The Filecoin Virtual Machine (FVM) is a runtime environment designed for
executing smart contracts on the Filecoin network. It enables developers to
write and deploy custom code on Filecoin blockchain unleashing the ability to
write software that automates the storage, retrieval, and ultimately the
transformation of data in a Web3-native way. This allows for decentralized
applications to provide permanent storage guarantees for user content through
smart contracts that store video data securely on Filecoin. FVM allows
developers to write smart contracts on the Filecoin blockchain to automate
storage, retrieval, and transformation of data.
For end-users, Web3 apps provide greater security, privacy, and control over
their data. By leveraging the power of blockchain technology, users can be sure
that their data is stored in a tamper-proof and decentralized manner, which
means that no single entity has complete control over their data. This provides
greater protection against data breaches, hacks, and other security threats.
When combined with Livepeer, developers can build decentralized video
applications, archive videos, create video NFTs, and more. In this tutorial, you
will learn how to build a decentralized video application with FVM and Livepeer.
## Prerequisites
Before you start with this tutorial, make sure you have the following tool
installed on your machine:
* [Node.js](https://nodejs.org/en/) v16 or later
* [Metamask](https://metamask.io/download/) extension
In addition to the above tools, this tutorial assumes that you have a basic
understanding of Solidity and Next.js
## Setting up Next.js App
First, create a directory for the project and then initialize a Next.js app
using the following command in your terminal:
```
npx create-next-app .
```
This will create a new Next.js app in the current directory and install all the
necessary dependencies. Once the project is created successfully, run the
following command to install a few other dependencies.
```js theme={"theme":{"light":"github-light","dark":"dark-plus"}}
npm install @livepeer/react lighthouse-web3/sdk react-icons ethers moment
```
### Adding TailwindCSS
Tailwind CSS is a utility-first CSS framework that enables you to rapidly build
user interfaces. We will use it to style our app. First, we need to install the
`tailwindcss`, `postcss`, and `autoprefixer`dependencies. These dependencies are
necessary for TailwindCSS to work properly in a Next.js app.
Run the following command to install them:
```
npm install --dev tailwindcss postcss autoprefixer
```
Once the dependencies are installed, we need to initiate the Tailwind CSS. This
will create the necessary configuration files and allow you to customize the
default Tailwind CSS styles. To do that, run the below code in your terminal.
```
npx tailwind init -p
```
The above command will generate two files named `tailwind.config.js` and
`postcss.config.js`. These files contain the configuration for Tailwind CSS and
PostCSS, respectively. Next, open the `tailwind.config.js` file in code editor
of your choice and replace its contents with the following code:
```
module.exports = {
content: [
"./pages//*.{js,ts,jsx,tsx}",
"./components//*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
```
The above code tells Tailwind CSS which files to process. At last, add the
tailwind directives for each of Tailwind’s layers to the `./styles/globals.css`
file.
```
@tailwind base;
@tailwind components;
@tailwind utilities;
```
## The smart contract
Now that the project setup is completed, we can start writing smart contracts
for our application. In this article, I will be using Solidity.
> A smart contract is a decentralized program that responds to events by
> executing business logic.
To quickly create and deploy a contract, you can use Remix - a browser-based IDE
developed by the Ethereum Foundation. Here's how you can get started:
* Open your web browser and go to
[remix.ethereum.org](https://remix.ethereum.org/).
* Create a new workspace by selecting Blank.
* Copy and paste the below contract code into the editor.
```js theme={"theme":{"light":"github-light","dark":"dark-plus"}}
//SPDX-License-Identifier: Unlicense
pragma solidity ^0.8.0;
contract YouTube {
// Declaring the videoCount 0 by default
uint256 public videoCount = 0;
// Name of your contract
string public name = "YouTube";
// Creating a mapping of videoCount to Video
mapping(uint256 => Video) public videos;
// Create a struct called 'Video' with the following properties:
struct Video {
uint256 id;
string hash;
string title;
string description;
string location;
string category;
string thumbnailHash;
string date;
address author;
}
// Create a 'VideoUploaded' event that emits the properties of the video
event VideoUploaded(
uint256 id,
string hash,
string title,
string description,
string location,
string category,
string thumbnailHash,
string date,
address author
);
constructor() {}
// Function to upload a video
function uploadVideo(
string memory _videoHash,
string memory _title,
string memory _description,
string memory _location,
string memory _category,
string memory _thumbnailHash,
string memory _date
) public {
// Validating the video hash, title and author's address
require(bytes(_videoHash).length > 0);
require(bytes(_title).length > 0);
require(msg.sender != address(0));
// Incrementing the video count
videoCount++;
// Adding the video to the contract
videos[videoCount] = Video(
videoCount,
_videoHash,
_title,
_description,
_location,
_category,
_thumbnailHash,
_date,
msg.sender
);
// Triggering the event
emit VideoUploaded(
videoCount,
_videoHash,
_title,
_description,
_location,
_category,
_thumbnailHash,
_date,
msg.sender
);
}
}
```
* Switch to the Deploy tab.
* [Add Hyperspace testnet](https://docs.filecoin.io/developers/smart-contracts/how-tos/add-to-metamask/)
to your Metamask account and choose your network from the Environment tab.
* If everything goes well, you should see a success message at the bottom of the
IDE window along with your contract address.
* To download the artifacts folder from Remix, click on the backup folder and
look for the folder inside the `.workspace` directory.
## The Frontend
Now that we have completed smart contracts, it is time to work on the front end
of the application. Let’s start with the Authentication of the app.
### Authentication
The first step is to set up authentication in our app that allows users to
connect their wallets. Create a new folder named `landing` inside of the pages
folder and create a new file inside of it named index.js. This file will have
the code for the landing page in our application, which will also allow users to
connect their wallets.
Erase everything inside of `index.js` in the page directory and inside import
the `Landing` file to the file. Here is what your index.js file should look
like.
```js theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import React from "react";
import Landing from "./landing";
export default function index() {
return ;
}
```
Now, on the landing page, we will create a simple hero component with connect
wallet button that will allow users to connect their wallets and access our
application.
Add the below code to the landing page. I have already added comments so you can
understand them properly.
```js theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import React, { useState } from "react";
function Landing() {
// Creating a function to connect user's wallet
const connectWallet = async () => {
try {
const { ethereum } = window;
// Checking if user have Metamask installed
if (!ethereum) {
// If user doesn't have Metamask installed, throw an error
alert("Please install MetaMask");
return;
}
// If user has Metamask installed, connect to the user's wallet
const accounts = await ethereum.request({
method: "eth_requestAccounts",
});
// At last save the user's wallet address in browser's local storage
localStorage.setItem("walletAddress", accounts[0]);
} catch (error) {
console.log(error);
}
};
return (
<>
{/* Creating a hero component with black background and centering everything in the screen */}
It is YouTube, but{" "}
Decentralized
A YouTube Clone built on top of FVM, allow users to create,
share and watch videos, without worrying about their privacy.
);
}
export default Landing;
```
If everything goes fine you should see a similar screen. You should also be able
to connect your MetaMask wallet.
### Uploading videos
Now that users are able to connect their wallets, it is time to add upload video
functionality to our app.
Create a new folder in the pages directory named `upload` and add a file named
`index.js`. Inside the file add the below code.
```js theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import React, { useState, useRef } from "react";
import { BiCloud, BiMusic, BiPlus } from "react-icons/bi";
export default function Upload() {
// Creating state for the input field
const [title, setTitle] = useState("");
const [description, setDescription] = useState("");
const [category, setCategory] = useState("");
const [location, setLocation] = useState("");
const [thumbnail, setThumbnail] = useState("");
const [video, setVideo] = useState("");
// Creating a ref for thumbnail and video
const thumbnailRef = useRef();
const videoRef = useRef();
return (
setTitle(e.target.value)}
placeholder="Rick Astley - Never Gonna Give You Up (Official Music Video)"
className="w-[90%] text-white placeholder:text-gray-600 rounded-md mt-2 h-12 p-2 border bg-[#1a1c1f] border-[#444752] focus:outline-none"
/>