YellowBoard Project Story

Inspiration

YellowBoard was inspired by the need for more interactive and collaborative online spaces. As remote work and virtual collaboration become increasingly common, I wanted to create a tool that not only facilitates communication but also enhances teamwork through real-time interaction in a virtual environment.

What it does

YellowBoard allows users to create organizations and rooms, where they can interact with others in real time. Within these rooms, users can see each other's mouse pointers, draw on a shared canvas, and engage in collaborative activities seamlessly. This creates a dynamic and engaging environment for brainstorming, planning, and teamwork.

How I built it

I built YellowBoard using a combination of modern technologies to ensure a responsive and interactive experience:

• Authentication: I used Clerk Auth to manage user authentication and ensure secure access.
• Database: Convex DB was employed for handling data storage and retrieval efficiently.
• Real-Time Interaction: LiveBlocks was integrated to enable real-time drawing and interaction on the canvas.
• Frontend: The interface is designed to be intuitive and responsive, making use of advanced web technologies.

Challenges I ran into

1. Complicated Documentation: Navigating the complex documentation of LiveBlocks posed a challenge, requiring significant time and effort to understand and implement.
2. Mouse Pointer Events: Creating functions to handle and synchronize mouse pointer events across multiple users proved to be technically demanding, requiring meticulous coding and testing.

Accomplishments that I'm proud of

• Successfully integrating real-time canvas interaction with LiveBlocks, allowing for smooth and interactive user experiences.
• Building a scalable and secure authentication system with Clerk Auth.
• Developing a responsive and user-friendly interface that enhances collaborative efforts. -Ensuring end to end type safety across the application by creating custom types.

What I learned

Through this project, I gained valuable insights into real-time web technologies and the intricacies of interactive canvas implementations. I also learned how to effectively handle complex documentation and troubleshoot issues related to real-time event synchronization.

What's next for YellowBoard

My next steps involve enhancing the feature set with additional collaborative tools and improving the overall user experience based on feedback. I also plan to optimize performance and explore further integrations to expand YellowBoard's capabilities.

Built With

• clerk
• convex
• liveblocks
• nextjs
• node.js
• react
• vercel
• zustand