Onchain Gif Portal

Problem Statement

Tech stack: Solidity (Hardhat), Next.js + React, ethers v6, Chakra UI.ArchitectureEthereum smart contract for persistence and provenance; frontend reads/writes via RPC. Links to GIFs are stored onchain (not the files), keeping costs low and UX fast. Smart contract (Solidity, Hardhat) Contract: GifPortal with minimal API: addGif(string), getAllGifs(), getTotalGifs(). Emits GifAdded(gifLink, userAddress) for easy indexability and reactive UIs. Compiled and deployed with Hardhat; local dev network exposed on http://127.0.0.1:8546 (custom port). Solidity version pinned to 0.8.x with safe math and recent compiler fixes. Frontend (Next.js + React, ethers v6, Chakra UI) Wallet connectivity via MetaMask (ethers.BrowserProvider(window.ethereum)). Contract interface generated from ABI (client/constants/GifPortal.json) and configured with the deployed address. Simple flow: connect wallet → submit GIF link → wait for tx → refresh list via getAllGifs(). Dev environment and tooling Hardhat for builds, local node, and deployment scripts. TypeScript in the Hardhat project for deployment scripting; Next.js for the app. Local RPC moved to port 8546 to avoid conflicts; localhost network configured accordingly. Partner/third‑party tech that helped Hardhat Toolbox: streamlined compilation, deploys, and type bindings (TypeChain). ethers v6: modern provider/signers API and robust contract calls. Chakra UI: quick, accessible component primitives for layout and theming.

Solution

Tech stack: Solidity (Hardhat), Next.js + React, ethers v6, Chakra UI.ArchitectureEthereum smart contract for persistence and provenance; frontend reads/writes via RPC. Links to GIFs are stored onchain (not the files), keeping costs low and UX fast. Smart contract (Solidity, Hardhat) Contract: GifPortal with minimal API: addGif(string), getAllGifs(), getTotalGifs(). Emits GifAdded(gifLink, userAddress) for easy indexability and reactive UIs. Compiled and deployed with Hardhat; local dev network exposed on http://127.0.0.1:8546 (custom port). Solidity version pinned to 0.8.x with safe math and recent compiler fixes. Frontend (Next.js + React, ethers v6, Chakra UI) Wallet connectivity via MetaMask (ethers.BrowserProvider(window.ethereum)). Contract interface generated from ABI (client/constants/GifPortal.json) and configured with the deployed address. Simple flow: connect wallet → submit GIF link → wait for tx → refresh list via getAllGifs(). Dev environment and tooling Hardhat for builds, local node, and deployment scripts. TypeScript in the Hardhat project for deployment scripting; Next.js for the app. Local RPC moved to port 8546 to avoid conflicts; localhost network configured accordingly. Partner/third‑party tech that helped Hardhat Toolbox: streamlined compilation, deploys, and type bindings (TypeChain). ethers v6: modern provider/signers API and robust contract calls. Chakra UI: quick, accessible component primitives for layout and theming.