SuiPlace

SuiPlace is a decentralized collaborative pixel art platform built on the Sui blockchain. It provides a shared canvas where users can place colored pixels to create collective artwork. Each pixel placement is recorded as a transaction on the blockchain, which ensures that the history and state of the canvas are transparent and permanent. The application includes a 50x50 grid where participants can select from a sixteen-color palette. To manage activity and prevent automated interference, the system implements a cooldown timer for each participant. Users can also view the history of specific pixels to see which address performed the placement and when it occurred. The platform uses a combination of on-chain storage and a real-time database to maintain a fast and responsive interface for all visitors.

The project uses the Sui blockchain for the primary state and transaction logic, with the smart contract written in the Move programming language. This contract manages the canvas object and handles the validation of pixel placements. The frontend is built using Next.js and TypeScript, utilizing the @mysten/dapp-kit for wallet connections and transaction signing. For state management, Zustand handles the local application state. To improve loading times and provide real-time updates across different clients, the project integrates Supabase as a cache and broadcasting layer. When a transaction is confirmed on the Sui network, the frontend synchronizes the change with the Supabase database, which then pushes the update to all active users via PostgreSQL replication. The canvas itself is rendered using the HTML5 Canvas API to ensure performance even on lower-end devices.