Introduction
Good day! I lately heard concerning the PlanetScale X Hashnode hackathon, so I believed I would give it a attempt.
Please be aware that that is my first Hackathon so any recommendation and many others. could be very appreciated.
The Venture
I made a decision to create a easy 1 to 1 assembly device utilizing WebRTC.
The present market is usually dominated by Google Meets/Zoom however I did not want all the flamboyant options they possess, I simply wished one thing easy so I believed this hackathon can be an important probability to simply construct it.
Tech Stack
The tech that was used to create the mission is as follows:
- React – To construct the frontend
- Nodejs – To construct the backend
- Categorical – To deal with API requests
- Socket.io – To deal with WebSocket chat/signalling
- PlanetScale – The database
- Materials-ui – For the design
- Heroku – To host the app
The Completed Venture
The web page that the person is first greeted with when loading the app is the create room web page:
Sure, I do know it is quite simple.
The person can then create a brand new room by clicking on the “Create Room” button, this sends a request to the server which then creates a brand new room and shops the room key contained in the planetscale database.
As soon as the room is created the next popup seems:
The popup informs the person that the brand new room is created and provides the choices to repeat the room url and a hyperlink which redirects the person to the created room.
The next screenshot reveals what the web page seems to be like when two customers enter the room:
The highest left video is the native person’s video while the video that takes up many of the display screen is the distant person’s video.
There’s additionally a chat window to the fitting that permits each the person’s to ship chat messages to one another.
Venture Makes use of
The applying can be utilized for the next situations:
- 1 to 1 chat
- Conferences
- Mentoring
- Easy Appointments
Predominant Points
The principle points I had with the mission the place:
- I suck at UI
- React’s useEffect hook is beneficial, however when you use it incorrectly it might happen an infinite loop
- Couple of points concerning ports when importing to Heroku (you possibly can’t use a number of ports)
- At first it might be okay to delete the room after use however I made a decision to not so the person can use the room they created with out having to re-create everytime
Future Plans
My future plans for the mission are as follows:
- Implement Display Share
- Implement Recording
- Skill to mute video/audio
- Saving the chat messages to PlanetScale.
Ideas on PlanetScale
Since that is the primary time I’ve ever used PlanetScale, I believed I would share my expertise with utilizing it.
Making a database is so simple as clicking a button, the short begin guides and the pattern nodejs app they supply allowed me to simply get began with none points in any respect.
Additionally it eliminates the effort of internet hosting your individual database, which generally is a little bit of a ache.
When you have a bit little bit of mySQL information, you will not have any downside getting began with it.
Hopefully I’ll have the prospect to implement it in future tasks.
Hyperlinks
Completed Venture: https://pacific-lowlands-02656.herokuapp.com/
Github: https://github.com/ethand91/simple-meeting
Conclusion
Thanks for studying my article.
I realized so much when constructing this mission, particularly React, which I am nonetheless new to.
This was additionally the primary time I’ve ever deployed an precise app to Heroku. (Which did waste fairly a number of hours).
I hope you loved studying my first Hackathon article. It was a extremely factor studying expertise and provides me an opportunity to really construct one thing. I hope to take part in future Hackathons too.