Introduction
Shower ideas are great! anyways, I got some (most) of the inspiration from the trending app Omegle & video chat apps like Google Meet. How about there is a specialized app for my fellow developers similar to something like Omegle where we could find a random developer and chat/talk with him/her, that would be awesome! (at least I thought so at that moment) but AFTER making the project, getting rid of all the bugs, hosting, debugging the functions, realm, etc. I saw this 😑
If you still want to see it, here you go https://dev-meetups.netlify.app.
See a short preview of the app here.
And if you are Elon musk and want to buy this thing, proceed here ;)
How I built it
After getting the idea, I jumped onto the editor. after integrating the GitHub Oauth, I wanted to do something different from normal express servers which I've been with for quite a while and had the thought of something like serverless functions.
So I started looking for serverless functions (needless to say I searched for NO-CREDIT-CARD services as I was supposed to be studying chemistry and not ask my parents for credit cards 🙃) after a day of research, I found that all of this serverless swag was just millimeters away from what I've been using for almost a year now (yeah I'm bad at searching things 😗)
After moving all of the authentication logic to Realm, there was nothing left for the backend. Coming to the ACTUAL FUNCTIONALITY of the app, I spent 2 crisp && long days figuring out how to send media streams back & forth but none of the few methods worked for me as they were hilariously slow && complex to implement. That is when I came to know about WebRTC thanks to fireship and how peer-peer connections work.
But there was a problem, the implementation was still a bit complex to implement && organize into a non-buggy app. Searching on youtube the other day I found about PeerJS - a simple yet effective WebRTC library that made my life heaven! here is the youtube video explaining the implementation of PeerJS -> https://youtu.be/DvlyzDZDEq4. After a few days, I was ready with the app (with some minor fixes here & there which are still going on) thankfully.
How it works
Before connecting, the user will have to choose what he/she will be communicating through, video or chat, after choosing, they will search for corresponding users. I chose firebase for an offer-answer system where the user would search for any available offers, if there is an offer made by another user, it would connect to the other user with the peer id (of the other user), after the connection is open, both users will exchange data to be shown on the frontend (who the users are connected to). and then the communication via chat/video can happen.
The Tech Stack:
- Firebase Firestore
- MongoDB Atlas && Realm for backend && database
- PeerJS for WebRTC communication
- NextJS for frontend
- TailwindCSS for styling
- RecoilJS for global state-management
If you like my posts, consider following :)
Twitter -> @BhardwajKuvam
Github -> @kuvamdazeus
LinkedIn -> @kuvambhardwaj
Portfolio -> kuvambhardwaj.vercel.app
Top comments (0)