Github | Live

1. Project Purpose and Goal

My main goal here is to make the design process smoother and more fun by giving users a bunch of tools to chat, share ideas, and create awesome visuals together. Think of it like a virtual design studio where everyone can pitch in and see their ideas come to life on the canvas!

I want people to be able to jump in, use their cursors to point things out, chat with each other right there on the canvas, add comments, create different shapes, upload images... you name it! It's all about making collaboration easy and intuitive.

2. Web Stack and Explanation

I chose this web stack because it offers a great balance of flexibility, performance, and functionality for building a collaborative design app like mine.

Next.js is awesome because it gives me server-side rendering, which helps with performance and SEO, and it's got a fantastic developer experience. TypeScript adds a layer of type safety and scalability to my codebase, which is super important when working on a project of this complexity.

Liveblocks provides the real-time collaboration magic, allowing multiple users to interact with the canvas simultaneously. Fabric.js is a powerful library for working with canvas elements, giving me all the tools I need to create and manipulate shapes, images, and more.

Shadcn and Tailwind CSS help me keep my app looking slick and stylish without sacrificing performance or writing tons of custom CSS. Plus, they're both easy to work with and have great communities behind them.

3. Problems and Thought Process

Handling user interactions on the canvas efficiently was a bit tricky, especially with multiple users making changes simultaneously. Initially, every action caused updates to the canvas, leading to performance issues. To fix this, I dug into Fabric.js's event system, tracking user actions closely to minimize unnecessary updates.

Finding the right balance between functionality and performance took a lot of trial and error. I experimented with different strategies, tweaking parameters until I found a solution that worked. By optimizing how user interactions were handled and minimizing unnecessary updates, I managed to keep the app responsive even with multiple users editing simultaneously. It was challenging, but the end result made it all worth it!

4. Lessons Learned

One of the most important lessons I learned came from diving deep into the technologies I used for the project. Take Fabric.js, for example. It's a powerful tool for working with canvas elements, but mastering it wasn't a walk in the park. I had to spend a good amount of time exploring its features and figuring out the best ways to leverage them for my app.

Another valuable lesson came from using TypeScript. It brought a whole new level of type safety and scalability to my codebase, which was crucial for a project of this complexity. TypeScript taught me the importance of writing more robust and maintainable code, and it definitely paid off in the long run.