Live Puzzle



https://yz4867.itp.io/ <- the website! It says unsafe sometimes but it’s very safe. Go to advanced settings to proceed if you want to visit it.


#interactive-web #full-stack-dev #social-interaction #live-web #web-art

Live Puzzle is a multi-user interactive web experience designed to transform the classic puzzle game into a virtual collaborative activity. The project was inspired by my personal enjoyment of puzzles and the realization that they are more engaging when shared with friends. Noticing the lack of conversation topics when video calls coming to an end with friends, I combined the social aspect of these calls with the fun of solving puzzles. This led to the creation of a platform where two or more users can come together to solve puzzles in real-time, enhancing virtual interactions much like online meetings or coffee chats. The initial tests with friends proved the concept, turning simple puzzle-solving into a dynamic and enjoyable shared experience.

Many thanks to Shawn Every’s support. 


Role
Designer + Programmer
Toolkit
HTML/CSS/JavaScript/Node.JS/Command Line/Socket.IO/Simple-Peer/Photoshop



*the video is x20 the speed 



Development Process


01-1 Core features

Simple-Peer: . Very stable when there’s <5 people! 
- Socket.IO: all other interactions. mouse positions, moving around puzzles & video circles & etc.
- Photoshop: image -> puzzle pieces.


01-2 UI Design
I referred to the design of some online puzzle websites, and mocked everything in Figma. 





GitHub Link ︎︎︎


︎︎︎[Prev]                             
 [Home]        
                         
Thank you for reading 🧩