Contact person: Interactive Quran Reading Website Development

Phone:Show

Email:Show

Location: Lahore, Pakistan

Budget: Recommended by industry experts

Time to start: As soon as possible

Project description:
"Development of a Quran Reading Website
Project Title: Development of an Interactive Quran Reading Website with English and Poetic Urdu Translations
Project Overview: The objective of this project is to create a beautiful, user-friendly, and spiritually enriching website for reading the Holy Quran. The platform will serve as a free, accessible resource, featuring the original Arabic text alongside high-quality English and a rhythmic/poetic Urdu translation. The design should be clean, respectful, and visually appealing, incorporating traditional Islamic aesthetics to provide an immersive reading experience.
A Note on the Nature of the Work: This is a project of religious significance, intended as a service to the Muslim community. We are seeking a freelancer who shares this vision and is willing to provide a reasonable and fair quotation. While we believe in proper compensation for excellent work, we hope the spiritual nature of this project will be taken into consideration.
Key Objectives:
1. To provide an intuitive and accessible platform for reading the Holy Quran online.
2. To facilitate deeper understanding through a standard English translation and a specific poetic Urdu translation.
3. To ensure a seamless and fully responsive experience on all devices (desktops, tablets, and mobile phones).
4. To create a respectful and aesthetically pleasing environment that encourages regular reading and reflection.
Core Features & Functionality
1. Quran Reading Interface:
• The main reading page will display the Quran in a two-column layout.
• Column 1 (Constant): The original Arabic text of the Quran.
• Column 2 (Switchable): A translation of the Quran. A user-friendly toggle button must allow users to instantly switch between the English and Urdu translations. The Arabic text must remain fixed.
• Urdu Translation: A key requirement is that the Urdu translation must be a rhythmic and poetic (منظوم ترجمہ) version, not a standard prose translation. The freelancer will be responsible for sourcing and integrating this specific type of translation.
2. Navigation System:
• A comprehensive and easy-to-use navigation system is essential. Search functionality by Surah name/number or ayah number. Users must be able to navigate to any part of the Quran by:
o Surah (Chapter): A dropdown menu or an indexed list of all 114 Surahs.
o Para / Juz' (Part): A dropdown menu or an indexed list of all 30 Paras.
o Ayat (Verse): An input field to go directly to a specific Surah and Ayat number (e.g., Surah 2, Ayat 255).
3. Interactive Verse Highlighting:
• When a user hovers their mouse over any part of a verse (in either the Arabic or the translation), the entire corresponding verse block—including the Arabic text, the translation text, and the verse number—must be visually highlighted.
• The specific text being hovered over should also have a distinct secondary highlight (e.g., a different text color or an underline).
• Verse-by-verse display with proper spacing.
4. Bookmark Functionality:
• Each Ayat must feature a simple "bookmark" icon.
• Clicking the icon will save the Surah and Ayat number to the user's browser (using local storage; no user registration is required for this).
• A dedicated "Bookmarks" page will display all saved verses as clickable links, allowing the user to return to them easily.
5. Naat Page:
• A single, separate page dedicated to Naats (poetry in praise of the Prophet Muhammad ﷺ).
• This page should support adding or embedding audio or video players (e.g., from YouTube, SoundCloud) alongside the written text of the Naat.
Design & User Experience (UX) Requirements
• Aesthetics: The website's design must be elegant and inspired by Islamic art. This includes using appropriate geometric patterns or arabesque designs for page borders and section dividers. Islamic color scheme (greens, golds, neutral backgrounds or you may suggest)
• Typography (Crucial Requirement):
o Arabic Text: Must use a clear, high-quality, and widely recognized Quranic font (e.g., Uthmanic script fonts like KFGQPC Uthman Taha Naskh, Amiri Quran).
o Urdu Text: Must use the Jameel Noori Nastaliq font.
o Punctuation: All punctuation and symbols in the Arabic text must conform to the standards of the Uthmanic script and diacritical marks
• Mobile Responsiveness: The website must be fully responsive. The reading experience on mobile devices is a top priority and must be as seamless and intuitive as the desktop version.
• SEO friendly and optimized for fast loading on mobile and low internet speeds.
• Admin panel for adding/editing translations & Naats. Documentation / Training for managing the website.
Freelancer Requirements
This project is open only to freelancers who meet the following criteria:
1. Must be a Muslim who understands the religious and cultural sensitivities of handling the Quranic text.
2. Language Proficiency: Must be fluent in Arabic and Urdu to ensure the accuracy, correct alignment (RTL), and proper display of the text and its poetic translation.
3. Proven Experience: Must provide a portfolio with demonstrable experience in creating websites of a similar nature (e.g., Islamic portals, Quranic websites, or projects requiring complex right-to-left language implementation).
4. Technical Skills: Proficient in front-end and back-end development. The freelancer must specify the source of the Quranic text and translations they intend to use.
Proposal Requirements
Interested freelancers must provide the following in their bid:
1. A brief introduction confirming they meet all the freelancer requirements listed above.
2. A link to their portfolio, highlighting 2-3 relevant past projects.
3. A proposed technical approach, including the technology stack and the proposed source for the Quranic text and translations.
4. A detailed cost breakdown and a total project quote.
5. An estimated timeline for project completion with key milestones.
Reference Websites
Freelancer should study:
• [login to view URL]
• [login to view URL]
• [login to view URL]
• [login to view URL]
• [login to view URL]
Note to Bidders: This project requires religious sensitivity and linguistic expertise. Only bid if you have genuine experience with Quranic text handling and understand the importance of accuracy in religious content. Client will provide website and hosting details.
We look forward to receiving proposals from dedicated professionals who can help us bring this important project to fruition." (client-provided description)