[01] - 06 - Walking Through the User Experience ππ
The Quran Page Viewer is designed with simplicity, clarity, and reverence in mind β offering a smooth and spiritually focused experience. Here's what a user can expect when they open the app:
π Landing on the Home Page
When a user visits the app at quran-mushaf.netlify.app, they are greeted with:
A beautiful dark-themed interface thatβs easy on the eyes, especially during night reading.
A clear, welcoming header: π Quran π
A central content box that mimics the layout of a traditional Mushaf (Quran copy), complete with golden highlights and rich Arabic fonts.
π Reading Quran Pages
The first page of the Quran is displayed by default.
Users can scroll through each page using:
The "Next β‘οΈ" button to go forward.
The "β¬ οΈ Previous" button to go back.
Each page displays:
The Surah title (in Arabic).
The Bismillah (where appropriate).
Verses (Ayahs) with traditional Uthmani script.
Ayah numbers and Ruku markers (Ϋ) styled for clarity.
π Jump to Any Page
Users can type a page number (between 1 and 604) into the input box and hit "Go" to instantly jump to that specific page.
The app smartly handles invalid input with a friendly alert.
π§Ύ Surah Information Display
Each time a new Surah appears on the current page, the app dynamically shows:
Surah name (Arabic & English)
English translation of the Surah name
Revelation type: Meccan or Medinan
Total number of verses
Juz number and Hizb quarter, helping users navigate with context
π± Mobile-Friendly Design
The interface is fully responsive:
Text scales well on tablets and smartphones.
Tables and Arabic text adjust to small screens without breaking layout.
Buttons are touch-friendly and easy to use.
β‘ Fast and Smooth Experience
Thanks to JavaScript and real-time API calls, page updates happen instantly.
Thereβs no page reload, ensuring a fluid reading journey.
The use of vanilla JS keeps the app lightweight and blazing fast.
Summary π§
The Quran Page Viewer puts focus on the Quran β no distractions, no ads, no bloat. Itβs crafted to be peaceful, functional, and faithfully designed, making it a joy for users to engage with the Holy Book, one page at a time.