{"repo":"Lietsaki/paperchat","free":true,"listed":false,"github":"https://github.com/Lietsaki/paperchat","clone":"git clone https://github.com/Lietsaki/paperchat.git","description":"An online Pictochat spiritual successor - Draw and chat in real time!","language":"TypeScript","stars":21,"topics":["nextjs","react","canvas","typescript"],"license":"AGPL-3.0","category":"saas-starters-boilerplates","readme_excerpt":"Paperchat - Intro Paperchat is an online, real-time spiritual successor of Pictochat, an app that was included with the Nintendo DS released for the first time in 2004. I created a fully responsive version from scratch using React (Next.js), without help from any external libraries to interact with the canvas. Please check it out on paperchat.net :) Component Highlights The repository you see right now contains about 70% of the code needed to run your own instance. Specifically, what's included is the frontend logic and components. Here are my personal highlights: - Canvas.tsx: The canvas itself. Crops your messages before sending them so they take as little space as possible. This gif illustrates it very well: As you can see, there are 4 possible variations: - Everything is next to the username rectangle. - The highest point of your drawing is next to the username rectangle. - The highest point of your drawing is below and under the username rectangle (to the left). - The highest point of your drawing is outside the username rectangle, but below it (to the right). - ContentIndicator.tsx: The bars stacked on top of each other in the left side of the top screen. They follow the messages that are currently shown on-screen thanks to an Intersection Observer. When it is overflown, the top or bottom of it becomes smaller to indicate in which direction there are more messages. Creating my own instance The backend pieces that allow creating rooms and sending messages were created wi","default_branch":null,"files":null,"tree":[],"storefront":"/r/Lietsaki","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/Lietsaki/paperchat/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}