<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Akshay Patil</title>
    <description>The latest articles on DEV Community by Akshay Patil (@akshayjp11).</description>
    <link>https://dev.to/akshayjp11</link>
    <image>
      <url>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%2F554248%2Fbf1ad46e-1be3-40ba-a71c-cc4c77532415.png</url>
      <title>DEV Community: Akshay Patil</title>
      <link>https://dev.to/akshayjp11</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/akshayjp11"/>
    <language>en</language>
    <item>
      <title>MongoDB Atlas Hackathon 2022 on DEV: Ramble messenger</title>
      <dc:creator>Akshay Patil</dc:creator>
      <pubDate>Thu, 08 Dec 2022 21:41:59 +0000</pubDate>
      <link>https://dev.to/akshayjp11/mongodb-atlas-hackathon-2022-on-dev-ramble-messenger-16n9</link>
      <guid>https://dev.to/akshayjp11/mongodb-atlas-hackathon-2022-on-dev-ramble-messenger-16n9</guid>
      <description>&lt;h2&gt;
  
  
  What I built
&lt;/h2&gt;

&lt;p&gt;A simple web messenger application with capabilities to get realtime push notifications when online.&lt;/p&gt;

&lt;h3&gt;
  
  
  Category Submission: About Real-time
&lt;/h3&gt;

&lt;h3&gt;
  
  
  App Link &lt;a href="https://rambler-chat.herokuapp.com/"&gt;Ramble chat app&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;The app is hosted on heroku platform the only one who allow websockets to work. Unlike the Vercel serverless containers on which websockets don't work.&lt;/p&gt;

&lt;h3&gt;
  
  
  Screenshots
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--07UrhJnJ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ia8vqs36ujjrosr95mwy.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--07UrhJnJ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ia8vqs36ujjrosr95mwy.png" alt="Image description" width="752" height="1334"&gt;&lt;/a&gt;&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--ewTVXq4W--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iticphfoc0md9xpscbtp.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--ewTVXq4W--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iticphfoc0md9xpscbtp.png" alt="Image description" width="752" height="1328"&gt;&lt;/a&gt;&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--48j58bF4--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gkts066sbl0v2prc9ygy.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--48j58bF4--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gkts066sbl0v2prc9ygy.png" alt="Image description" width="752" height="1334"&gt;&lt;/a&gt;&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--LFRTYtfc--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o0ksjd8y3jgu61wvn0j1.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--LFRTYtfc--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o0ksjd8y3jgu61wvn0j1.png" alt="Image description" width="748" height="1338"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Description
&lt;/h3&gt;

&lt;p&gt;This application is built with NextJS, MongoDB, SocketIO, ReactQuery, MaterialUI, Next Api Decorators and Next Auth. &lt;/p&gt;

&lt;p&gt;It uses the famous ReactHookForms and Yup resolver for form invalidation and submission. I am using the yup resolver here to ban words from the app.&lt;/p&gt;

&lt;h3&gt;
  
  
  Link to Source Code
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://github.com/akshayjpatil/ramble"&gt;Source code&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Permissive License
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://github.com/akshayjpatil/ramble/blob/main/LICENSE.md"&gt;MIT License&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Background
&lt;/h2&gt;

&lt;p&gt;A messenger for schools and colleges to allow students and faculty mingle in a healthy, moderated application maintained by school authorities.&lt;/p&gt;

&lt;h3&gt;
  
  
  How I built it
&lt;/h3&gt;

&lt;p&gt;I Used Mongo db collection &lt;code&gt;users&lt;/code&gt; to store user information and their activity of when they were last seen and if they are currently online.&lt;/p&gt;

&lt;p&gt;Next, another collection of &lt;code&gt;messages&lt;/code&gt; which stores the messages sent to offline users. If the users are already online the socket.io directly emits the message to the user.&lt;/p&gt;

&lt;p&gt;I used change streams to watch users coming online and get all the messages related to that user from &lt;code&gt;messages&lt;/code&gt; collection and emit them to the online user.&lt;/p&gt;

&lt;p&gt;This solution is very scalable as the messages themselves are not stored in the database and are stored on the local device. We can also expand the security to add e2e encryption to messages.&lt;/p&gt;

&lt;p&gt;Another feature I can think of if you are looking at having to see messages on other devices as well is on-demand chat backup. App can create a backup and then download it automatically when the user logs in on a new device or browser.&lt;/p&gt;

&lt;h4&gt;
  
  
  Note: Also this is my first post on Dev. Please be kind...
&lt;/h4&gt;

</description>
      <category>atlashackathon22</category>
      <category>webdev</category>
      <category>mongodb</category>
      <category>nextjs</category>
    </item>
  </channel>
</rss>
