Podcast app

How I Built a Complete P2P RSS Podcast App in One HTML File


How I built a full P2P RSS podcast app in one HTML file. The Plan is a single page app that uses RSS (Really Simple Syndication) and peer-to-peer communication along with decentralized storage to serve as a podcast player, aggregator, and discovery app. It should work in all major browsers including mobile, mobile, and desktop browsers. It must be free for the user (and for me, hopefully) and must be serverless. Your personal feed is stored directly in the regular link of your browser.

picture
Profile picture of Branislav Đalić Hacker Noon

As an avid Internet consumer, both professionally and personally, that means spending a lot of time in front of the computer. Even though I’m doing other things for a while, I just like listening to my favorite podcast’s tweet in the background. That was a no-brainer for now, at least until I got hooked on waiting for all the next episodes on multiple platforms with different accounts, limitations, and requirements. I don’t like to install 10 apps for one purpose. It should be easier!

picture

Soon I found myself cluttered with too many unnecessary apps, accounts and spam. It was getting harder and harder to follow and discover new and interesting podcasts in nature that talk about topics that are close to me. At one point (read Joe Rogan switched to Spotify) I got fed up with mainstream platforms and decided to check out good ol ‘RSS as a way to aggregate all my favorite audio shows. This led me to a weird valley of creating my own podcast aggregator and playback app. Can I do better?

After the initial excitement and planning, I have more and more disagree with the idea of ​​building a normal client-server stack with the database and all that shenanigans. I already have enough on my cloud hosting bill. Can this be done for … well for free?

Ahh, a dreamer can dream you say to me! After letting the idea run through my mind for a while, I thought I had found a workable solution. In order for this experimental side project to be considered successful, we must first meet certain criteria!

Non-negotiable requirements

  1. It must be free for the user (and I hope)
  2. It must be anonymous
  3. It must be serverless
  4. It must be without a database !?
  5. It must be secure

This is NOT an easy to-do list, so I’ll let the reader judge my success.

The plan

Let’s start with the networking and communication part. WebRTC is a well-supported library for cross-platform peer-to-peer communication and it supports vanilla javascript.

Secured WebSockets (WSS) can provide us with a secure channel to connect peers with each other. We’re just missing one more item which is a signaling server, or a way for peers to discover each other. Hmm, that means hosting a server that isn’t free.

Enter WebTorrent, another amazing library with good browser support. So we can now have in a single HTML page full support for WebTorrent and WebRTC. It’s the serverless part, over. Now avoid hosting a database!

Well, it turns out we also have this ingredient ready for us with IPFS and the way it stores objects on the decentralized network. Technically, we could have a JSON file representing all the podcasts submitted globally somewhere on the IPFS, and fetch / add it on demand.

The battery

Front end: JavaScript, RSS-Parser, Polyfill, SweetAlert libraries included via CDN.

Background : P2P Swarm using WebTorrent, communicating via WebRTC and storing / fetching JSON data over IPFS using Pinata.

Some functional requirements

  • It should offer organic food for all users (like trending or top foods)
  • Each user must have their own personalized feed
  • Users must be able to exchange podcasts or entire streams with each other privately
  • Users should be able to manually add podcasts and delete them as they wish
  • Users must be able to listen to and control audio
  • It should work in all major browsers including mobiles

Now is the time to share my little experience with you.

picture

TailoredFlow is a single page application that uses RSS (Really Simple Syndication) and peer-to-peer communication along with decentralized storage to serve as a podcast player, aggregator, and discovery application.

He uses WebTorrent and WebRTC in the browser for peer discovery and IPFS to store the most popular podcasts. Your personal feed is stored directly and only in your browser.

You can click and add any podcast from the trending feed or add your own through the standard RSS link that you can find on any other podcast search engine.

Whenever you add a podcast through the Add an RSS URL button, it will appear in your personal feed ready to play – other users will be able to see it in the trending feed unless it is already submitted.

Each user has their own unique peer #ID which they can copy and share privately with any other user to send them a particular podcast or the entire feed! The sharing function is session based, which means – to directly share a feed or podcast to someone, you both need to be online at the same time.

Every time you refresh a page, a new ID is generated for you, to protect your privacy and avoid tracking.

The trend feed is automatically updated by other peers in real time.

TailoredFlow is not only a single page app, but a single HTML file to this! This means you can download it and use it locally (it doesn’t require hosting).

No login, no database, no server. And I happen to like it!

picture

The app received a few updates after going through quality control by my loving wife as the first beta tester.

If you find the app usable and cute, you can thank her 🙂

If you value your privacy, dislike ads, cumbersome subscription models, poor privacy practices, or lack of support, then this is for you.

The main challenge is not only to create a unique P2P platform, but also a scalable and independent platform.

This was originally done for me and close friends who share the same passion for the world of podcasting. Hope you can enjoy it too!

Please do not hesitate to contact us for any suggestions, ideas, improvements or criticisms at Twitter.

Profile picture of Branislav Đalić Hacker Noon

Key words

Join Hacker Midi

Create your free account to unlock your personalized reading experience.



Leave a Reply

Your email address will not be published.