Million Pixels
One million pixels stored forever on-chain.
Created on 1st July 2024
•
Million Pixels
One million pixels stored forever on-chain.
The problem Million Pixels solves
Over 15 years ago, Alex Tew released The Million Dollar Homepage, a site where anyone could buy pixel plots and link to their websites with an image. We wanted to focus the permanence aspect of the site with the Base blockchain.
Hosting Million Pixels on Base has several advantages. Traditional websites will go down if the domain isn't kept, the host stops paying server costs, etc. You are placing trust in the person hosting the website to maintain the integrity of your purchased plots. By storing pixels on-chain, the data lasts forever.
Using Base in particular allows us to store 100% of each of the 10-by-10 pixel plot's data on chain at an affordable price.
Challenges we ran into include deciding how to encode the image data. We decided to use a base64 encoding of the (r,g,b,a) values of each of the 100 pixels in a plot, and storing this encoded image data in the token uri, along with the row, col and optional socials. Our goal was to store 100% of our data on chain, which we achieved.
Challenges we ran into
We ran into problems using the react-hooks, since we didn't have much experience building in React. We wanted to loop over each of the token ID and get view the metadata associated with those tokens (if they existed), which would include their row, column and encoded image data. We couldn't use a loop with the react hooks we were using from thirdweb, so we instead created a component for each of the plots. If we worked on this project again, we would improve performance by caching the results of loading the pixel data from blockchain. These front-end improvements don't require changes to the contract, which was our primary focus.
While we also spent a lot of time on the smart contracts (ERC721), deploying to the Base Sepolia Testnet 3 times, we likely spent more time getting the image cropping system to work. Frontend development is painful...
Tracks Applied (1)
Social Track
SOCIAL with Farcaster
Cheer Project
Cheering for a project means supporting a project you like with as little as 0.0025 ETH. Right now, you can Cheer using ETH on Arbitrum, Optimism and Base.