Al-Habl.
Quran Community Platform
A Quran platform that doesn't just tell you to reflect — it walks you through the Quran with a five-lens structure, AI that never makes up answers, and a community to do it with.
- Role
- Solo — concept, design and full-stack development
- Context
- Quran Foundation Hackathon
- Status
- Live
- Stack
- Next.js · TypeScript · Supabase · Claude API · Quran MCP
01
Overview
Al-Habl means “the rope”, from the ayah “Hold firmly together to the rope of Allah” (Al-Imran 3:103). I wanted to build something different from the usual Quran app: not a place that says “reflect on the Quran”, but one that actually helps you do it.
It combines a five-lens reflection structure, an AI assistant grounded in the Quran MCP, and a whole community ecosystem where you can chat and connect with other members. I designed and built it on my own, end to end, and submitted it to the Quran Foundation Hackathon. I use it myself too.
02
The problem
Most Quran apps say you should reflect. They may give you resources — text, translation, tafsir — but there is no proper structure for how to actually do it. Reflection ends up as something the app tells you to do, rather than something it helps you do.
I wanted to close that gap: give reflection a clear structure to follow, and put people around it so it stops being a solitary effort.
03
What it does
01
Five-lens reflection
Instead of leaving you with a verse and a blank page, Al-Habl takes you through the Quran with a five-lens structure. Reflection has a shape you can follow.
02
AI that doesn't make things up
The AI never gives its own fabricated answers. It works through the Quran MCP to help you go through the Quran, and answers your questions from that. It helps surface resources by meaning, not just keyword.
03
A community ecosystem
You can chat, connect with other members, and share reflections. Al-Habl is a place to study with people, not just an app you open alone.
04
Circles and a shared rhythm
Small groups work from the same ayah at the same time, and members can set goals for their study. That shared starting point makes the conversation easy to join.
05
Tafsir and recitation
Explanation and audio recitation sit next to the ayah, so you do not have to leave the app to understand or listen.
04
How it fits together
A Next.js front end talks to Supabase for the app's own data, and to the AI layer for answers that are grounded in the Quran MCP.
01
Next.js + TypeScript
Interface, routing and server logic
02
Supabase
Accounts, Circles, reflections and chat
03
Claude API + Quran MCP
Answers come through the Quran MCP, not invented by the model
05
What I built
- Product concept, including the five-lens structure
- UI design and the front end in Next.js and TypeScript
- Back end and data model on Supabase
- AI integration with the Claude API and the Quran MCP
- Deployment on Vercel and the hackathon submission
Next case study
TaskFlow
My first Python project — built on my own with zero prior knowledge and no tutorials, and where I learned FastAPI and authentication.