Mar 19
Loading video player...
In Part 2 of this tutorial, we complete the decentralized file storage app by building the full frontend, connecting the Rootstock smart contract to a Next.js web app where users can upload files to IPFS via Pinata, view their on-chain file registry, and delete their own files directly from the browser. ✅ WHAT YOU'LL BUILD IN THIS PART - A Next.js frontend with TypeScript and Tailwind CSS - Wallet connection via RainbowKit and MetaMask - File uploads to IPFS through the Pinata API with live progress tracking - On-chain file metadata storage and retrieval using Wagmi hooks - Owner-only file deletion from both IPFS records and the blockchain - A clean UI showing all uploaded files with links to view them on the IPFS gateway ⚡ MISSED PART 1? Watch it first → https://youtu.be/0V2TvITP92M Part 1 covers the Solidity smart contract, Foundry tests, and testnet deployment ______ Useful Links - Next.js — https://nextjs.org - RainbowKit — https://rainbowkit.com - Wagmi — https://wagmi.sh - TanStack Query — https://tanstack.com/query - Pinata (IPFS pinning & gateway) — https://pinata.cloud - WalletConnect — https://cloud.walletconnect.com - MetaMask — https://metamask.io - Rootstock Testnet via Chainlist — https://chainlist.org (search "Rootstock Testnet") - Rootstock Testnet Faucet (free tRBTC) — https://faucet.rootstock.io - Rootstock Developer Docs — https://dev.rootstock.io - Rootstock RPC (Testnet) — https://public-node.testnet.rsk.co _____ Timestamps: 00:00 Integrating Frontend Code 02:52 Understanding Dependencies and Project Structure 05:17 Writing Frontend Code: Initial Setup 09:11 Configuring Custom Blockchain Network 11:01 Creating Layout and Metadata 13:04 Implementing Providers for State Management 17:00 Building the Main Page and Wallet Integration 21:53 Utility Functions for File Management 28:35 Uploading Files to IPFS 34:18 Building the Core Component 36:52 Creating Smart Contracts for File Uploads 39:20 Implementing Hooks for Metadata Retrieval 41:49 Handling File Selection and Uploads 46:44 Managing File Deletion on Blockchain 47:42 Designing the User Interface 54:38 Finalizing the Upload Process and User Feedback ______ This video is part of the From Devs to Devs series — technical tutorials created by community contributors through the Rootstock Hacktivator program. 👉 Want to create your own tutorial and earn rewards? Learn more at https://rootstock.io/hacktivator/ #Rootstock #IPFS #Pinata #NextJS #Wagmi #RainbowKit #Web3 #dApp #Bitcoin #SmartContracts #DecentralizedStorage #BlockchainDev #Solidity