[01] - 01 - Architecture & Tech Stack ⚙️🖥️

UpdatedAugust 27, 2025

•1 min read•View as Markdown

Mohammad Saad Ansari

Part of series📖 [01] - Developing a Quran Mushaf Web App

MVC (Model-View-Controller) Architecture 🏗️

To keep the project clean and maintainable, I used the MVC design pattern:

Model 📦: Handles all data fetching and management. It talks to the AlQuran Cloud API to get Quranic text and Surah details.
View 👀: Responsible for rendering everything you see — the Quran pages, Surah info, navigation buttons, and handling user inputs.
Controller 🎛️: The middleman that connects Model and View. It manages user actions, fetches data from the Model, and updates the View accordingly.

This separation makes the code modular, easier to debug, and ready for future improvements.

Tech Stack 🛠️

HTML5 📄: Structuring the web pages with semantic, accessible markup.
CSS3 🎨: Styling the app with responsive design and beautiful Arabic fonts to showcase the Uthmani script elegantly.
JavaScript (Vanilla) 💻: Powers the app logic — API calls, dynamic content updates, and user interaction without any heavy frameworks.
AlQuran Cloud API 🌐: Provides authentic Quranic text and metadata dynamically.
Hosting 🚀: Deployed on Netlify for fast, reliable access worldwide.

This stack strikes a perfect balance — lightweight, efficient, and easy to maintain.

#architecture #tech-stack

Comments

Join the discussion

No comments yet. Be the first to comment.

📖 [01] - Developing a Quran Mushaf Web App

Part 2 of 8

A detailed multi-part series documenting the development of the Quran Page Viewer web app—covering design, API integration, frontend build, challenges, and future plans to help developers build similar projects.

[01] - 02 - Key Features & How They Work 🚀

1. Page-by-Page Navigation 📖 Users can easily move through all 604 pages of the Quran using Next and Previous buttons. The app keeps track of the current page and updates the content dynamically without reloading the page. Example: Handling Next...

More from this blog

[01]🔗 Project Links

🗂️ GitHub Repository: Link 🌐 Live App: Link

May 2, 20251 min read

[01] - 06 - Walking Through the User Experience 🌐📖

The Quran Page Viewer is designed with simplicity, clarity, and reverence in mind — offering a smooth and spiritually focused experience. Here's what a user can expect when they open the app: 🏠 Landing on the Home Page When a user visits the app at...

Apr 11, 20252 min read

[01] - 05 - Understanding the JavaScript Files 🧠📜

The Quran Page Viewer is powered by four JavaScript files that follow the MVC (Model-View-Controller) architecture. 1. model.js – The Data Layer 📡 This file is the Model in MVC. It handles data fetching from external APIs and supplies that data to ...

Apr 4, 20253 min read

[01] - 04 - Understanding styles.css 🎨

The styles.css file defines how the Quran Page Viewer looks and feels — from fonts and colors to layout and responsiveness. It ensures that the app is both beautiful and easy to use across devices. 🔤 Fonts @import url("https://fonts.googleapis.com/...

Mar 28, 20252 min read

[01] - 03 - Understanding index.html 📝

The index.html file is the main webpage structure for the Quran Page Viewer app. It sets up the page elements and connects all the styles and scripts that make the app interactive and visually appealing. Key Parts DOCTYPE & Language <!DOCTYPE html...

Mar 21, 20252 min read

W

Web Dev Projects

16 posts

A Hashnode blog sharing insights, code walkthroughs, and best practices from personal web development projects to help fellow developers learn and build.