Ad-Din - Cloud based Masjid and Madrasah Management Suite

Having the privilege of Building and deploying an application which had the potential to influence and make one's life easier was, in fact, an achievement. Various technologies were closely studied in order to select the best suitable ones by keeping the scale of the project in mind.

• Xamarin forms was used for cross-platform mobile application
• Angular was used for the web application as it uses modern web platform capabilities
• The .NET core was used for the backend
• Azure SQL server was the database we chose

A converged solution for masjid and madrasahs along with individual Muslim's daily ritual needs and operations was build by prioritizing usability, accessibility, and pleasure provided in the interaction with the product.

INTRODUCTION

Not every day a client approach for building a solution for market of size 1.8 Billion.

Immense Inc, a company based out in Canada consulted us to build a unique converged solution for Masjid (Islamic Place of Worship), Madras (Islamic School) and individual Muslim’s daily ritual needs and operations.

The project was transferred from a different agency, with only simple project setup done for the Web and Mobile Projects.

The market size and the idea of converged solutions for non-profits ignited our senses and made us sign the contract and start working with Immense Inc.

successfully delivering a project like Ad-Din gave us exposure to different problems and finding appropriate solutions to those were indeed a roller- coaster ride. But the confidence it gave us will definitely reflect in each of the projects we do.

ABOUT THE PRODUCT

This application is intended to help every individual Muslim with their daily ritual needs and operations. It is indeed a powerful tool to efficiently and effectively manage the contents, connect, engage, be informed and grow a strong bond for Muslims with their local or global Masjids, Madressahs, its services and events.

As the vision of this project, it was meant for people who were struggling to manage their madrasah and masjid . so we tried our best providing most functionalities in the madrasah/masjid management with a good user experience. We gave prior concern to performance and so every single functionality was developed in an optimized way. Background tasks and daily recurring tasks are used to keep the data up to date.

SOLUTIONS AND DEVELOPMENT STACK

Our scope of engagement included development of Web Application, Android and iOS applications, API (Application Program Interface) and Backend Services.

With the time and budget in mind, Xamarin Forms was the best strategy for cross platform mobile applications and angular was used for web application due to size and further maintenance of project.

Mobile Application

Xamarin’s native UI and the way app logic is shared across multiple platforms makes Xamarin a must-use cross-platform development tool. Application logic underlying the UI layer, like input validation, web service calls, database interactions, and Backend enterprise integrations are coded once in C#.

Code sharing across platforms was a breeze with Xamarin. In Ad-Din, Overall 88.14% of the code is shared across Android and iOS , which in turn helped in shortening the development cycle.

Web Application

Angular Use modern web platform capabilities to deliver app-like experiences. It has built-in protections against common web-application vulnerabilities and attacks.

We needed a framework that can power the huge number of feature modules that are planned for both the web and mobile, at the same time web had some exclusive features that needed to be addressed. The application also needed to be very interactive an intuitive in nature. Thus,Angular came in to the picture. While we are on web unlike mobile load times and size of the application matters more. Angular have a carefully designed methodology for creating applications that can have Megabytes of source code but still run smoothly. It was a good choice to build an application that is destined to grow in magnitude.

Angular have a sophisticated modular architecture with features like Ahead of time compilation and lazy loading that helped Ad-Din to ship out nimble modules which are fast to load and execute in the web front.

THE BACKBONE OF THE PROJECT

With the sheer potential and scale of the project, the base and architecture of the project was important, we didn’t mind rewriting the existing code to accommodate the imminent user base with lowest possible running cost after deployment.

Ease  of  accessibility for the community was an important factor in our decision making. The choice of the stack is significant in an application of this magnitude due to the fact that a rewriting or re-architecting would prove to be fatal.

During initial discussions, the question was whether to go with existing stack (The old and proven ASP.NET) or newer and faster stack such as NodeJS. Our expertise at that time was PHP and NodeJS. After a well effort spent research, we finally ended up choosing .NET Core, because it was blazingly fast with capability of handling 1000's of request per second. Benchmark and User experiences backed our choice. Also, it was ideal for cloud based multiple instance environment.

The next big thing was Database, where and how to store and access data. We were asked to choose Microsoft SQL Server, and with small research, it was an ideal go-to solution with least learning curve for our developers and faster development iteration.

