Hi Devs 👋
Last week, I launched MintYourMood, a React-based PWA that lets users turn their mood into a custom-designed NFT — and mint it on the Polygon blockchain. Built with React + Thirdweb, this project was a mix of frontend fun and Web3 logic. Here’s how (and why) I built it.
🎯 The Idea
Everyone shares how they feel online, whether with emojis, selfies, or quotes. I thought:
What if you could turn your mood of the moment into an NFT — a little capsule of emotion minted forever?
And that’s how MintYourMood was born.
🧱 The Tech Stack
- Frontend: React + TailwindCSS
- PWA: Fully installable (Add to Home Screen)
- Web3: Thirdweb SDK for wallet connections, NFT minting, storage
- Storage: IPFS via Thirdweb's upload
- Design to NFT: html-to-image + IPFS
- Chain: Polygon (MATIC)
⚙️ How It Works
- User inputs: emoji, name, quote, selfie
- Visual generation: The app creates a mood card using html-to-image
- IPFS upload: Both image + metadata get uploaded
- Minting: Via mintWithMetadata() on a custom ERC-721 contract All done inside the browser. No backend required.
🧪 Dev Challenges
- React hydration and conditional Web3 hooks — caused some tricky race conditions.
- IP geolocation block — added basic client-side check to restrict access in high-risk countries.
- Cookie storage duration logic and syncing across tabs (localStorage + storage events).
🧠 What I Learned
- Thirdweb is fantastic for Web3 projects — wallet connect, contract calls, IPFS — all in one.
- User privacy handling is essential in crypto apps — even for something as light as emoji NFTs.
- Dev-first NFT tools make launching onchain experiences smoother than ever.
🖼️ Try It Out
Give it a spin and mint your current vibe.
Got feedback, ideas, or bugs? I’d love to hear it — drop a comment here. 🦋
Top comments (0)