System Requirements Document (SRD) for sky-kuran

1. Introduction

The sky-kuran project is an interactive, web-based Quran memorization application designed to help users easily memorize Surahs from A'lâ to Nâs. The application is tailored for users in Turkey (TR) and incorporates traditional Islamic aesthetics with modern technology to create an engaging and effective learning experience. This document outlines the system requirements for the development of the sky-kuran platform, ensuring it meets the needs of its users while maintaining high usability and performance standards.

2. System Overview

The sky-kuran platform aims to provide a seamless Quran memorization experience by combining interactive features, traditional Mushaf-inspired design, and advanced functionality. The system will allow users to:

• View Quranic verses in Arabic with transliteration and Turkish translation.
• Listen to audio recitations by multiple Qaris (reciters).
• Synchronize text highlighting with audio playback for better memorization.
• Track their memorization progress using local storage on their devices.
• Interact with a responsive and visually appealing interface optimized for both desktop and mobile devices.

The application will leverage modern web technologies such as React for the frontend, FastAPI for backend services, and local storage for user progress tracking.

3. Functional Requirements

• As a User, I should be able to view Quranic verses in Arabic, along with their transliteration and Turkish translation.
• As a User, I should be able to tap or click on any verse to hear its audio recitation.
• As a User, I should be able to select from multiple Qaris (reciters) using a dropdown menu.
• As a User, I should see the verse being read highlighted in real-time as the audio plays.
• As a User, I should be able to track my memorization progress, with completed verses marked as "memorized."
• As a User, I should see a progress bar or indicator showing the percentage of verses I have memorized.
• As a User, I should receive a small celebratory message or animation when I mark a verse as memorized.
• As a User, I should be able to store my progress locally on my device without requiring an account or login.
• As a User, I should experience a responsive design that works seamlessly on both desktop and mobile devices.

4. User Personas

1. Memorizer (Primary User)

• Description: Individuals who want to memorize Quranic Surahs, primarily from A'lâ to Nâs.
• Goals: Easily access Quranic verses, listen to recitations, and track memorization progress.
• Technical Proficiency: Moderate; familiar with basic web and mobile applications.
• Pain Points: Difficulty in keeping track of memorized verses and finding reliable recitation sources.

2. Casual Learner

• Description: Users who want to read and listen to Quranic verses without focusing on memorization.
• Goals: Access Quranic content and listen to recitations in a user-friendly interface.
• Technical Proficiency: Low to moderate.

5. Visuals Colors and Theme

The sky-kuran application will adopt a traditional Mushaf-inspired theme with a modern twist. The color palette is designed to be visually soothing and culturally resonant.

Color Palette:

• Background: #FDFBF7 (Cream/Parchment)
• Surface: #F7E9D7 (Light Beige)
• Text: #3B2F2F (Dark Brown)
• Accent: #A67C52 (Golden Brown)
• Muted: #D9CBB6 (Soft Taupe)

These colors are chosen to evoke a sense of tradition and calmness, ensuring a comfortable reading and learning experience.

6. Signature Design Concept

The sky-kuran homepage will feature an interactive "Mushaf Scroll" design.

Key Features:

• Dynamic Scroll Animation: The homepage will resemble an open Quran scroll, with verses displayed on a parchment-like background. As users scroll, the parchment will appear to "unroll," revealing the next set of verses.
• Interactive Verse Highlighting: When a user hovers over a verse, it will glow softly, and clicking on it will trigger an audio recitation with synchronized text highlighting.
• Progressive Illumination: As users mark verses as memorized, a subtle golden glow will spread across the parchment, visually representing their progress.
• Ambient Background Animation: A faint, animated pattern of Islamic geometric designs will shift subtly in the background, creating a serene and immersive atmosphere.
• Audio Waveform Visualization: A small, elegant audio waveform will appear at the bottom of the screen during recitation, providing a visual representation of the audio.

This design will create a memorable and engaging first impression, encouraging users to explore and use the platform.

7. Non-Functional Requirements

• The system must load within 3 seconds on a standard 4G connection.
• The application must be fully responsive and optimized for both desktop and mobile devices.
• The audio playback and text synchronization must have a latency of less than 200ms.
• The local storage implementation must securely store user progress without requiring server-side storage.
• The application must support the Turkish language for all UI elements and translations.

8. Tech Stack

Frontend:

• React (for web application development)

Backend:

• Python
• FastAPI (for API integration and backend logic)

Database:

• No database required for this version (local storage will be used for progress tracking)

AI Tools:

• None required for this version

Local Orchestration:

• Docker (for development and deployment environments)

9. Assumptions and Constraints

Assumptions:

• Users will primarily access the application from Turkey (TR).
• Local storage will be sufficient for tracking user progress without requiring server-side storage.
• Users will have access to a stable internet connection for audio streaming and API calls.

Constraints:

• The application must comply with Islamic guidelines for Quranic content presentation.
• The application must use free and reliable Quran APIs, such as api.alquran.cloud.
• The application must function without requiring user authentication or account creation.

10. Glossary

• Mushaf: The physical or digital representation of the Quran.
• Qari: A person who recites the Quran with proper pronunciation and intonation.
• Transliteration: The representation of Arabic text in the Latin alphabet to aid pronunciation.
• Local Storage: A web storage mechanism that allows data to be stored locally on a user's device.