PixelGrid

Own a piece of digital history. Mint your pixel tiles as NFTs on the blockchain and showcase your brand, art, or message forever.

Comment

🧠 Inspiration

We were inspired by the Million Dollar Homepage, a quirky 2000s idea where people bought pixels on a static web page. We asked: what if we took that nostalgic concept and gave it a Web3 twist — true ownership, IPFS storage, wallet-based interaction, and a vibrant retro aesthetic?

🚀 What it does

PixelGrid is a retro-styled interactive grid where users can:

  • 🖱️ Select tiles from a 100x100 digital canvas
  • 🖼️ Upload images, links, and titles for their tile
  • 💎 Mint tile NFTs on the Polygon blockchain
  • 🧠 Store metadata permanently via IPFS
  • 👁️ Zoom, pan, and preview tiles on an animated retro UI

Tiles are owned forever and viewable by all — your own chunk of web history.

🛠️ How we built it

  • Frontend: React + Vite + Tailwind CSS
  • State Handling: React Hooks for zoom, pan, and selection
  • Web3 Integration: RainbowKit, Wagmi, Ethers.js
  • Minting: Smart contracts on Polygon (ERC-721)
  • Media Storage: IPFS via upload hooks
  • Styling: Retro ‘90s-style UI with animated backgrounds and pixel fonts

⚠️ Challenges we ran into

  • Rendering and managing 10,000 tiles with performance in mind
  • Handling zoom/pan behaviors without breaking interaction
  • NFT metadata upload and linking with tile rendering
  • Maintaining retro visuals without sacrificing UX

🌟 Accomplishments that we're proud of

  • A fully interactive tile-based minting experience
  • Seamless wallet connection and NFT deployment
  • Clean retro aesthetic with dotted borders, marquee text, and pixel art
  • A fun and nostalgic tribute to the early internet

📚 What we learned

  • Optimizing large stateful components in React
  • Web3 frontend-to-contract UX design
  • Balancing nostalgia and usability in UI design
  • Importance of smooth interactions in Web3 dApps

🔮 What's next for PixelGrid

  • 🎁 Add unlockable content or special “rare” tiles
  • 🛒 Enable resale of tiles via OpenSea integration
  • 📊 Display activity feed or popular tiles
  • 🗺️ Introduce themed zones or time-limited events
  • 💬 Add comments or messages tied to each tile
  • 🧩 On-chain logic for tile collaboration or battles

✨ PixelGrid is not just a project — it's a nostalgic social experiment, an NFT playground, and a homage to a simpler, pixel-filled web.

Built With

  • rainbowkit
  • react
  • react-query
  • tailwindcss
  • thirdweb
  • viem
  • wagmi
Share this project:

Updates