Introduction
The web is evolving, and Web3 technologies are revolutionizing traditional industries, including video streaming. Platforms like Odysee are leading the charge, offering decentralized alternatives to YouTube and Rumble. Similarly, unlike legacy providers like Google Drive and Dropbox, Sia is transforming data storage, providing a privacy-focused and user-centric approach.
Join us on a journey to build a cutting-edge Web3 movie streaming dApp using NextJs, TypeScript, Tailwind CSS, and Sia Renterd. This tutorial series will guide you in creating a decentralized application that leverages Sia's blockchain technology to ensure user data ownership and privacy.
By the end of this tutorial, you'll gain the expertise to:
- Build a fully functional movie streaming platform to share with friends or use as a school project
- Launch your own SaaS (Software as a Service) application
- Unlock the potential of Web3 technologies in the video streaming industry
Watch the demo video below to see the project in action and subscribe to our channel for more innovative content like this!
Prerequisites
To follow along, ensure you have the following tools installed, and familiarity with the stacks will also enhance your understanding:
- NodeJs
- NextJs
- Tailwind CSS
- TypeScript
- Docker (required)
This three-part series will cover:
- Part 1: Project Setup – Renterd Zen testnet, Package Installations, and environment variables.
- Part 2: Backend Development – Building the Backend Service
- Part 3: Frontend Development – Integrating the Frontend with the Backend service.
If you prefer watching the entire development process, I recommend watching this playlist, in the playlist, everything that is written here and more are captured in the videos.
With that said, let’s jump into setting up this project.
Project Setup
We'll start by cloning a prepared repository which includes the Sia Renterd docker compose script, the backend, and frontend services. Run the following commands:
$ git clone https://github.com/Daltonic/sia_vid_tv $ cd sia_vid_tv Now, it's crucial that we switch to our starter branch on this newly cloned GitHub project, and run the below command to have that done.
$ git checkout 01_starter_branch Next, let’s set up the associated environment variable for this Renterd service. Create a .env file at the root of this project and apply the keys below:
RENTERD_SEED=<RENTERD_SEED_PHRASE> RENTERD_API_PASSWORD=<YOUR_PREFERED_PASSWORD> RENTERD_LOG_LEVEL=debug RENTERD_LOG_DATABASE_LEVEL=error To get these API keys you will need to have Sia Renterd installed on your machine, please watch this short video below, it pretty much summarizes it all.
Generate a seed phrase with the Renterd application as seen in the above video and include it inside your environment variable as instructed in the above video. Replace the password with something you can easily remember.
Next, we need to install Docker by downloading it from the official website if you haven't already. Alternatively, use a free online platform like Gitpod or a VPS to run a Docker instance, if possible. Otherwise, install it on your local computer.
Finally, we can spin up a docker container by running the following docker command at the root of this project, ensure that the terminal is at the same directory location as this docker-compose.yml file.
$ docker compose -f "docker-compose.yml" up -d --build Note the command to pull down the container: $ docker compose -f "docker-compose.yml" down. Run this when you want to shut down your Docker instance (but not now).
If you performed the above instructions correctly, you should see the interface below when you visit your browser at http://localhost:9880.
Enter your password (from your environment variable) to log in. Then, follow the configuration procedure in the video below to set up your Sia Renterd instance for file uploads, downloads, and streaming.
The above video starts at the 6:41 minute mark, please stop at the 20:01 mark, this part will visually guide you through the Renterd configuration process.
Take note that the blockchain synchronization process along with host matching takes up to 25 min to be ready, so you will have to be patient with the whole process.
Please create a new bucket on Renterd called vidtv, where all our files for this project will be stored. if you have executed the above instructions successfully, your Renterd node should be ready for upload and download, see the image below.
Amazing, at this point, our Renterd service is now ready to start receiving files, but we need to communicate with it programmatically.
Let's round this part one of this tutorial by having the packages and environment variables set up as well for the Backend and Frontend.
Backend Project Setup
Perform the following instructions to have the backend service packages installed and ready for further development.
Navigate to the backend directory from a new terminal instance using the following commands:
$ cd backend $ yarn install #you can also use npm install $ touch .env #or mannually create it at the root of the backend directory Next, supply the following information into the environment variables.
SIA_API_BUCKET=vidtv SIA_API_PASSWORD=<YOUR_PREFERED_PASSWORD> SIA_API_BASE_URL=http://localhost:9880 ORIGIN=http://localhost:9000 PORT=9000 And now, run $ yarn build && yarn start to spin up the backend and to also confirm that it's free from any bug.
Frontend Project Setup
Lastly, run the following commands to install the packages associated with the frontend, afterwards, we will run it.
Navigate to the backend directory from a new terminal instance using the following commands:
$ cd frontend $ yarn install #you can also use npm install $ touch .env #or mannually create it at the root of the backend directory Next, supply the following information into the environment variables.
NEXT_PUBLIC_PROJECT_ID=<YOUR_WALLET_CONNECT_ID> NEXT_PUBLIC_FILE_SERVICE_URL=http://localhost:9000 Sign up and create a project with Walletconnect to get your project ID. After you have supplied the project ID to the environment variable, run $ yarn build && yarn start to spin up the backend and to also confirm that it's free from any bug.
At this point, you will see the interface below when you visit the browser at http://localhost:3000.
Next Step
Congratulations on reaching this milestone! Proceed to Part 2 to complete the backend service development. If you encounter any issues, refer to the following resources for troubleshooting:
About Author
I am a web3 developer and the founder of Dapp Mentors, a company that helps businesses and individuals build and launch decentralized applications. I have over 8 years of experience in the software industry, and I am passionate about using blockchain technology to create new and innovative applications. I run a YouTube channel called Dapp Mentors where I share tutorials and tips on web3 development, and I regularly post articles online about the latest trends in the blockchain space.