Wayne Sutton

a year ago

We Hosted a Hackathon for a Notion Clone

A few months ago, CodeWithAntonio put out a tutorial detailing how you can create a Notion Clone from scratch in an eight-hour, detailed masterpiece. This tutorial, notably, used Convex as the backend, creating many collaboration opportunities for us and potential builders. With a myriad of possibilities for extending features on top of the framework Antonio created, we decided to launch a Build Bounty to find engineers that could create the coolest features on top of the project.

CodeWithAntonio and his community were a blast to work with and we're here to announce the winners of the Notion Clone Build Bounty!

Best multiplayer/collaborative feature ($1000)

The best multiplayer feature created for the build bounty was made by Konrad Hylton, who went above and beyond to implement multiple key features for this category. The two most notable things he built were a sleek UI for adding and removing collaborators and realtime cursor presence. Presence is defined by the ability to see fellow collaborators in realtime as they are editing the shared document, a key feature for working with others. It should also be noted that adding and removing collaborators happens in realtime due to Convex's native realtime capabilities, something that Konrad specifically designed around.

While these two things are already quite impressive on their own, Konrad also took the time to implement the following features, making him a clear winner for this category:

1. UI for syncing changes made by other editors
2. Three new slash commands, each using AI to generate text in a different way
3. Document search, using Convex-indexed search

Here's the GitHub repository for their submission:

konradhy/build-jotion

Notion clone with presence, collaboration, deep search,and more

Best use of Convex features ($1000)

The best use of Convex's base features was Shreyas Chaliha, creator of a Notion clone with chat features and image storage using Convex's native image store. We thought this was particularly notable from a Convex angle due to the following two criteria:

1. Shreyas created a new table to manage chat messages, meaningfully engaging with organizing data in a new way with Convex.
2. Shreyas moved the project's image storage off of an external tool to leverage the benefits of Convex's native image store. This showcases understanding of what needed to be reconfigured to maximize Convex's benefits as a builder.

Here's the GitHub repository for their submission:

trace2798/jotion_convex_extented

Notion clone with chat and Convex image storage

Runner-up for best multiplayer/collaborative feature ($500)

Our runner-up for the best collaborative feature was from Shyam Raghuwanshi. His submission was particularly notable because of the way he implemented adding and removing collaborators. Instead of letting anyone add and remove collaborators, he added an Admin role that could be given or taken away.

Here's the GitHub repository for their submission:

Shyam-Raghuwanshi/my-notion

Notion clone with role-editing style collaboration

Honorable mention ($500)

Finally, our honorable mention for the project was created by Dr. Sajjad Mahmood. Similar to previous submissions we have gone over, he added collaborative features. Here's an overview of what he added:

1. Sharing capabilities with other users, excluding users that have already been added
2. User objects stored in a Convex table
3. Avatar component at the document TopNav for quick sharing and unsharing

Here's the GitHub repository for their submission:

DocSJ1980/notion-clone

Notion clone with collaboration and avatar presence

Conclusion

We had a great time talking to the members of the CodeWithAntonio community that participated in the challenge and look forward to hosting more events like this; Convex's modular nature makes adding new features a straightforward experience, so we're looking to leverage that as much as possible. As mentioned before, thanks to CodeWithAntonio and his moderators for helping out with the challenge.