Web3 Product Engineering Case Study
Friends on Chain
A Bunches growth experiment for turning a user's friend graph into a shareable, mintable social NFT, built from wallet connection through onchain minting and backend asset upload.
Overview
Friends on Chain needed to hide Web3 complexity behind a consumer product flow: connect a wallet, add friends by wallet address or Web3 identity, personalize the visual output, preview the NFT, mint it, upload the generated image, and share the result.
I was the solo engineer working with a PM on product direction, UX tradeoffs, copy, responsive behavior, and iteration. The work connected React architecture, wallet UX, smart-contract interaction, image generation, backend integration, and reliability into one flow.
Impact
- Built the Friends on Chain app as the solo engineer, authoring 318 commits across the React product surface.
- Implemented the wallet-connected mint flow with RainbowKit, wagmi, ethers, gas estimation, transaction submission, and contract event handling.
- Created the dynamic NFT preview renderer with friend cards, customization, responsive sizing, and DOM-to-image generation.
- Connected generated NFT assets to the Bunches backend upload pipeline with owner address, friend addresses, image data, and token ID.
- Improved reliability across rejected wallet requests, invalid identities, network changes, duplicate actions, image generation failures, and upload errors.
Representative Product Areas
Representative panels show the major product surfaces without representing final Friends on Chain screenshots.
Wallet And Minting
RainbowKit · wagmi · ethers
Friend Identity Entry
NFT Preview Renderer
Dynamic friend cards converted from DOM to high-resolution PNG.
Upload And Share Flow
Merlot backend upload
Owner address, friend addresses, generated image, and token ID were sent after minting so the user could share the final NFT result.
Tech & Constraints
- React 18
- JavaScript
- Tailwind CSS
- Zustand
- RainbowKit
- wagmi
- ethers
- html-to-image
- Headless UI
- Lottie
The key engineering challenge was coordinating wallet connection state, Web3 identity resolution, local NFT customization state, DOM image generation, contract transaction lifecycle, backend upload, responsive layout, and clear user feedback across failure-prone paths.