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. 👀
