The latest articles on DEV Community by Alaa Qadomy (@alaa_qadomy_d13dfc9fa189f). https://dev.to/alaa_qadomy_d13dfc9fa189f https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4222495%2Fd136e319-27c6-4bfd-ad04-0c85a821862a.png https://dev.to/alaa_qadomy_d13dfc9fa189f en Alaa Qadomy Mon, 02 Nov 2026 13:46:13 +0000 https://dev.to/alaa_qadomy_d13dfc9fa189f/one-codebase-two-outputs-a-zero-dependency-static-site-and-an-android-app-for-quran-audio-58aj https://dev.to/alaa_qadomy_d13dfc9fa189f/one-codebase-two-outputs-a-zero-dependency-static-site-and-an-android-app-for-quran-audio-58aj <p>I built a Quran audio project where the same JavaScript generates both a static website and an Android app, with no runtime dependencies in the generator. Here is how it is structured and what I would do again.</p> <p>The result is called <a href="https://suwar-quran.web.app/" rel="noopener noreferrer">Suwar</a>: one page per surah, in Arabic and English.</p> <h2> The constraint </h2> <p>I wanted every one of the 114 surahs to have its own indexable page, in two languages, plus a mobile app that reuses the same interface. That is 228 pages. I did not want a framework build step to maintain for something this simple.</p> <h2> The structure </h2> <ul> <li> <strong>Data</strong>: a fetch script pulls the text once and validates it (114 surahs, 6,236 verses) before anything is generated. If the counts are off, the build stops.</li> <li> <strong>Generator</strong>: plain Node.js, no dependencies. It writes one HTML file per surah per language, plus a sitemap, <code>hreflang</code> alternates, JSON-LD, and an <code>llms.txt</code> file.</li> <li> <strong>App</strong>: Capacitor wraps the same built UI as an Android project. The audio player uses MediaSession (repeat, speed, sleep timer, resume).</li> <li> <strong>Tests</strong>: run with Node and a headless Chromium, so the generator can be checked without an Android SDK.</li> </ul> <h2> What worked </h2> <ol> <li> <strong>Validating data before generating.</strong> A wrong verse count fails the build instead of shipping bad pages.</li> <li> <strong>Keeping the generator dependency-free.</strong> It runs anywhere Node runs, which mattered because I develop on a machine where package installs are not always possible.</li> <li> <strong>One UI for web and app.</strong> Fixes land once.</li> </ol> <h2> What I would watch for </h2> <ul> <li>Attribution and licensing: the text comes from <a href="https://tanzil.net" rel="noopener noreferrer">Tanzil</a> under CC BY 3.0, so the source must be credited and the text must not be modified.</li> <li>Audio rights are separate from text rights. Each reciter is configured with a <code>licensed</code> flag so that any of them can be removed at once.</li> <li>Ads: a small banner on regular screens and an optional rewarded ad. None during playback.</li> </ul> <p>If you build content sites with many near-identical pages, the validate-then-generate pattern is the part worth copying.</p> android javascript seo webdev