Case study
Quran Analyzer: a study workspace
A login-gated workspace for studying the Quran: read the surahs, keep private notes against specific passages, and listen to audio recitations in one place.
Context
Quran Analyzer is a study tool built at Talent Pro. Most Quran apps are built for reading; this one is built for studying, so a signed-in reader can move through the surahs, keep their own notes against specific passages, and listen to audio recitations in the same place. I worked on it full-stack as part of a team of three.
Problem
Reading and studying are different jobs. A plain reader gets you through the text; studying means returning to the same passages, keeping your own notes on them, and hearing them recited. The real work is stitching those three things (the text, a person's private notes, and audio) into one place that stays in sync per account.
Constraints
- Everything is per-account and private, so the app is login-gated and a user's notes and progress have to stay tied to them across sessions and devices.
- Audio recitations are large files, so they have to stream and load on demand rather than ship with the page.
- The text is fixed and structured by surah and verse, so notes and audio need to anchor to a specific verse reliably.
Approach
Anchor everything to the verse
Modelled the content by surah and verse so a note or an audio position points at an exact place in the text. That keeps a person's notes stable even as the interface around them changes.
Keep the reading surface fast
Built the reader in Next.js and load audio on demand rather than up front, so opening a surah stays quick and the heavy recitation files only download when someone presses play.
Private by default
Put the whole workspace behind authentication, with each person's notes and reading progress stored against their account so they pick up where they left off on any device.
Architecture
Client
Service
Data
External
- Next.js readerNode API (auth)· signed-in requests
- Node API (auth)MongoDB (users, notes)· notes · progress
- Next.js readerAudio recitations· stream on play
Outcome
- Brought reading, private notes and audio recitation into one place, instead of juggling a reader, a notes app and a separate player.
- Notes and reading progress persist per account, so a person's study carries across sessions and devices.
- Audio loads on demand, so the reader stays quick even though the recitation files are large.
What I'd change
I'd give the notes some structure instead of leaving them free-form: tags, or references between passages, so a user can find their own notes again once there are a lot of them. I'd also make the audio more forgiving on poor connections, with clearer loading and less chance of dropping out mid-recitation.