DEV Community: Muhammad Subhan Naeem

How I Took a Free Islamic Website From 3 to 130+ Indexed Pages (No Budget, No Ads, No Team)

Muhammad Subhan Naeem — Tue, 30 Jun 2026 10:15:51 +0000

A self-taught developer's honest breakdown of growing a non-commercial Quran website using nothing but SEO fundamentals and a lot of late nights.

A few months ago, Google Search Console showed exactly 3 indexed pages for my website. Today it shows over 130. No paid ads, no agency, no team — just me, a SERN stack (Supabase, Express, React, Node.js), and a website I built for free, with zero ad revenue, as a personal sadaqah jariyah project.

This post is the technical and SEO breakdown of how that growth actually happened, written for other developers who are trying to grow a side project without a marketing budget.

The Project: Al-Quran Hub

Al-Quran Hub is a free, ad-free Quran reading and listening platform with all 114 Surahs, multiple translations, and audio recitations. I built it solo, and I made an early decision that it would never carry ads. That decision shaped everything about how I had to approach growth, because I couldn't rely on paid acquisition. Organic search was the only realistic channel.

When I started tracking it seriously in Search Console, the number staring back at me was 3 indexed pages. For a site with 114 Surah pages plus supporting content, that was a real problem.

Step 1: Fixing the Foundation Before Chasing Content

Before writing a single blog post, I had to fix what was broken structurally. A few things I found and fixed:

Missing per-page meta data. Every Surah page was using the same generic title and description. I rebuilt this using react-helmet-async so every single page gets unique, dynamic meta tags pulled from page-specific data instead of one static template.
No structured data. I added JSON-LD breadcrumb schema across all Surah pages, plus FAQ schema on relevant pages, which helped pages qualify for richer search results.
No internal linking strategy. Pages existed in isolation. I restructured navigation and added contextual internal links between related Surahs and blog content, which is one of the simplest things you can do and one of the most overlooked.

None of this is glamorous work. It's the unsexy part of SEO that doesn't show up in a screenshot, but it's the part that actually lets Google crawl and understand a site in the first place.

Step 2: Building a Real Blog System, Not Just a Blog

A lot of indie projects bolt on a basic blog and call it a content strategy. I went a different direction and built a full blog system on top of the SERN stack:

Backend on Supabase with content managed through the Table Editor
Express API serving blog data to the React frontend
react-helmet-async for per-post SEO meta, same as the Surah pages
JSON-LD schema and FAQ schema on blog posts too, not just the static pages
An AI Overview feature powered by the Groq API, generating a quick summary block at the top of each post for both users and search engines

I started with a topical authority cluster around "Surah Benefits" content — pages explaining the virtues and benefits of reading specific Surahs, which is a high-intent, well-searched topic in the Islamic content space. The first two posts, on Surah Kahf and Surah Yaseen, were both written and structured specifically to rank for long-tail searches around those Surahs.

This is the part most people skip: a topical cluster works because it signals to Google that you have depth on a subject, not just one isolated post. Each new post in the cluster makes the others stronger too.

Step 3: Title and Meta Optimization at Scale

Once the foundation was solid, I went through all 114 Surah pages and rewrote every single meta title and description using keyword data pulled from Semrush and Ahrefs. A few constraints I held myself to:

Titles capped around 50 characters
Descriptions capped around 150 characters
Action-first phrasing instead of passive descriptions
No mention of features the site doesn't actually have, to avoid mismatched search intent and high bounce rates

Doing this manually across 114 pages is tedious, but it's also where a lot of the indexing and impression growth actually came from. Generic, duplicate-feeling meta descriptions are one of the fastest ways to get a page ignored or deprioritized by Google, even if the content itself is solid.

Step 4: Backlinks From Real Platforms, Not Link Farms

I avoided any paid backlink schemes entirely. Instead, I built a backlink presence the slow way, by publishing genuine, original content on platforms with strong domain authority:

