Mafhum — Building a Quran Vocabulary Learning Experience

Overview

Mafhum is a Bengali-first Quranic Arabic vocabulary app. It began with a book, an idea, and a problem I had myself: learning Quranic words from a list was important, but it did not keep me interested.

I built a first version, stopped using it, and recently started again. This time, I am rebuilding it as a web product and thinking more carefully about what makes someone want to keep learning.

How Mafhum Started

A few years ago, I found a book on understandquran.com. It said that 125 words make up around half of the Quran. That blew my mind. I started learning those words, but the process felt boring. I wanted to find a more enjoyable way to learn them.

As AI tools became more available, I decided to build an app called Mafhum. I used AI tools to build it by prompting and iterating—a way of working people now call “vibe coding.” I borrowed some of Duolingo’s learning patterns because they already worked well: short lessons, visible progress, and small rewards. I wanted to learn from the structure, not copy its colors or identity.

The First Version

I built the first version with Expo. Getting an app build onto my phone was harder than I expected. Making an APK, installing it, and updating it added friction every time I wanted to try a change.

The app also had a Supabase database, but that did not make it useful by itself. Nobody was using the app—not even me. After a few days away, I stopped using it, and the project paused too. I did not have real usage or feedback to guide what I should fix next.

Why I Started Again

Recently, I received some OpenAI credits after taking part in a hackathon. I thought it was a good chance to return to the project. I opened the old repository and tried to continue from where I had left off.

But the AI coding tools often hallucinated or changed things in ways I could not trust. Instead of adding more code on top of a shaky base, I kept the original idea and decided to rebuild the product from scratch.

This time, I chose the web. A web version is easier to open, easier to share, and easier to update. Learners do not need to download a new APK every time I improve something. That choice also gave me a chance to make the product simpler to maintain.

The source book still gives the course its foundation: 125 words organized into 25 lessons. But a book and an app ask different things of a learner. A book can sit open beside you while you look up an answer. In an app, a new learner has to recall a word, choose between alternatives, understand the feedback, and meet that word again later.

I wanted Mafhum to help Bengali speakers recognize Arabic words, understand their meaning, and eventually notice them in an ayah—without making them feel they should already know the answer.

The First Problem Wasn't the Layout

I began by borrowing familiar learning-product patterns: a lesson path, XP, streaks, hearts, matching cards, and a progress bar. I wanted the interface to feel active and rewarding, while keeping Mafhum's own purple-and-white visual identity instead of copying another app's colors.

Then I started using the exercises more closely. Some options were duplicated or had little to do with the word. Sometimes choosing an answer immediately showed whether it was right, leaving no separate moment to commit to an answer and check it. A learner who came to learn could be marked wrong before the app had helped them think.

That changed the problem I was solving. The app did not just need attractive cards. It needed a better learning loop—and better content underneath it.

Decision 1: Make the Options Teach, Too

Random wrong answers can make a quiz harder, but not necessarily more useful. If the right answer means “this,” the other choices should be words like “that” or “these”—not unrelated words from somewhere else in the course.

I grouped words by meaning and used them to make four choices. I also added a check for duplicates. This asks the learner to notice the difference between related words instead of spotting one obviously unrelated answer.

This decision pushed me to organize the course content carefully. Each word can include its Arabic spelling, Bengali meaning, pronunciation, root, word type (noun, verb, or particle), how often it appears in the Quran, and an ayah example. This makes a lesson more useful—and gives me a clear place to check when something looks wrong.

Decision 2: Let Learners Choose, Then Check

I separated selecting an answer from checking it. The learner can choose first; the bottom action then gives them an explicit “চেক করুন” moment. Only after that does the interface show the right or wrong state.

It is a small change, but it gives the learner a moment to remember before seeing the answer. I used the same idea in the lesson: each of the five words comes back in different forms—meaning, Arabic recall, and pronunciation—instead of appearing only once.

