🎉🎉🎉 After years of procrastinating on working on this project, I'm finally proud to launch this platform PortokaLive to public. Hooray! Here's the link
- Web ( https://portokalive.vercel.app/ )
- Mobile ( https://play.google.com/store/apps/details?id=com.portokalive)
🌞 How it started (The origin)
PortokaLive was started off as a coding challenge by one of the company that I was interviewing back in 2019. The company requested me to showcase my coding ability and asked to create a proof-of-concept POC application which can do a live-streaming between Mobile Application and Web.
Since I'm proficient in Javascript, I've done my research and found that https://www.npmjs.com/package/node-media-server (Node Media Server) is a viable option for me to use to implement this kind of feature.
I've checked out their code, forked and changed some styling/navigation to the react-native application which will do the recording and broadcasting as well as the node-media-server using rtmp protocol.
There are lots of tutorials online on how to play the live stream in React web using videojs. Luckily, node-media-server provide option to play the video in flv format which directly suits our needs.
Eventually, after 2 or 3 days of self hackathon, the suite of Mobile Client, Web Client, Media Server and Auth API server written in node.js are completed and demonstrated to them. Anyway, I ended up not accepting their offer and this POC project was left behind as a byproduct hanging in my repository.
💙 Rebranding to another name
When it was created it was given the company's name and logo, which is in Orange and white color theme. Considering to rebrand this project, I've decided to just stick to the original theme and also give the name as "OrangeLive" which I thought was pretty good. However, after searching on the Google, it seems that the name was taken by another company leading me to change it into something else. I tried to use Google Translate to search other names of Orange in other languages.
Finally, I found out Orange in Greek language is called Portokali.https://translate.google.com/?sl=el&tl=en&text=%CF%80%CE%BF%CF%81%CF%84%CE%BF%CE%BA%CE%AC%CE%BB%CE%B9&op=translate&hl=en
And fortunately, I can omit the "L" and "I" of the Live word if I merged them together. So, there it goes. "PortokaLive"
📚 Tech Stack
The tech stack was initially a rush because I just want to quickly completed in a few days so I just went for my comfort stack which is
- React for Web UI
- Bootstrap for Web theme
- Node.JS (Typescript) for API
- ReactNative for Mobile
- Ui Kitten for Mobile theme
There was a change in media server because media server with rtmp support cannot be deployed on any free backend hosting. (Or maybe at least I don't know, Give a comment below if you know how to 😉) Therefore, I changed it to using api.video(https://api.video) freemium which is great except the part they put watermark if you want to use it without paying premium charges.
api.video came with a cool REST api and iframe web player which makes my life easier so that I do not need to develop all the wrappers around it.
💅 Illustration Design
To put some aesthetic design in my app, I've used Undraw's free illustrations which are not only attractive but also accurately designed to the context.
Please checkout https://undraw.co/ (❤️ Super cool illustration pack!)
Conclusion
Disclaimer of this application is that it is not meant for production or public use but anyone who are interested in these tech stack can checkout and learn from it for educational purpose.
Stay safe and Thanks for the read! 🙇♂️🙇♂️
Author: Kevin Moe Myint Myathttps://
Live streaming as a learning stack
PortokaLive sat at the intersection of ego and engineering: cameras, encoders, chat, VOD hooks, the fragile joy of “it works on my machine” at 9 p.m. on a Friday. Experiments like this are how you learn latency, backoff, and the human patience required when a stream drops mid-sentence.
Not every side project must become a company. Some exist to prove you can integrate APIs under pressure, document failure modes, and still ship a landing page that tells the truth about what works today.
What still holds
Tools change; the habit of building in public does not. The useful part of these experiments was never the star count—it was learning to finish something small, name it, and let the next developer find it without a sales deck. That posture travels with you into enterprise work: fewer demos, more systems that still make sense six months later.