Dev.to (where you're reading this)
Medium
Hashnode
about.me

Each platform got its own version of relevant content, not copy-pasted duplicates, with natural internal links back to specific pages on Al-Quran Hub rather than just the homepage. A link to a specific feature page, like the tasbih counter, carries more contextual relevance than a generic homepage link buried in an author bio.

Step 5: Infrastructure That Doesn't Get in the Way

None of the content work matters if the technical infrastructure is unreliable. The current setup:

Domain via Hostinger
Frontend and API (api.alquranhub.org) deployed on Vercel
Cloudflare for DNS, CDN, and SSL set to Full Strict
GA4 and Search Console wired in from day one for actual data, not guesses

Fast, stable infrastructure isn't an SEO trick, but it removes friction that would otherwise quietly tank rankings over time.

The Results

Going from 3 to 130+ indexed pages didn't happen from one big change. It came from stacking small, deliberate fixes: structural SEO first, then a real content system, then scaled-up meta optimization, then genuine backlinks. Search Console impressions and clicks have climbed steadily in parallel with the indexed page count, which is the actual signal that matters more than the indexing number itself.

What I'd Tell Another Solo Developer

If you're building a side project and wondering why Google isn't picking it up, check the boring stuff first. Unique meta tags. Structured data. Internal links. Most developers want to skip straight to "writing more content," but content poured into a structurally broken site doesn't get indexed fast, no matter how good it is.

And if you're building something non-commercial, like I am, growth still matters. More indexed pages means more people finding something useful, even if there's no ad revenue or business metric attached to that growth. That alone made every hour of this worth it.

If you want to see the actual site this was all built for, it's live and free at alquranhub.org.

Building something similar? Happy to answer questions about the SERN stack setup, the Supabase blog architecture, or the SEO process in the comments.

I Built a Free Quran Web App with the SERN Stack — Here's What I Learned

Muhammad Subhan Naeem — Thu, 30 Apr 2026 17:30:10 +0000

I Built a Free Quran Web App with the SERN Stack — Here's What I Learned
A few months ago, I asked myself a simple question:

Why isn't there a clean, fast, ad-free Quran web app built with modern tech?

Most existing apps are either bloated, filled with ads, or haven't been updated in years. As a Muslim developer, this bothered me. So I built one.
Meet Al-Quran Hub — a free, non-profit Quran web application built with the SERN stack (Supabase, Express, React, Node.js).
Here's everything I learned shipping it to production.

🧱 Why the SERN Stack?
I wanted:
A real database with row-level security (not just a JSON file)
A proper REST API I control
A fast React frontend with clean routing
Zero vendor lock-in for the core logic

Supabase gave me a PostgreSQL database with an auto-generated REST layer, but I still built my own Express API on top of it for flexibility. This separation of concerns made the architecture much cleaner.
Frontend (React + Vite) → api.alquranhub.org (Express) → Supabase (PostgreSQL)

☁️ The Infrastructure Setup
This was honestly the most educational part of the whole project.
Frontend: Deployed on Vercel — zero config, automatic deployments on every push. Perfect for React.
Backend: Also on Vercel (serverless functions) at a custom subdomain api.alquranhub.org.
DNS & CDN: Everything routed through Cloudflare. SSL handled automatically, with edge caching for faster load times globally.
Domain: Registered on Hostinger, pointing to Cloudflare nameservers.
The trickiest part? Getting the subdomain for the API (api.alquranhub.org) to work correctly with Cloudflare proxying and Vercel's domain verification at the same time. Took me a couple of hours but here's the fix — make sure your DNS CNAME for the subdomain has Cloudflare proxy disabled (grey cloud) during Vercel's verification, then re-enable it after.

📱 Mobile UI — The Details Matter
I almost launched without fixing the mobile. Big mistake.
The sidebar navigation was broken on small screens — it would push content rather than overlay it. I rebuilt it with:

A slide-in animation using CSS transitions
A backdrop blur overlay that closes the sidebar on tap
Active route color-coding so users always know where they are

Small things, but they make the difference between an app that feels professional and one that feels like a side project.

🔍 SEO for a Non-Profit App
Getting organic traffic to a Quran app in Pakistan means competing for keywords like:

"Quran online"
"Quran with Urdu translation"
"surah baqarah"

My setup:

Google Search Console — submitted sitemap, monitoring coverage
GA4 — tracking user behavior
Meta tags on every page — title, description, OG tags
robots.txt + sitemap.xml — properly configured

Still early days for rankings, but the foundation is solid.

💡 The Biggest Lessons

Ship first, optimize later. I spent too long perfecting things before deployment. Once it was live, real feedback came fast.
Infrastructure is a skill. Cloudflare, Vercel, subdomains, SSL — this stuff isn't taught in tutorials. You learn it by breaking things.
Non-profit projects need SEO too. "Build it and they will come" doesn't work. Even a free Islamic resource needs discoverability.
Separation of concerns saves you later. Having a dedicated Express API instead of calling Supabase directly from the frontend gave me flexibility I didn't expect to need — but eventually did.

🚀 What's Next

Quran audio (recitation support)
Bookmarking & progress tracking
PWA support for offline access
Android app (evaluating React Native vs PWA)

🔗 Check It Out
👉 Live: https://alquranhub.org/
It's completely free and non-profit. No ads, no subscriptions, no data selling — just the Quran, clean and fast.
If you're a developer who's built something for a cause you care about, I'd love to hear about it in the comments. And if you have feedback on the tech choices, drop it below — I'm always looking to improve.

Built with ❤️ and a lot of Cloudflare troubleshooting.