project screenshot 1
project screenshot 2
project screenshot 3

Onchain Gif Portal

An onchain GIF portal where you can share, trade and upvote GIFs!

Onchain Gif Portal

Created At

ETHGlobal New York 2025

Project Description

Project Description An onchain GIF portal where you can share, trade and upvote GIFs! Built on Ethereum, this dApp lets anyone submit GIF links that are permanently recorded onchain, browse the global feed, and showcase ownership tied to wallet addresses. Designed for transparency and community-driven curation, the portal brings crypto-native provenance to internet culture. Share: Submit your favorite GIF links and have them stored onchain with your wallet address. Discover: Explore a live feed of GIFs sourced directly from smart contract state. Upvote: Surface the best GIFs with onchain reactions and community voting. Trade: List and swap GIFs via an integrated marketplace with transparent ownership history. Wallet + Network: Connect with MetaMask; supports local development via Hardhat (configurable RPC). Tech stack: Solidity (Hardhat), Next.js + React, ethers v6, Chakra UI.

How it's Made

Tech stack: Solidity (Hardhat), Next.js + React, ethers v6, Chakra UI.

Architecture

Ethereum 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.

background image mobile

Join the mailing list

Get the latest news and updates