Al-Quran-ul Karim Web Application : A Real Case Study

Introduction and Background

The client is a lecturer at a university in Surabaya. He is a religious person and always puts forward the da'wah of Islam. He believes that social media has taken much time for some Muslims. He imagined, "What if that time could be used to read the Al-Qur'an". So he wants to make the Al-Qur'an application similar to social media. He hopes that with the app, the Muslim community will read the Al-Qur'an more often than social media.

Problem Statement

The client wants to create Al-Qur'an Apps like popular social media, like Facebook, Twitter, or Instagram. The app must show the verse like a post. The post must have a colored background to attract the reader. Arabic font must be clear and not cut for long verses. Have some features, like share, save, and download. 

Solution

Based on the brief, I suggest the client design this app like Instagram. Because it nearly meets the requirement and the client's needs. I can put the verse on the image and then change the background with a gradient. I can put the translation in the caption ad add some buttons above the caption.

Disclaimer: This project is permitted to be posted in public.

Web Development Process

Requirement Gathering

We discussed the App via WhatsApp text and call. Because it is a very easy and fast method for my client. Then I put all the discussion results into the Notion so my client and I can see and correct them.

You can see the Notion here :
https://www.notion.so/mbrianwebsite/Al-Qur-an-Bapak-Taufan-0de2e4db440343b29589b1495472aafb

After we agree on how this application will be made, I tell the client what needs to make, how many days to take this done and how much it will cost.

Design and Layout

We agree that the app will be made like Instagram. But I don't want this app 100% like that. So I hire a Talented UI designer (Kemal Ghani) to design the UI.

Development

Based on the brief, I used Vue to develop the front end of this app. Because it is Vue is fast and easy to develop, and it can be serverless. Combined with Tailwind CSS, make this app more lightweight and fast load.

I use Quran.com API v4 for the Back-End, which is publicly served. So we don't need a server to develop this app. We just need Netlify to build and host this app.

The app is predicted to be done in 45 days. 15 Days for design and 30 days for development.

6 Features must be done.

1. Random surah
2. Search translation content
3. Ayah per page
4. Favorite + Bookmark
5. Dark Mode
6. Share and Download

In the middle of development, the client wants to add a feature. He wants to add a quiz feature to the app. So  I keep receiving this feature with the condition that the client will pay an additional fee. And I will keep the project mile on track.

Testing

We use black box testing for each module for functional and UI testing of the app. I invite clients to do independent trials to know that the application is as expected by him. When it has a bug, I immediately fix the bug. 

Deployment

I deploy this app in Netlify. Because it is very simple, fast, and free. I deploy it after the initial commit of this project. So that clients can immediately test the results when needed.

When all the features work well, we add a domain, alquranulkarim.com. We share this link with the community for soft launching to get feedback.

You can see the feedback here :
https://www.notion.so/mbrianwebsite/Feedback-Al-Quran-ul-Karim-v1-1-d5e5f420b68144b78d033ba41f3b6f10

The soft launch went well and got the user's attention.

Post Deploy Support

Result

Conclusion

Creating an Instagram-like Al-Qur'an App was successfully completed within the 45-day development period. The client expressed satisfaction with the outcome, and the app received positive attention from users.

By leveraging Vue.js for front-end development, the app became fast and easy to work on. The addition of Tailwind CSS further enhanced its performance and reduced loading times.

Throughout development, the Quran.com v4 API was utilized to access Al-Qur'an content, eliminating the need for an additional server. Hosting and building the app on Netlify proved to be simple and efficient.

The app boasts six implemented features: random Surah selection, translation search, Ayah per page, Favorite + Bookmark, Dark Mode, and content sharing and downloading.

During development, the client requested the addition of a quiz feature. I gladly accommodated this request with an additional fee, ensuring the project remained on track.

Black box testing assessed the app's functionality and user interface. A soft launch was conducted upon deployment, sharing the app link with the community to gather feedback.

Post-launch, 10 days were provided for minor revisions, such as responsiveness, typo corrections, and minor styling improvements.

In conclusion, the Instagram-like Al-Qur'an App project was successful and completed within the designated timeframe. The client expressed satisfaction, and the app garnered positive user attention.