Creating Collaborative Document Editing with Next.js, Supabase, Refine, and Material-UI👏
Tags: refinehackathon
Published: 2023-07-17 11:44:15

## App Showcase 

![dev-collab](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/28hutsw3mn4o0jnhy5te.png)
### Category Submission: 

- Most Visually Pleasing
- Most Technical Impressive
- Stack: Nextjs Material UI Supabase and websockets

### App Link
Try it Live [here](https://collab.kemboi.app)
[![Website URL](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lnx675rweba36wfglft8.png)](https://collab.kemboi.app/document/4kQaCrt6PcRUK_QcAzT3TIMtfLeAUiLC/edit)

### Screenshots 

Step 1: Project Homepage

![Dev.Collab Overview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5zzaj25jjbbxut50fws7.png)

Step 2: Create and Access Documents

![create-doc-page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t4uqs0pp6rziaryuif53.png)
> With just a few clicks, create new collaborative documents or access existing ones

Step 3: Rich Text Editor with Users
![Collaborative editing with rich text editor](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/66j36qpawas4d1qfvmua.png)
> The rich text editor allows simultaneous editing and updates, enabling everyone to see changes instantly. Each user's cursor is highlighted to enhance visibility and coordination

Step 4: Sharing Link Dialog
![Share page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wrlazjqrssuvxpv9szx2.png)

> Easily invite others to view or contribute to your documents by generating secure links that can be shared effortlessly

### Description 

Dev.Collab is a collaborative editing platform built with `Material-UI`, `Supabase`, `Refine`, and `Next.js`.  Leveraging `WebSockets`, it enables seamless and instantaneous collaboration among team members. With an intuitive interface and the feature-rich `Tiptap` text editor.
Comes in handy whether you're working on a team project, collaborating on documents, or brainstorming ideas with colleagues

### Link to Source Code 
 You can access the source code for the collaborative editing platform on [GitHub](https://github.com/alankemboi/dev-collab).

### Permissive License 
                                 Apache License
                           Version 2.0, January 2004
                        http://www.apache.org/licenses/
##The Spark Behind the Idea
The app was inspired by a personal interest in collaborative tools, the desire to solve real-world collaboration challenges, and the motivation from successful existing solutions in the domain([Docs](https://docs.google.com)). Building this app during the hackathon presented an excellent learning experience while aiming to make a positive impact on users' productivity and creativity
### Development Journey 
Overall, building the project with `Refine`,` Material-UI`, and `Supabase` was an enlightening experience. The stack not only streamlined development but also provided valuable insights into the best practices of creating efficient and collaborative web applications. The knowledge and skills gained from working with `Refine` will undoubtedly be beneficial in future projects, and I look forward to exploring more of its capabilities in upcoming endeavors.
### Additional Resources/Info

- **Link to Live Demo**: Experience the collaborative editing platform in action by trying out the [live demo](https://collab.kemboi.app/document/4kQaCrt6PcRUK_QcAzT3TIMtfLeAUiLC/edit).

- **GitHub Repository**: Access the project's GitHub repository to explore the [source code](https://github.com/alankemboi/dev-collab), contribute, or star the project.

- **README**: Check out the [detailed documentation](https://github.com/alankemboi/dev-collab#devcollab) for the collaborative editing platform to understand its features and how to use them effectively.