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, backend asset upload, and sharing.
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, identity lookup, smart-contract interaction, image generation, backend integration, and reliability into one approachable flow.
Impact
- Built the Friends on Chain app as the solo engineer alongside a PM, 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, emoji/image 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.
Product Screens
Real product screens from the flow: onboarding, friend entry, card customization, desktop minting, and sharing.
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.