Tech Stack
Next.js React PixiJS ElysiaJS Prisma TailwindCSS
Project Scope
PictShare Book was developed as my Capstone project at CODE University of Applied Sciences. This project served as a synthesis of the various technical and design skills I acquired throughout my studies, demonstrating the ability to build a complex, real-time collaborative system from scratch in addition to my bachelor's thesis.
What it does
The platform provides an infinite, interactive canvas for creating virtual photobooks. Users can simultaneously upload images, add shape-based stickers, place text, and use a drawing tool to curate shared memories. It features comprehensive multiplayer functionality with real-time cursor synchronization, robust permission sets (Viewer/Editor), and complex element manipulation like resizing, layering, and free-form arrangement.
Implementation
Building a performant real-time collaborative canvas presented significant challenges. I leveraged PixiJS for hardware-accelerated rendering, ensuring 60fps performance even with hundreds of elements. The backend uses ElysiaJS with WebSockets for low-latency synchronization, while Prisma handles robust data persistence with PostgreSQL. Conflict-free editing was achieved through custom synchronization logic.
What I learned
Working on PictShare Book taught me how to manage state synchronization in high-frequency environments and the importance of hardware acceleration for web-based graphics. I deepened my knowledge in full-stack architecture, particularly handling WebSockets at scale and designing intuitive UX for canvas-based creative tools. It also sharpened my ability to translate complex user needs into a cohesive, performant application.