I set a target for a lesson to take around one to two minutes. That is a design target, not a measured result yet. The point is to make each word reappear enough to practise it without turning a short session into a long test.

Decision 3: Put Help Where the Learner Needs It

First-time learners will not know every answer. I did not want to solve that by adding a permanent block of instructions that made an already busy screen longer.

Instead, I made hints opt-in and compact: “Hint দেখুন” opens a small popover when someone needs support. Ayah context sits below the answer options, so the question remains the focus while the example is still close by. In the context card, the target Arabic word is highlighted, Bengali is the primary translation, and English is secondary.

That last choice matters to the product's audience. English can help later as the app becomes more global, but it should not make Bengali-speaking learners work through a second language before they can understand the lesson.

Decision 4: Treat the Ayah as Part of the Data, Not Decoration

At one point, the Arabic word shown in a lesson did not match the highlighted word in its ayah context. That mismatch was more than a visual bug. It meant the relationship between a word and its example needed to be explicit and reviewable.

I started organizing the content around lessons, words, and lesson-to-word links, with context and translation attached to the relevant word. Supabase gives the app a place to keep that material structured, so a correction can be made to a particular row instead of being buried in a screen full of static text.

I also learned not to treat “the database is connected” as proof that the content is correct. Arabic text, Bengali meaning, English translation, and verse reference still need human review. For this product, a wrong example can teach the wrong thing with complete confidence.

Decision 5: Make Progress Earned, Not Just Visible

The lesson path needed to do more than display completed circles. After a lesson, learners match Bengali meanings to Arabic words. At the end of each five-lesson block, a checkpoint revisits words from that block and words due for review. The next block stays locked until the checkpoint is passed without mistakes.

The separate review card made review feel like one more place to remember to visit. Bringing due words into a checkpoint makes remembering old words part of moving forward. The path shows what is ready, what is complete, and what still needs work in one place.

XP, streaks, and sound feedback support that loop, but they are not the lesson itself. The reward should make progress satisfying; it should not hide whether the learner can actually recall the word.

Learning While Building

AI helped me move quickly, but the first version also showed me its limits. If the code or content was wrong, a confident answer from AI did not make it right. I had to slow down, check what was happening, and make the product easier to understand and maintain.

I also considered whether Mafhum needed an AI tutor. For now, I do not think it does. The bigger gaps are clear hints, relevant answer choices, correct word-to-ayah links, and a learning path that rewards recall. An AI-generated explanation would not fix those foundations—and Quranic explanations need care.

As a product designer, I have learned a lot over the last couple of years by building one project after another: frontend, databases, backend, Supabase, and Git. Each project made me more comfortable working across the whole product, not only the design. Building is fun—and I keep learning as I go.

What Exists Now

• A web-first version of Mafhum, with a 25-lesson, 125-word course based on the source book

• Bengali-first vocabulary practice with rotating recall formats and optional hints

• Context cards that connect a word to an ayah, with the target word highlighted

• Lesson exams and pass-gated checkpoints every five lessons

• Due review words folded into checkpoint practice

• A progress model with lesson completion, word mastery, XP, streaks, and Supabase sync support

An automatic content check confirms the lesson and word counts and checks that each meaning question has four distinct, related choices. This helps catch content mistakes, but it does not prove that learners remember more or finish faster.

What I Still Need to Learn

The next step is to use this version regularly and put it in front of first-time learners. Do the hints help without giving the answer away? Does the one-to-two-minute lesson target feel achievable? Are the checkpoint matches fair, and does a learner understand why a block is still locked?

I also need to keep reviewing the word and ayah data. The interface can make a correct relationship easier to understand, but it cannot make an incorrect relationship true.

The Takeaway

I started this because a useful book was not enough to keep me interested. The first app taught me something else: if it is difficult to install, hard to update, or not useful enough for me to return to, the idea will stay unused—no matter how good the database or the design looks.

This rebuild is my chance to make the learning more enjoyable and the product easier to reach. I am still learning how to build it. And that is part of the reason I enjoy it: building is fun.