QuranIPFS: Streaming Quran over IPFS
Tags: quran, ipfs, firebase, jquery
Published: 2022-04-03 07:24:57


![Quranipfs logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/npyrow82q2a7n40xwfrk.png)

## About:
[QuranIPFS](https://www.quranipfs.com) 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](https://github.com/adelpro/Quranipfs))
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/viii5s5sxkji2250qmzl.jpeg)

Desktop UI

![Desktop UI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q47t1z0njdl6ce5lw356.jpeg)

![Desktop UI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/36o3caky74f89yg7d6jl.png)

## Used technologies:
✓ [JQuery](https://jquery.com/)
✓ 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](https://ipfs.io) to stream and download mp3
✓ M3U files
✓ Torrent download
✓ Responsive HTML5 media player
✓ Stylish rounded social sharing icons menu
✓ [Media Elements](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement) ready
✓ [HLS](https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_delivery/Live_streaming_web_audio_and_video): to stream and cache MP3
✓ PWA ( Service worker, IOS and Android compatible, manifest file...)
✓ Multilingual website (Google Seo optimized)
✓ [Materializecss](https://materializecss.com)
✓ Hit counter: to calculate the number of visit to each page using [Firebase](https://firebase.com) 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](https://www.pwabuilder.com) to convert our PWA to native application for
✓ Android: ([Google play](https://play.google.com/store/apps/details?id=app.web.quranipfs.twa))
✓ Windows: ([Microsoft store](https://www.microsoft.com/en-bs/p/quranipfs/9nk92vvvpb8b))
✓ IOS: (not yet published)

## Support us ❤️:
[Buymeacoffee](https://www.buymeacoffee.com/Adel.benyahia)