Inspiration

I was inspired by how other communal digital projects often feel impersonal and disconnected, you contribute something, but it gets lost in the crowd and you never really feel like you're building something together. I thought about turning collaborative art into a puzzle because what better way to feel like you're building something together than actually building it?

What I learned

Building this project taught me about managing complex state across multiple modes, implementing real-time collaborative features with Redis, and creating intuitive touch/mouse interactions for both drawing and puzzle-solving. I also learned how to build responsive interfaces that work seamlessly across desktop and mobile devices (although the latter could use some more work), and optimize performance for real-time updates.

How I built it

The project uses a dual-mode architecture: Draw Mode for collaborative pixel art creation and Solve Mode for puzzle reconstruction. The frontend is built with React and TypeScript, featuring custom zoom/pan controls and responsive design. The backend uses Devvit with Redis for real-time data persistence. Puzzle pieces are dynamically generated with realistic jigsaw shapes (nobs and bays) that connect properly, and each piece displays the actual artwork pixels from the canvas area it represents, making the reconstruction process feel authentic and rewarding.

Challenges faced

The biggest challenge was implementing real-time synchronization between multiple users drawing simultaneously while maintaining smooth performance. I also had to solve complex state management issues when switching between drawing and puzzle modes, optimize performance for the pixel canvas to maintain smooth zoom/pan interactions, create an interface that works well on both desktop and mobile devices, and ensure that puzzle pieces dynamically update to show the actual canvas artwork as it's being created. While I initially planned more complex puzzle piece shape masking, so that the revealed pixels matched with the pieces placed, I found it too complex.

Built With

• devvit
• node.js
• react
• tailwind
• typescript