← QuranFlow — the redesign

QuranFlow Rebuild — Implementation Plan

Build plan for taking the Sakīna design (mockups in ../mockup/) to a production iOS/Android app and coach tool. Companion to FEEDBACK-SYNTHESIS.md (what stakeholders asked for) and ../mockup/REVIEW.md (the adjudicated design decisions). This is the "IT revamp" — a full replacement of the current app and its backend, not an incremental patch.

Revised 2026-07-17: hard deadline. The app must be live for the fall semester — students onboarding in the first week of September 2026. The original open-ended sizing ("6–9 months for one developer") no longer applies as a schedule; it survives below only as the effort arithmetic behind the dated delivery plan in Section 5, which now defines what ships at launch, what lands during the semester, and what a September date costs.

Revised 2026-07-26 (product review with Lejla, Jul 24): the Year-2 model changed. Year 2 has no weekly submissions — per-week, multi-coach appointment booking (soft cap 3/week, included in tuition) replaces the recurring-slot model, and coaches get an appointment-notes tool (record → transcribe → auto-summary → edit → send). A new entry/placement flow (web checkout → email sign-in → first assessment → placement) now gates first-run and therefore moves into the launch scope (Phase 1) — unlike Year-2 booking, which stays deferred to November. Whether to offer an optional recurring "same slot weekly" booking is an open product question (Q13, pending Lejla). Changes are marked in Phases 1 and 4 and Section 5 below; the source is the flow map in ../../explorations/flow-map/.

