Mosiac

Mosiac is a real-time collaborative workspace made using services offered by Ably.

Comment

Inspiration

I have always been fascinated by the power of collaboration and communication. I believe that when people work together, they can achieve more than they could alone. I wanted to create an application that would enable people to collaborate and communicate in real time, without any barriers or limitations. I was inspired by the features of Ably, such as a live cursor, real-time chatting, presence, and pub/sub messaging. I thought that these features would be perfect for enhancing the functionality and interactivity of a collaborative workspace. I wanted to create an application that would allow people to create, edit, and share documents, notes, tasks, and more with their teammates, friends, or anyone else. I wanted to create an application that would make collaboration and communication easier, faster, and more fun. That is what inspired me to create this application.

What does this application do?

This application is a notion clone that integrates the features of Ably to provide a seamless and collaborative experience for users. It allows users to create, edit, and share various types of documents, such as notes, tasks, and more. Users can also chat with each other in real-time, see each other’s cursor movements, and track each other’s presence and activity. This application leverages the power of Ably’s real-time platform, such as pub/sub messaging, presence, live cursor, and more. This application aims to make collaboration and communication easier, faster, and more fun.

The application also has the option to make the document editable or private. By default, all the documents are public and non-editable. This document is public and non-editable.

How did I built it?

So to build this application, I used the next.js as the framework of choice. I have also used shadcn/ui for UI components, along with Sonner for toast and lucide icons for icons. To help me debug issues faster, I have used Typescript. I have also used Zod for validation and Zustand for state management. For the document text-rich editor, I have used blocknote.js and for authentication, I have used Clerk. For the database to store the information, I have used Convex which is also a real-time database. For the rest of the functionality in the application, I have used the services offered by Ably.

Tech Stack

  • Next.js as the framework.
  • Shadcn/ui for UI components.
  • Tailwind CSS for utility-first CSS framework.
  • Ably for real-time data delivery.
  • Blocknote for a decentralized note-taking app.
  • Edgestore for edge data storage.
  • Convex as the database.
  • Zustand for state management.
  • React Hook Form and Hookform Resolvers for form handling.
  • TypeScript for static types.
  • ESLint for linting.
  • Zod for schema validation.
  • Font-share for font. Using Switzer in the application.

How is Ably being used?

Ably has been used in multiple places in this application.

  • Avatar Stack: Once the user logs in, he/she/they can see the avatars of all the users who are currently logged in. Avatar Stack
  • Realtime messaging: In this application, the user has the option to message in real-time with other users who are online. Realtime-messaging
  • Typing Awareness: When a user is typing, their name gets shown in the space above the input box. Realtime-messaging
  • Moderation: In the application, if users are having a conversation in any document route channel, then the user who created the document is the moderator. Any user have the option to delete their own message but a moderator can delete any message available in the chatbox. Moderation
  • Live Cursor: When multiple users are in the same document and their cursor positions are displayed, Realtime-messaging

Problems faced

It would be a lie to say that the process has been smooth as butter. So in the beginning, I did have a couple of problems understanding how to implement Ably in my application. But with constant support from Tom and Beth, I was able to overcome it and get a basic understanding of how to do it. In the beginning, I just created a simple application to get a basic understanding of pub/sub messaging. I was stuck on it for a long time, but when I contacted support, Mike was able to pin the issue to the dot.

The issue was with how caching works in Next.js, so thanks a lot again, Mike.

After I overcame that issue, I gained a lot of confidence and motivation, which has helped me to continue working on the hackathon submission from then on. Also, after fixing that issue, I was highly motivated because this is the first time I have used a real-time service like Ably in depth.

Initially, for this application, I was planning to just use the spaces service from Ably. From previous experience, I was unaware of what problems I might face. I did face some, but it was nothing that I could not solve by referring to their new documentation and example. The new documentation and examples have been very helpful for me.

One problem I was very proud to solve was while I was setting up the Ably provider code (components/ably-provider.tsx). Initially, I was following the official documents and examples for reference and to see a working version of the API. I was passing in random IDs as client IDs; it worked, but then I had to change it to the user ID generated by Clerk so that I could keep track of who was in the space and other Ably features. I was facing a lot of troubles with it because of client and server components, but in the end, I was able to fix it and subsequently keep track of logged-in users in the space and other functionalities.

Also, just before the deadline, when I made a new build, it failed due to some database schema-related issue with the live cursor functionality since I am defining spaces for the live cursor with the document ID. But initially, the dashboard did not have a document ID, so it was causing build errors. Locally, I solved it by using a conditional statement, so I initially thought I would work like that. But when I pushed the change to my deployed link, it did not work. Being delusional was not a working solution then. The build error was happening because the conditional statement that I made was breaking the laws of react hooks. After spending some time, I found a solution to make it work.

Accomplishments that I am proud of

Well, I am really proud of the outcome of this application. After finishing it I can say with confidence that I now have a deeper understanding of how to integrate services offered by Ably into a Next.js application.

What's next for Mosiac?

I intend to make this application open-source, as I think it can be a valuable learning resource for others. I also think it can help anyone who wants to integrate Ably into their application, as I have used many of their features. I would appreciate any feedback from the judges on my coding skills so that I can improve them. I am still a beginner in this field, and I may have made some errors that I am not aware of. Even though I have submitted my final version, I am still eager to learn more about Ably’s capabilities.

Built With

  • ably
  • ably-react-hooks
  • ably-spaces
  • next.js
Share this project:

Updates