☪️

Zad Ziad

Comprehensive Islamic app featuring morning/evening/sleep Azkar, Tasbih, Quran, prayer times, Quran radio, 99 Names of Allah, 7 color themes, dark/light mode, and bilingual support

Overview

Zad Ziad is a comprehensive Islamic application that aims to be an ongoing charity for spreading the remembrance of Allah and facilitating Quran reading and Azkar at any time and place. The app is designed with a simple and attractive style suitable for all ages, with attention to a smooth and eye-friendly user experience. It includes a large collection of authentic Prophetic Azkar with an interactive counter for each Zekr and daily completion tracking, along with a digital Tasbih counter with sound effects and vibration supporting 18 different Dhikr. The app supports 7 color themes and dark/light mode, with a bilingual Arabic/English interface and data sync via Firebase.

Features

  • Morning, evening, and sleep Azkar with interactive counter for each Zekr and daily completion tracking with reminder notifications
  • Digital Tasbih counter with sound effects and vibration supporting 18 different Dhikr and a good deeds counter
  • Browse the Holy Quran and listen to Quran radio directly within the app
  • Prayer times, 99 Names of Allah, and countdown to the blessed month of Ramadan
  • 7 diverse color themes and dark/light mode with bilingual Arabic/English interface
  • Firebase authentication and cloud storage via Firestore with PWA support for offline functionality

How It Works

The app relies on HTML5, CSS3, and JavaScript without external frameworks, ensuring lightweight and fast loading. Firebase is used for authentication and cloud data storage via Firestore. Service Worker provides PWA support for offline functionality and push notifications. The interface uses CSS Variables for easy theme switching with localStorage for saving preferences locally.

Challenges

The biggest challenge was organizing a large amount of Islamic textual data in a way that ensures accuracy and easy access, especially with bilingual Arabic/English support across all content. Balancing attractive design with smooth performance on different devices also required continuous optimization. Managing daily Azkar state with cloud sync via Firebase was an additional challenge to ensure users never lose their progress.

Technologies Used

HTML5CSS3JavaScriptFirebaseFirestorePWAService WorkerGoogle FontsFont Awesome