QuranIPFS: Streaming Quran over IPFS

Adel Benyahia
3 min readApr 3, 2022

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 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 frontend 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

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 visits 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

--

--

Adel Benyahia

Web application developer (HTML │ CSS │ JS | ReactJS | NextJS | NestJS | MERN)