Hackernoon logoHow I Built a Complete P2P RSS Podcast App in a Single HTML File by@omodaka9375

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

image
Branislav Đalić Hacker Noon profile picture

@omodaka9375Branislav Đalić

https://gitzilla.netlify.app/users/Omodaka9375

Book a call
with @omodaka9375

As an avid internet consumer professionally and personally this means spending a lot of time in front of the computer. Even if I'm doing something else for a while, I just like to listen to the chirping of my favorite podcast in the background. This was a no-brainer at the moment, at least until I got hooked to waiting for all the next episodes on multiple platforms with different accounts, limitations, and requirements. I don't like installing 10 apps for one purpose. This should be easier!

image

Soon I got cluttered with too many apps, accounts, and useless spam. It was getting harder and harder to follow and discover new interesting podcasts in the wild that talk about subjects that are close to me. At some point (read Joe Rogan switched to Spotify) I got fed up with mainstream platforms and decided to check out good old RSS as a way to aggregate all my favorite audio shows. This has led me to an uncanny valley of creating my own podcast aggregator and player app. Can I do it better?

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

Ahh, a dreamer may dream you may say! After I let the idea spin in my mind for a while I thought I came up with a viable solution. For this experimental side-project to be considered a success there are some criteria we must hit first!

The Non-Negotiable Requirements

  1. It must be free for the user (and me hopefully)
  2. It must be anonymous
  3. It must be serverless
  4. It must be databaseless !?
  5. It must be secure

This is NOT an easy task list, so I will let the reader be the judge of 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 has good vanilla javascript support.

Secure WebSockets (WSS) can provide us with a safe channel to connect peers together. We are missing just one more element which is a signaling server, or a way for peers to discover each other. Hmm, this means hosting a server that is not free.

Enter WebTorrent, another amazing library with good browser support. So, now we can have in one HTML page full support for WebTorrent and WebRTC. This is the serverless part, done. Now onto avoiding hosting a database!

Well, it happens that 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 globally submitted podcasts somewhere on the IPFS, and fetch/add to it on demand.

The Stack

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

Back-end: P2P Swarm using WebTorrent, communicating over WebRTC, and storing/retrieving JSON data on IPFS using Pinata.

Some functional requirements

  • It should offer organic feed for all users (like trending or top feed)
  • Every user must have his own personally curated feed
  • Users should be able to exchange podcasts or whole feeds between each other privately
  • Users should able to manually add podcasts and remove them as they wish
  • Users should be able to listen and control the audio
  • It should work in all major browsers including mobile

It is now a time to share my little experiment with you.

image

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

It utilizes WebTorrent and WebRTC in the browser for peer discovery, and IPFS to store top trending 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 via the regular RSS link you can find on any other podcast search engine.

Every time you add a podcast via the Add 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's already submitted.

Every user has his own unique peer #ID that he can copy and privately share with any other user to send him a particular podcast or the whole feed! The sharing feature is session-based, which means - to directly share a feed or a podcast to someone, you both have 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.

Trending feed is auto-updated by other peers in real-time.

Not only is TailoredFlow a single page app, but a single HTML file at that! This means you can download it and use it locally (it does not require hosting).

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

image

The app has received a couple of updates after it underwent quality control by my loving wife as a prime beta tester.

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

If you value your privacy, don't like ads, tedious subscription models, bad privacy practices, or lack of support, then this is for you.

The main challenge is not only making one of a kind P2P platform but also a scalable and independent one also.

This was initially made for myself and close friends that share the same passion for the world of podcasts. I hope you can enjoy it too!

Feel free to reach out for any suggestions, ideas, improvements, or critique over at Twitter.

Tags

Join Hacker Noon

Create your free account to unlock your custom reading experience.