Revised 2026-07-27 (Lejla review): the Jul 27 screen review (decision record: ../../reviews/App-Review-Jul27-Lejla.md) reshaped the launch-scope entry flow. The first act is now a recorded recitation (four graded reading stages), not a booked 1:1 — and it reuses the submission/recording pipeline, so the launch entry lane costs little beyond the supportive screens and the Level-0 states (full app minus lessons; pending recitation shown as a submission awaiting feedback; never-submitters auto-placed to Level 2). The recording routes to a pooled placement queue (role-gated, replacing today's shared-login account). Two launch-scope cuts: the Qur'an font/script picker (onboarding step 3 and the settings screen) is dropped entirely. One launch-scope add: an availability step for every placed student (Year 1 levels 1–4 and Year 2), collecting general availability that drives all live-session scheduling. Sign-in is email + password (welcome-email credentials), not a magic link. Deferred to November (Phase 4) unchanged: the Year-2 hype sequence for Level-4 graduates and the plan-based appointment copy (allowance stated per the student's purchased plan, never a universal cap). Changes marked in Phases 1 and 4 and Section 5.

Context this plan assumes: a small org (1 program lead, 1 platform lead, ~11 part-time coaches), a student base on iOS today with Android demand likely next, and a coach population that is overwhelmingly mobile (9/11 mobile-only or mobile+desktop, 1 desktop-only per the questionnaire). No committed engineering headcount is named here — sizing in Section 5 is in engineer-weeks so it can be mapped to whoever ends up on it, whether that's one contractor or a small agency.


1. Technology recommendation

Client: React Native (Expo), not SwiftUI, not Flutter

Recommendation: React Native with Expo (EAS Build/Submit, Expo Router).

Rationale:

What would change this recommendation:

Backend: Managed BaaS over custom API

Recommendation: a managed backend-as-a-service (Firebase or Supabase), with the third-party integrations (Zoom, email, Stripe) as Cloud Functions/Edge Functions rather than a bespoke server.

Rationale:


2. Build phases

Each phase ships something a student or coach can actually use, not just scaffolding. Screen labels reference ../mockup/src/main.jsx artboard labels.

Phase 1 — Core loop: auth, four tabs, lesson → recording → submission

The minimum viable app: a student can log in, see their week, watch a lesson, record and submit an attempt.

Screens (by artboard label):

Backend surface:

Exit criteria: a real student can complete onboarding, watch this week's lesson, record an attempt, submit it, and see it move through Ready → In Progress → Submitted → (revoke window closes) with no coach-side app yet (feedback can be seeded manually/by hand for pilot testing). This phase is usable standalone if coaches temporarily keep using their current review process for one more cycle while Phase 2 builds.

Phase 2 — Feedback loop closure + coach review app

This is the single most-requested fix across all four feedback sources ("teachers can't see the assignment text while reviewing audio" is called the most damning fact in the current app) and makes coaches, the bottleneck users, actually adopt the new system.

Screens:

Backend surface:

Exit criteria: a coach can open the queue, see assignment text and audio side by side, leave annotated + voice feedback, and the student sees it arrive, practices, and resubmits — all in-app, replacing notebooks/Excel/ second devices. Pilot with 2–3 coaches here (see Risk R3) before wider rollout.

Phase 3 — Schedule, notifications, announcements/messaging

Solves the second-most damaging problem class: timezone bugs, no attendance signal, and the community-board replacement decided on the coaches' call.

Screens:

Backend surface:

Exit criteria: every displayed time is correct in the viewer's local zone (this is the phase to run the DST/timezone test matrix from Section 3 against, not defer); a student gets a real Zoom link at the real local time; a coach and student can message inside guardrails; the community-board replacement is live for both years.

Phase 4 — Year-2 appointments, attendance automation, issue reporting, subscriptions

The long tail: features that matter but don't block Year-1 students' daily loop, plus the business-operations surface.

Revised 2026-07-26 (product review with Lejla, Jul 24): the Year-2 appointment work here changed shape. Booking is now per week across the coach team with a weekly cap (soft cap 3, included in tuition), not a recurring 15-week slot lock — the recurring option is dropped pending Q13. Year 2 has no submissions, so this phase also delivers the appointment-notes pipeline (coach records a debrief → transcribe → auto-summary → coach edits → send) and its two new screens. Note the entry/placement flow moved to Phase 1 (it gates first-run); only the Year-2 loop stays deferred here to November.

Revised 2026-07-27 (Lejla review): three Year-2 corrections land in this phase. (a) the weekly appointment count is plan-based, bought at checkout (default 1/week for every elective; only Tajweed Practice sells 2–3), not a universal soft cap of 3 — all allowance copy derives from the student's own appointment_plan ("Your plan includes N appointments a week"). (b) Year-2 lessons are per-elective (only Tajweed Practice has none; its Today is appointments-led) — the shared-lessons assumption is wrong; the sole universal Y1→Y2 difference is feedback format. (c) two Year-2 arrival scenarios: Level-4 graduates auto-enrolled into the mandatory first semester get a celebratory hype sequence (placeholder copy this pass; Yasmeen owns the sensibility, Lejla provides the graduation-email copy source), while returning elective students arrive via checkout with no hype plus a change-elective housekeeping line (first week, email admin). New Elective entity and appointment_plan field — DATA-MODEL.

Screens:

Backend surface:

Exit criteria: Year-2 students can book and manage a 1:1 without an email chain; attendance is a real number instead of an assumption; billing state changes (upgrade/cancel/lapse) reflect correctly in what content a student can access.

Note: if Phase 3 runs long, subscription/billing (Section 04) can move earlier or later relative to appointments — it has no dependency on the scheduling work and can be sequenced independently based on business urgency (e.g., if Stripe migration has a deadline, pull it into Phase 3).


3. Cross-cutting workstreams

These don't belong to one phase — get them right early because retrofitting is expensive.

Timezone / DST correctness

Strategy: store every timestamp in UTC, render in the viewer's IANA timezone (not a fixed offset like "EST" — REVIEW.md's B3 finding, bare EST/EDT strings that had to be swept out of an earlier mockup iteration, is exactly the bug class to avoid), derive the timezone from device settings at render time, never trust a stored offset for the future.

This needs a dedicated test matrix, not ad hoc QA, because the reported production bug (calendar shows 7 PM for an 8 PM class) is a class of error that silently reintroduces itself:

Recommend this become an explicit automated test suite (fixed set of UTC instants × viewer timezones × expected rendered string), not manual spot-checks, given it's already bitten production once.

Audio pipeline

Arabic text rendering — flag early, spike first

This is the hardest UI problem in the whole rebuild and should get a spike in Phase 1 before the recording/annotation screens are built on top of it, not discovered mid-Phase-2. The requirement (from the coach feedback: "mark up submission text... text-span anchored annotations") means annotations must anchor to specific words within Quranic Arabic text, which involves:

Recommend: build a throwaway prototype of "render a verse, place a marker on word 4, change font size, marker stays on word 4" before committing the annotation feature's data model. If this doesn't work cleanly in RN's text primitives, a native text-rendering module is the fallback — decide before Phase 2, not during it.

Push / email infrastructure

Analytics for the attendance/engagement gap

The team's own words: "100% of the time currently, we are going off of assumptions" about attendance. Since Phase 4 introduces real attendance and Zoom-duration data, instrument from day one so historical data exists when leadership eventually asks for trends:


4. Risks and mitigations

R1 — Rocky launch is the default expectation, not a worst case. A full rebuild replacing an unknown-quality backend will have launch bugs. Mitigate with: the Report Issue button (Phase 4, but consider pulling its backend — auto-attached context capture — earlier if feasible, since it's cheap and valuable from day one of any beta), feature flags on newer/riskier surfaces (messaging guardrails, auto-attendance, appointment booking) so a bad rollout can be toggled off without a full app release, and a staged rollout (pilot cohort → one year group → everyone) rather than a big-bang release to the full student body.

R2 — Team size and bus factor. The September deadline (Section 5) requires 2–3 developers in parallel — a single developer cannot hit the date, and with a small parallel team the bus-factor risk shifts from "one person knows everything" to "no slack to absorb losing anyone mid-build." Mitigate with: RN/TS (larger substitute-hire pool than a native+BaaS mixed stack would require), a managed BaaS specifically because it reduces the amount of bespoke infrastructure only one person understands, and written architecture notes / a handoff doc as a deliverable at the end of each phase, not just at project end — so a mid-project developer change doesn't require reverse-engineering everything from scratch.

R3 — Coach adoption depends on the review workspace actually being better than a spreadsheet, not on it existing. 8/11 coaches maintain a patchwork workaround today; if Phase 2's review queue is clunkier or slower than what they've built for themselves, they will route around it, and the single most-requested fix in this whole project will fail to land. Mitigate with: pilot Phase 2 with 2–3 coaches (ideally including the desktop-preferring coach and a high-volume mobile coach) before rolling to all 11, treat their first two weeks of real usage as a gate before wider release, and make sure the pilot includes actual review of live students, not a demo dataset — workflow friction only surfaces under real load.

R4 — Timezone bugs recur. Already burned production once (7 PM vs 8 PM bug) and is exactly the kind of defect that regresses silently when a new screen is added by someone who didn't know the rule. Mitigate with the explicit test matrix in Section 3, and a lint-level rule/code-review checklist item: no screen may render a hardcoded offset string ("EST"/"EDT") — always derive from device timezone at render time.

R5 — Arabic annotation anchoring is underspecified until the spike runs. If word-anchored annotation turns out to be harder than expected in RN, it could blow out Phase 2's timeline specifically (the feature most tied to coach adoption, per R3). Mitigate by running the spike in Phase 1 (Section 3), not discovering the problem mid-Phase-2 when the review queue UI is already built on a broken assumption.

R6 — BaaS lock-in / limits. Managed BaaS trades control for speed; if the org later needs the backlogged student-centric scheduling algorithm or heavier custom logic, BaaS query/function limitations could force a partial migration. Mitigate by choosing Supabase (Postgres underneath) over Firestore if this is a concern — Postgres data is far more portable to a custom API later than a Firestore export would be.


5. Delivery plan — live for the fall semester (September 2026)

The deadline is fixed; scope and team size are the variables. Two facts frame everything below:

  1. Engineer-weeks are not calendar weeks. The 26–38 engineer-week total still holds — but from a ~July 21 start to a first-week-of-September launch there are ~6½ calendar weeks. Three developers working in parallel give ~19 engineer-weeks of capacity in that window; two give ~13. The full scope does not fit. A subset launches in September; the rest lands during the semester — which the semester structure actually supports, because students don't need Year-2 booking or billing screens in week 1.
  2. One developer cannot hit this date. The original single-developer framing is dead for this deadline. Minimum viable team: 2 full-stack RN/BaaS developers; 3 is the realistic number (one on the student app, one on backend + coach app, one on the schedule/notification surface and the test matrices). Phases 1 and 2 are sequentially dependent, but backend models, the coach app UI, and the Phase-3 schedule slice parallelize well.

Launch scope — in students' hands for week 1 of the semester

# What ships From Effort (ew)
0 Spikes: Arabic word-anchored annotation + audio record/upload/scrub pre-Phase 1 2–3
1 Auth + entry/placement flow (new, Revised 2026-07-26 — gates first-run; Revised 2026-07-27 — recorded recitation reusing the submission pipeline, supportive screens, Level-0 states; font/script picker cut; availability step for placed students), four tabs, onboarding, lesson → recording → submission loop Phase 1 (full) 6–8
2 Coach essentials: queue, review workspace (text + audio side by side, annotations, voice reply), feedback-ready loop back to the student Phase 2 (core) 5–7
3 Schedule slice: session list in correct local time, Zoom join links, 15-min reminders Phase 3 (slice) 2–3
Launch total 15–21 ew — fits 3 devs × 6½ weeks if the spikes go well

Launch = the weekly loop works end to end: a student onboards, sees Week 1, watches, records, submits; the coach reviews in-app; the student hears feedback; nobody misses a session because of a wrong clock. That is the whole audit answered on day one — everything else is enhancement.

In-semester scope — shipped as updates while the semester runs

Calendar (assumes start Monday, July 21)

Dates Milestone
Jul 21 – Jul 25 Team signed, BaaS chosen (Supabase per Section 1), repos/CI/EAS set up, both spikes run — spike results gate the annotation data model
Jul 28 – Aug 15 Phase 1 complete; backend models + coach app build in parallel; TestFlight internal build from ~Aug 4
Aug 18 – Aug 22 Phase 2 core complete; schedule slice lands; DST/timezone test matrix runs
Aug 25 – Aug 29 Coach pilot (2–3 coaches, real recitations) and student dry-run; fix window
~Aug 28 App Store submission (review turnaround is calendar risk — submit before the fix window closes, use expedited review if needed)
Sep 1 – Sep 5 Staged rollout to the cohort; onboarding emails; semester starts with the app live

What the September date costs (say it out loud now, not in October)

Decisions needed from the org this week

  1. Confirm the actual semester start date — this calendar assumes first week of September; every milestone moves with it.
  2. Commit the team by July 24. 3 developers (2 minimum with the reduced scope noted above). Later than that, subtract the days from the pilot and fix window — the deadline doesn't move, the safety margin does.
  3. Is Year-2 1:1 booking needed at launch? This plan defers the Year-2 loop (per-week multi-coach booking, appointment notes) to November with an email-chain fallback for the first weeks. If it must exist on day one, something of equal size leaves the launch scope (candidate: the reminders slice). Revised 2026-07-26: the entry/placement flow is not deferrable — it gates first-run for every new student, so it is in the launch scope (Phase 1) regardless of the Year-2 decision.
  4. Content readiness: week-by-week lesson videos and curriculum text must be uploaded by mid-August — engineering can't absorb a content delay.
  5. Confirm the Year-2 product defaults (Revised 2026-07-26). The design encodes working defaults pending Lejla — see ../../explorations/flow-map/QUESTIONS-FOR-LEJLA.md. The one that changes engineering shape most is Q13: offer an optional recurring "same slot weekly" booking, or per-week only? The current build assumes per-week only; confirming Q13 (and the placement SLA Q2, magic-link auth Q4, soft cap Q5, one shared coach pool Q11, single-approver notes Q12) unblocks the Phase-4 Year-2 work. Revised 2026-07-27 (Lejla review): Q1, Q2, Q4, Q5, Q8 are now answered — the first assessment is a recorded recitation to a pooled coach queue (Q1); Level-0 waiting is student-paced with auto-placement (Q2); sign-in is email + password, no magic link (Q4); appointment counts are plan-based, bought at checkout, not a universal cap (Q5); lessons are per-elective (Q8). Q3 confirmed (new students → Year-1 only), Q9 refined (auto-enroll for level graduates; electives/repeats via checkout). Still open and engineering-shaping: Q13 (per-week vs optional recurring), Q11 (one shared coach pool), Q12 (single-approver notes), plus two new items — Q15 (exact name of the mandatory first Year-2 semester, tentatively "Advanced Tajweed Rules") and Q16 (the student-facing rename of the first assessment).

Notes on the effort arithmetic (unchanged from the original sizing):