Tech Stack
Next.js React PixiJS ElysiaJS Prisma TailwindCSS
Projektumfang
PictShare Book wurde als mein Capstone-Projekt an der CODE University of Applied Sciences entwickelt. Dieses Projekt diente als Synthese der verschiedenen technischen und gestalterischen Fähigkeiten, die ich während meines Studiums erworben habe, und demonstrierte die Fähigkeit, zusätzlich zu meiner Bachelorarbeit ein komplexes, echtzeitfähiges Kollaborationssystem von Grund auf zu entwickeln.
Was es macht
Die Plattform bietet ein unendliches, interaktives Canvas zum Erstellen virtueller Fotobücher. Benutzer können gleichzeitig Bilder hochladen, Formen als Sticker hinzufügen, Text platzieren und ein Zeichenwerkzeug verwenden, um gemeinsame Erinnerungen zu kuratieren. Es bietet umfassende Multiplayer-Funktionalität mit Echtzeit-Cursorsynchronisation, robusten Berechtigungssätzen (Betrachter/Editor) und komplexer Elementmanipulation wie Größenänderung, Layering und freier Anordnung.
Implementierung
Der Aufbau eines performanten Echtzeit-Kollaborations-Canvas stellte erhebliche Herausforderungen dar. Ich nutzte PixiJS für hardwarebeschleunigtes Rendering, um auch bei Hunderten von Elementen eine 60fps-Performance zu gewährleisten. Das Backend verwendet ElysiaJS mit WebSockets für eine Synchronisation mit niedriger Latenz, während Prisma eine robuste Datenpersistenz mit PostgreSQL handhabt. Konfliktfreies Editieren wurde durch eine benutzerdefinierte Synchronisationslogik erreicht.
Was ich gelernt habe
Die Arbeit an PictShare Book hat mir beigebracht, wie man Statussynchronisation in Hochfrequenzumgebungen verwaltet und wie wichtig Hardwarebeschleunigung für webbasierte Grafiken ist. Ich vertiefte mein Wissen in Full-Stack-Architektur, insbesondere im Umgang mit WebSockets in großem Maßstab und im Entwurf intuitiver UX für canvasbasierte Kreativwerkzeuge. Außerdem schärfte es meine Fähigkeit, komplexe Benutzerbedürfnisse in eine kohärente, performante Anwendung zu übersetzen.