Made by Crumt
A collaborative drawing platform where friends can learn, find inspiration, and create beautiful art together.
Tuse is collaborative drawing platform that allows multiple users to create art together in real time. Whether they are seasoned artists or beginners wanting to learn and find inspiration, Tuse is suitable for all skill levels. From the homepage, users can create a new canvas or join an existing one through a unique room id, generated when a user creates a new canvas. Users can also view inspiring artworks with a daily inspiration showcasing a specific artwork, which users can take with them into a canvas, to conjure up some creativity, refine skills by recreating the artwork, or trace over them to learn and practice. Users can hide any existing inspirational drawings from the canvas once they have finished using them. Once in the canvas, users are exposed to various tools, such as a pencil, pen, brush (with textured strokes), eraser, shapes, and a palette dropdown, which includes colours, opacity for shading levels and transparency, and a stroke width option for custom tool sizes. Undo/redo functionality is also enabled to quickly erase mistakes or bring back strokes or shapes. Users can also export/download drawings in a file format of their choice, and load previously downloaded drawings to continue their work.
The Team
Matt Lewis
Matt is a former project manager turned junior software…
developer, looking for the opportunity to get closer to technology in the workplace. In his spare time he is a keen runner and board gamer.
Ruby Kwong
LGBTQ+ Domestic Violence Advocate turned Software Engineer.…
Outside of web development, you can usually find me cooking, walking, or playing football.
Umar Imran
Former Sales Executive turned Software Engineer with a…
passion for creativity and problem solving.
Charlie Turner
Formerly a laboratory and data analyst, I have since…
transitioned to web development for a more creative and hands-on approach to work in tech.
Tamsin Northwood
Hi, I’m Tamsin! Until recently I was a doing research in…
planetary sciences, and I’ve followed my love for problem solving here into programming. The best thing about web development for me is all of it – the variety between the back and front-ends, the chance to constantly learn and, above all, be creative. In my free time, I’m usually skateboarding or running D&D.
Tech Stack
We used: Konva, Socket.io, React, Node.js, PostgreSQL, Express, Jest, Supertest, Styled Components We chose React for its ability to integrate well with the other tools we used to build the application. For Tuse’s interactive canvas, we used the Konva framework. This enabled us to have different drawing tools (like a pen and a brush) and a palette dropdown for selecting colours, adjusting the stroke width for tool thickness, and opacity for shading and transparency. Konva also enabled us to embed the inspiration images from the home page into the canvas as a separate layer. To allow real-time collaboration between two or more people on the same artwork, we made use of the Socket.IO library. This also enabled our server to host many separate drawing sessions at the same time.
Challenges Faced
Clever and elegant use of Konva was critical to the user experience of our app. We had to quickly get to grips with how and when to record mouse movements and translate them into drawings according to the many toolbar settings. We also needed to ensure a minimum of data transfer per line, as larger pictures could become extremely laggy otherwise, so we had to make use of optimistic rendering and only update the client from the server’s “source of truth” when needed. Enabling smooth, real-time drawing across multiple users was a key challenge. We used Socket.IO to establish real-time communication between users. Each canvas was tied to a unique room ID, allowing us to isolate sessions and emit drawing data (like strokes, tool type, and coordinates) only to relevant clients. We also structured the canvas state to store historical data (lines, shapes), ensuring late joiners received a full sync of the existing drawing history. On the backend, we were faced with sifting through tens of thousands of images from the Art Institute of Chicago API to provide our daily inspiration. A key challenge was robust error handling for working with a non-relational database, with the information we wanted sometimes spread across dozens of interchangeable keys, and inevitable data entry errors for an enormous collection that pre-dates the internet era.