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.