Waqar Ul Wahab
ALL PROJECTS/AMALAPP

Overview

AmalApp (عمل ایپ) is an Islamic daily-activities platform built for a predominantly Urdu-speaking audience on low-end Android hardware (Samsung A07-class devices), with iOS support alongside. It delivers per-day religious content — Quran, Ruku, Sunnat, Namaz, Dua and 40-Hadees, each with imagery and per-voice audio — anchored by a guided ~7-minute daily activity. Around that core loop sit accountability groups with daily-completion tracking, a live Islamic radio player with real-time listener presence, short-form reels, and an in-app feedback/bug-report tool. Content operations, media management and analytics are handled by administrators through dedicated web tooling rather than baked into the app.

Walkthrough

2 short product films — swipe or use the arrows to move between them.

01 / 02Product Showreel

Problem

The product needed to feel like a single, coherent daily habit while actually being a distributed system: a mobile client, a versioned REST API, an object store for large volumes of audio and imagery, and separate operational surfaces for non-developer content managers. The hard problems were rarely in any one feature — they lived in the seams. Sessions had to survive aggressive JWT rotation without logging users out on a transient network blip; a live radio stream had to track concurrent listeners accurately even when apps are force-killed; per-day content had to be reconciled between a DigitalOcean Spaces bucket and the database and exported as pre-rendered JSON so the app opens fast on a weak connection. Doing this across seven independently deployed repositories, each with its own runtime and deploy target, is the real engineering story.

System Design

How It Works

01/04
01

Daily content delivery

How per-day Islamic content is authored, reconciled to storage and rendered fast on the mobile client.

  1. 1A content manager loads or edits per-type items with images and per-voice audio through the dashboard and bucket-manager
  2. 2items management commands and ItemBucketManager reconcile the Spaces bucket against the database
  3. 3json_generator writes pre-rendered per-day JSON exports back to Spaces for CDN delivery
  4. 4The Flutter app requests the day's content, receiving CDN-served JSON plus media URLs for fast rendering on a slow connection
  5. 5A shared CustomAudioPlayerController synchronises recitation audio with the correct image using a programmatic-vs-user page-change guard
02

Authenticated session lifecycle

How SimpleJWT tokens are issued, rotated and torn down across the Flutter client.

  1. 1A user registers with a single contact field that auto-detects email, Pakistani phone or username and routes an OTP via Resend or SMS
  2. 2On login, SimpleJWT issues access and refresh tokens that the client persists and attaches as a bearer on every request
  3. 3On a 401, ApiClient refreshes against the backend, persists the rotated refresh token and retries the original request
  4. 4Credential errors force logout while transient 5xx or network failures preserve the session
  5. 5Logout runs through SessionResetService, clearing tokens and per-user state in one place
03

Live radio presence tracking

How concurrent radio listeners are counted in real time without ever blocking playback.

  1. 1The user opens a station; the app streams with just_audio and starts a fail-soft presence heartbeat
  2. 2The presence app records the session in Redis sorted sets, incrementing live and daily-unique counters under an atomic compare-and-swap with a per-IP cap
  3. 3Heartbeats keep the session live; on stop or a force-kill detected by expiry, counters settle to durable Postgres aggregates
  4. 4If Redis is unavailable the app degrades to database-backed counts without blocking audio playback
04

Accountability groups and daily tracking

How users form groups and their daily completion is tracked and reminded.

  1. 1A user creates or joins a group; membership requests are approved or removed by the group admin
  2. 2Each user's daily completion is recorded globally in UserDayTrack, producing daily and weekly Monday–Sunday arrays
  3. 3GroupService collapses the weekly view into a single optimised query, avoiding N+1 fan-out across members
  4. 4Admins send reminder push notifications composed and dispatched from dashboard_api via FCM

Key Features

  • Per-day Islamic content across six types (Quran, Ruku, Sunnat, Namaz, Dua, 40-Hadees) with imagery and multi-voice audio, plus a guided ~7-minute daily activity
  • Live Islamic radio with admin-defined stations, recurring schedules and real-time listener presence tracked in Redis
  • Accountability groups with global per-user daily/weekly completion tracking and admin reminder push notifications
  • Short-form reels backed by external YouTube Shorts metadata with public and admin serializer tiers
  • Authenticated feedback and bug reports with image, PDF and voice-note attachments and fail-closed magic-byte MIME validation
  • Bilingual Urdu/English experience with FCM push and scheduled local reminders tuned for low-end Android devices
  • Next.js admin dashboard aggregating KPIs, system health, GA4 analytics and content operations behind admin-only JWT endpoints
  • Standalone, credential-isolated bucket manager giving non-developer content managers scoped access to DigitalOcean Spaces

Outcomes

  • Delivered an end-to-end platform across seven repositories — Flutter app, Django/DRF backend, two Next.js admin surfaces, a static landing page and a Prometheus/Grafana observability stack — under one branch-per-environment CI pipeline
  • Engineered a production-hardened JWT session model on the client with rotated-refresh persistence that distinguishes credential failures from transient ones, resolving a real SimpleJWT rotate-and-blacklist logout bug
  • Built a real-time presence system on Redis sorted sets with atomic compare-and-swap counting and Postgres aggregates that stays accurate even for force-killed apps and survives Redis outages
  • Achieved measurable query optimisation — items stats collapsed from 13 queries to 2 and weekly group tracking from 7 to 1 — via composite indexes and pervasive select_related/prefetch_related usage

More work

Mashoor preview
MULTI-VENDOR MARKETPLACE

Mashoor

A bilingual, RTL-ready multi-vendor marketplace for Pakistan's regional specialties

VIEW PROJECT