The latest articles on DEV Community by Alan Kemboi (@alankemboi). https://dev.to/alankemboi https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F775601%2F3ab3501c-0ce1-4a49-9a2d-cc621967da23.jpg https://dev.to/alankemboi en Alan Kemboi Wed, 19 Jul 2023 02:53:33 +0000 https://dev.to/alankemboi/multi-user-document-editing-app-part-ii-n3d https://dev.to/alankemboi/multi-user-document-editing-app-part-ii-n3d <h2> App Showcase </h2> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--ow1ViNG7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z5jv45nuk018ijept2r5.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--ow1ViNG7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z5jv45nuk018ijept2r5.png" alt="Dev Collab" width="800" height="426"></a></p> <h3> Category Submission: </h3> <ul> <li>Most Visually Pleasing</li> <li>Most Technical Impressive</li> <li>Stack: Nextjs Material UI Supabase and websockets</li> </ul> <h3> App Link </h3> <p>Try it Live <a href="https://collab.kemboi.app">here</a><br> Common room(<em>Nebula</em>) <a href="https://collab.kemboi.app/document/edit">here</a><br> <a href="https://collab.kemboi.app/document/4kQaCrt6PcRUK_QcAzT3TIMtfLeAUiLC/edit"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--4I04OwTU--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lnx675rweba36wfglft8.png" alt="Website URL" width="800" height="77"></a></p> <h3> Added features </h3> <ul> <li>Rooms</li> <li>Avatar</li> </ul> <blockquote> <p>To test for multi user simply create a document , copy URL and open a new tab (<em>You must be in same room to see other users)</em>.</p> </blockquote> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--VilGGGg6--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3lhke8phzz7gxfhm7xha.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--VilGGGg6--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3lhke8phzz7gxfhm7xha.png" alt="Multi User" width="800" height="403"></a></p> <h3> Link to Source Code </h3> <p>You can access the source code for the collaborative editing platform on <a href="https://github.com/alankemboi/dev-collab">GitHub</a>.</p> <h3> Permissive License </h3> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code> Apache License<br> Version 2.0, January 2004<br> <a href="http://www.apache.org/licenses/">http://www.apache.org/licenses/</a><br> </code></pre> </div> <h3> <br> <br> <br> Additional Resources/Info<br> </h3> <ul> <li> <strong>Common Room</strong>: The <a href="https://collab.kemboi.app/document/edit">Common Room</a> is a virtual space where all users can collaborate and edit documents in real-time. Unlike other rooms that may require individual logins, the <strong>Nebula</strong> Room offers a hassle-free collaboration experience </li> <li><p><strong>Link to Live Demo</strong>: Experience the collaborative editing platform in action by trying out the <a href="https://collab.kemboi.app/document/4kQaCrt6PcRUK_QcAzT3TIMtfLeAUiLC/edit">live demo</a>.</p></li> <li><p><strong>GitHub Repository</strong>: Access the project's GitHub repository to explore the <a href="https://github.com/alankemboi/dev-collab">source code</a>, contribute, or star the project.</p></li> <li><p><strong>README</strong>: Check out the <a href="https://github.com/alankemboi/dev-collab#devcollab">detailed documentation</a> for the collaborative editing platform to understand its features and how to use them effectively.</p></li> </ul> refinehackathon webdev nextjs typescript Alan Kemboi Mon, 17 Jul 2023 11:44:15 +0000 https://dev.to/alankemboi/creating-collaborative-document-editing-with-nextjs-supabase-refine-and-material-ui-3dn4 https://dev.to/alankemboi/creating-collaborative-document-editing-with-nextjs-supabase-refine-and-material-ui-3dn4 <h2> App Showcase </h2> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--dEXscGsw--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/28hutsw3mn4o0jnhy5te.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--dEXscGsw--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/28hutsw3mn4o0jnhy5te.png" alt="dev-collab" width="800" height="227"></a></p> <h3> Category Submission: </h3> <ul> <li>Most Visually Pleasing</li> <li>Most Technical Impressive</li> <li>Stack: Nextjs Material UI Supabase and websockets</li> </ul> <h3> App Link </h3> <p>Try it Live <a href="https://collab.kemboi.app">here</a><br> <a href="https://collab.kemboi.app/document/4kQaCrt6PcRUK_QcAzT3TIMtfLeAUiLC/edit"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--4I04OwTU--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lnx675rweba36wfglft8.png" alt="Website URL" width="800" height="77"></a></p> <h3> Screenshots </h3> <p>Step 1: Project Homepage</p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--IvWgHvHO--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5zzaj25jjbbxut50fws7.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--IvWgHvHO--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5zzaj25jjbbxut50fws7.png" alt="Dev.Collab Overview" width="800" height="398"></a></p> <p>Step 2: Create and Access Documents</p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--dbrzLavA--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t4uqs0pp6rziaryuif53.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--dbrzLavA--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t4uqs0pp6rziaryuif53.png" alt="create-doc-page" width="800" height="332"></a></p> <blockquote> <p>With just a few clicks, create new collaborative documents or access existing ones</p> </blockquote> <p>Step 3: Rich Text Editor with Users<br> <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--_vRYZ_wx--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/66j36qpawas4d1qfvmua.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--_vRYZ_wx--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/66j36qpawas4d1qfvmua.png" alt="Collaborative editing with rich text editor" width="800" height="346"></a></p> <blockquote> <p>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</p> </blockquote> <p>Step 4: Sharing Link Dialog<br> <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--KyyujbvZ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wrlazjqrssuvxpv9szx2.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--KyyujbvZ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wrlazjqrssuvxpv9szx2.png" alt="Share page" width="800" height="390"></a></p> <blockquote> <p>Easily invite others to view or contribute to your documents by generating secure links that can be shared effortlessly</p> </blockquote> <h3> Description </h3> <p>Dev.Collab is a collaborative editing platform built with <code>Material-UI</code>, <code>Supabase</code>, <code>Refine</code>, and <code>Next.js</code>. Leveraging <code>WebSockets</code>, it enables seamless and instantaneous collaboration among team members. With an intuitive interface and the feature-rich <code>Tiptap</code> text editor.<br> Comes in handy whether you're working on a team project, collaborating on documents, or brainstorming ideas with colleagues</p> <h3> Link to Source Code </h3> <p>You can access the source code for the collaborative editing platform on <a href="https://github.com/alankemboi/dev-collab">GitHub</a>.</p> <h3> Permissive License </h3> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code> Apache License<br> Version 2.0, January 2004<br> <a href="http://www.apache.org/licenses/">http://www.apache.org/licenses/</a><br> </code></pre> </div> <h2> <br> <br> <br> The Spark Behind the Idea<br> </h2> <p>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(<a href="https://docs.google.com">Docs</a>). Building this app during the hackathon presented an excellent learning experience while aiming to make a positive impact on users' productivity and creativity</p> <h3> Development Journey </h3> <p>Overall, building the project with <code>Refine</code>,<code>Material-UI</code>, and <code>Supabase</code> 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 <code>Refine</code> will undoubtedly be beneficial in future projects, and I look forward to exploring more of its capabilities in upcoming endeavors.</p> <h3> Additional Resources/Info </h3> <ul> <li><p><strong>Link to Live Demo</strong>: Experience the collaborative editing platform in action by trying out the <a href="https://collab.kemboi.app/document/4kQaCrt6PcRUK_QcAzT3TIMtfLeAUiLC/edit">live demo</a>.</p></li> <li><p><strong>GitHub Repository</strong>: Access the project's GitHub repository to explore the <a href="https://github.com/alankemboi/dev-collab">source code</a>, contribute, or star the project.</p></li> <li><p><strong>README</strong>: Check out the <a href="https://github.com/alankemboi/dev-collab#devcollab">detailed documentation</a> for the collaborative editing platform to understand its features and how to use them effectively.</p></li> </ul> refinehackathon