Later down the road, we moved to Azure SQL Service (the hosted solution from Microsoft Azure).

There are a lot of functionalities included in the application under different modules.

MASJID MODULE

•   Masjid Finder, Prayer Times, About Home Masjid, Staff Directory, Facility Details, Gallery

•  Masjid Role Based Access: General User, Admin Portal, Staff & Volunteer, Masjid Dashboard, Masjid Admin Portal

MADRASAH MODULE

• Program Details & Subject, Sign up for a Program, Alumni, Staff List, Class Routine

• Madrasah Role Based Access: Admin Portal, Teacher Portal, Parent Portal & Student Portal featuring

• Dashboard, Class / Class Section, Subjects, Attendance, Class & Subject wise attendance, Exam Marks, Library, Migration, Fee Payments, Assignments, Recognitions, Delegations, Alumni Verdict, Parent-Teacher Interview, Holidays, Grade, Exams, Reports

EVENT MANAGEMENT

• Masjid / Madrasah events listing, private and public events, events based on interest, bookmarking and sharing.

CARPOOL

• Congregants can opt to carpool to their Masjid / Madrasah and go green.

• Grow your network, View, request, Add,Accept, Reject carpool listings to your favourite masjid/madrassah

OTHER OPTIONS

• Live Streaming: YouTube Channel & Mixlr audio integration

• Tasbih to count your dhikr

• Qiblah compass & map to show you the direction to Qabah in Mecca

• The Holy Qur'an (Al Qur'an)

CHALLENGES

The Initial solution needed to be shipped within 6 months. Thus, We had to follow a very tight schedule and timeline. Also, the overall size of the project was huge .Deploying and managing the solution in large scale cloud- based environment was indeed a challenge.

The challenge we faced throughout the project was cutting down all the unnecessary cost during development , testing and deployment.

Angular 4 based web portal did go beyond our earlier expectations. but still, we delivered it successfully with utmost dedication and interest.

One of the biggest challenges was to show details from all the different modules(attendance, assignment, carpool, class routines, exams, parent-teacher interviews etc) in the home screen in a summarized form. There were so many queries to be executed and calculations to be made for this single page. We had to make a lot of optimization to make sure that it was not an overkill on the server. All the processing was done in the background and the home screen details of every user was fetched, calculated and stored in a form that client applications can easily retrieve those.

If that was the case with backend, the mobile team had other challenges to overcome.

There were more than 200 screens to work on. Every screen has to include lots of data and input from the user. To incorporate lots of UI controls and to put them resembling the provided UI, in such a way that, the flawless app experience is not lost. It was indeed a challenge.

Ad-Din grew fast and our decisions to choose the stack we chose proved to be fruitful. But, Ad-Din’s source code grew to a point where finishing  a production build took a lot of time. And after some more additions the builds suddenly started failing due to lack of memory. We worked with the Angular team and figured out the issue and was able to make changes to our build scripts so as to accommodate the application the size of Ad-Din.

CONCLUSION

It was purely the drive and passion towards building ‘the better’ that showed us pathway to the successful delivery of this project. Of course, It wasn't an easy task. But our team faced each of the challenges with hard work, determination and integrity.

We completed this converged solution for Madressahs and Masajids within a year. This application is useful for the management staffs, Teachers, Students and the parents as it allows them to track their daily rituals and operations and makes it easier to follow up.

Ad-Din was truly an exciting challenge. It is an honor to get entrusted upon working and completing such an immense application gracefully as expected. We truly believe that we have done justice to the wondrous idea of this application that our client came up with.

We welcome your great product ideas with which, we could continue to Dream, Build and Launch more of such relevant and useful applications in the future.

REVIEWS

• I found Ad-Din is great app for the parents knowing kids progress daily and tracking the kids performance . Also the message system is very helpful updating the closure due to winter storm. My Allah SWT bless the people coming up with this ideas helping the community.

- Inayat khan

• I’m thankful to almighty that finally we have a comprehensive Muslim app which connects us with our local Masjid.

- Zaheed

• Alhamdulilah, this is such a great application with various uses.It really solves the problem of trying to combine the school and masjid environment in the tech savvy world we live in today. Mashallah very well done.

- Sohail shaikh