DEV Community

Cover image for QuranIPFS: Streaming Quran over IPFS
adelpro
adelpro

Posted on • Updated on

QuranIPFS: Streaming Quran over IPFS

Quranipfs logo

About:

QuranIPFS a PWA web application that allows you to listen to the Holy Quran without the need to download any files, using the Interplanatery File System system IPFS.

IPFS is a a protocol and peer-to-peer network for storing and sharing data in a distributed file system. IPFS uses content-addressing to uniquely identify each file in a global namespace
connecting all computing devices.
we are using HTML / CSS / JS for the frontand and Firebase, IPFS on the backend, and we are offering our work for free and open source.

How to get the source code of Quranipfs?

Well, you can get Quranipfs source code from Github (link)
Support us by giving a star ⭐

Installation:

Change these parameters:
✓ changethis1 -> facebook admin ID
✓ changethis2 -> facebook author name
✓ changethis3 -> twitter
✓ changethis4 -> author name
✓ changethis5 -> yandex meta tag
✓ changethis6 -> fontawsome reference
✓ changethis7 -> feedburner
✓ changethis8 -> facebook page
✓ changethis9 -> telegram
✓ changethis10 -> feedburner mailing reference
✓ change 'xxx' in 'firebase.js' with your firebase configuration

Screenshots:

Mobile UI

mobile UI

Desktop UI

Desktop UI

Desktop UI

Used technologies:

JQuery
✓ Responsive mobile friendly design
✓ Mobile drop-down menu
✓ Lazy loading
✓ Youtube like preloader progress bar
✓ Back to top icon
✓ Cookies (js-cookie)
✓ SEO meta tags (Google, Facebook, Twitter, Pinterest...)
✓ Structured data and cards
✓ Using IPFS to stream and download mp3
✓ M3U files
✓ Torrent download
✓ Responsive HTML5 media player
✓ Stylish rounded social sharing icons menu
Media Elements ready
HLS: to stream and cache MP3
✓ PWA ( Service worker, IOS and Android compatible, manifest file...)
✓ Multilingual website (Google Seo optimized)
Materializecss
✓ Hit counter: to calculate the number of visit to each page using Firebase firestore.
✓ Favorite: save pages to favorite using localStorage.
✓ Filter receiters with alphabet, number of visit or by favorite.
✓ Search for receiters by name filter.

Application:

We are using PWABuilder to convert our PWA to native application for
✓ Android: (Google play)
✓ Windows: (Microsoft store)
✓ IOS: (not yet published)

Support us ❤️:

Buymeacoffee

Top comments (11)

Collapse
 
asimpleartist1 profile image
ASimpleArtist

No IPFS link, no CID, Not actually over IPFS.

how about you either add it to the IPFS companion app or post the CID somewhere front in center. Or you know stop saying its IPFS. It's not. Theres no IPFS website.

Collapse
 
adelpro profile image
adelpro • Edited

In the backend all files are stored in an ipfs node on
Digitalocean droplet, then served over ipfs.io gataway to overcome the lack of ipfs protocol support in modern browsers.
Thinks for your interest for the project.
You can take a look to the source code here
You are welcome

Collapse
 
asimpleartist1 profile image
ASimpleArtist

but how am I supposed to host it without a CID for IPFS?

Thread Thread
 
adelpro profile image
adelpro

Only audio files (mp3) are hosted on IPFS in Quranipfs and then served over a classic website

Thread Thread
 
asimpleartist1 profile image
ASimpleArtist

I see, so are you able to give the CIDs for each individual file? For instance the Abu Bakr Al-Shatri recitations, I am trying to host numerous religious scriptures on IPFS

Thread Thread
 
asimpleartist1 profile image
ASimpleArtist

and have you thought about making a IPFS clone of your current classic style website?

Thread Thread
 
adelpro profile image
adelpro

Some key functions on Quranipfs are directly linked to google services like hit counter and analytics.
Im trying to replace them with decentralised foss alternatives.
Any help will be welcome

Thread Thread
 
adelpro profile image
adelpro

Im using different approach, all files for the same receiter are grouped in the CID, like a directory.
For exemple for Abubakr Al-shatri the link to the directory (CID in my case) is:
ipfs.io/ipfs/QmdTJQ39ytAFHwXfKmpCR...
For accessing one surat for exmple "el-fatiha" you can add "/Quran_Aboubakr_Alchatiri-001.mp3" after the link above...

Thread Thread
 
asimpleartist1 profile image
ASimpleArtist

people that are using IPFS would not want analytics, they're very privacy focus and any analytical collection regardless of how its implemented will always be frowned upon. Again the best option would be to either add the CID hosting all the files to the companion app to make your site more secure OR make a Clone of your website on IPFS without all that extra stuff and have both run together maybe hyperlink with a public gateway to the IPFS site for those that are worried about flagging suspicion for listening/downloading said files.

Thread Thread
 
adelpro profile image
adelpro

nice idea, maybe we a more private second version of Quranipfs hosted on ipfs

Thread Thread
 
asimpleartist1 profile image
ASimpleArtist

if you do reply with the CID for the website and I will gladly host and know others who would also want to help host it.