Skip to content
Omar Kalia
Menu
Tell me what you need

Selected work

Inside the systems I have built.

CourtHub Pakistan

A sports-court platform: directory, construction funnel, equipment catalogue and an interactive court cost calculator.

  • SEO route structure per sport and city
  • Social channels turned into a working lead source
  • New search-led articles published every week
  • Every enquiry captured and followed up without manual chasing
  • Leads passed to court builders, commission back on closed work
Stack(8)
  • Next.js 16 (App Router)
  • React 19
  • TypeScript
  • Tailwind CSS v4
  • Dynamic OG images
  • JSON-LD structured data
  • AVIF / WebP pipeline
  • Vercel

Built as a working prototype. The catalogue uses placeholder listings and checkout is deliberately not wired to a payment provider.

www.courthub.pk(opens in a new tab)

CourtHub home page with full-bleed padel court photography and the headline Build your court, play your game
  • CourtHub court cost calculator showing sport selection, court count slider, city selector and a live project summary
  • CourtHub courts landing page
  • CourtHub court directory listing

FAB Group

A two-division corporate site — engineering services and communications — sharing one shell with separate identities.

  • Two division sites under a single group shell
  • Sanity CMS for editorial content
  • Contact routing wired to a CRM webhook
  • Projects and services sections per division
Stack(9)
  • Next.js 16 (App Router)
  • React 19
  • TypeScript
  • Tailwind CSS v4
  • Framer Motion
  • Sanity CMS (embedded Studio)
  • GROQ
  • ISR
  • Nodemailer SMTP

www.fabgroup.com.pk(opens in a new tab)

FAB Group landing page offering a choice between FAB Engineering Services and FAB Communications
  • FAB Engineering Services home page
  • FAB Communications home page
  • FAB Engineering projects listing

Signal Rift CRM

A multi-user CRM: lead pipeline, configurable routing, role-based permissions and custom fields.

  • Leads, contacts and companies pipeline
  • Region-based lead routing with alternating assignment and fallback
  • Role-based permissions with custom field definitions
  • Client-lock rule with automatic expiry and release
  • Dashboard and reporting, web push notifications
Stack(10)
  • Next.js 16 (App Router)
  • React 19
  • TypeScript
  • Tailwind CSS v4
  • shadcn / Base UI
  • Server Actions
  • Supabase Postgres
  • Supabase Auth + RLS
  • PWA + Web Push
  • Vercel

The pipeline screens are rebuilt previews with illustrative records — the live system holds real client data. The configuration screens are real captures; they hold no records at all.

Signal Rift CRM leads pipeline: filterable table of leads with status and priority badges, contact details, product line, task counts and assigned owner.
Signal Rift CRM team dashboard: lead totals, conversion rate, a performance table by salesperson, and stacked bar charts breaking leads down by salesperson and by region.
  • Signal Rift CRM settings: configurable lists, product taxonomy and lead routing, plus a client-lock rule that releases an assigned client automatically when it expires.
  • Signal Rift CRM roles and permissions: seven roles, each with a data scope of own, team or all records and a permission count, plus a form to add a new role.
  • Signal Rift CRM lead routing: inbound website leads assigned by the region the customer selected, with per-zone rules, a first-rep or alternating strategy and a fallback assignee.

KBS Service Center

A service-complaint tracker for an AV company's repair desk: one shared log per case, closing ticks held by role, and a private thread the technicians never see.

  • Case numbers issued by a single atomic statement, so two people submitting at once cannot collide
  • Comments and system events in one timeline, each entry carrying the gap since the last and turning red past the threshold
  • A case stays Open until the person who raised it and one holder of each required role has ticked it closed
  • A private thread for Master Admin, Admin and Operations Manager, held in a table the public log never reads
  • Roles, rights, closing rules and the case-number format all editable in the app, not in code
  • Installable on phones, with photos downscaled in the browser and attachments served only to signed-in people on the case
Stack(13)
  • Next.js 16 (App Router)
  • React 19
  • TypeScript
  • Tailwind CSS v4
  • Server Actions
  • Zod
  • PGlite (Postgres in WebAssembly)
  • Supabase Postgres
  • Supabase Storage
  • bcrypt sessions
  • pdf-lib
  • PWA service worker
  • Vercel

Every screen is a real capture of the running app on its demo dataset — the clients, serial numbers and comments in them are invented, because the live instance holds real customer complaints.

KBS Service Center case log: comments from the operations manager and technician in one timeline, each in the author's own colour, with the gap since the previous entry between them and a first reply after three days flagged in red. Beside it, the four closing ticks still outstanding and the people on the case.
KBS Service Center case list: six service cases filtered by status, each showing its case number, working status, closing-tick count, warranty state, client, organisation, the equipment and serial number, and who raised it.
  • KBS Service Center private thread on a case, open to Master Admin, Admin and Operations Manager only, with a banner stating that Technicians and Sales Reps see no tab, no badge and no trace of it.
  • KBS Service Center roles and rights: the Master Admin role expanded to its thirteen permissions, each with a plain-English explanation, above the other built-in roles and their permission counts.
  • KBS Service Center settings: service centre name and time zone, the case-number prefix and yearly restart, the roles added to every new complaint with a lock the creator cannot override, and the roles whose tick is required to close a case.

SayRead

An offline voice transcription app productised for wall-mounted touch panels: hardware-paired licensing, tap-gated settings and an installer that needs no internet.

  • Display lock pinning an install to one panel by reading the monitor's EDID over WMI
  • Argon2-hashed admin password to pair, re-pair and unpair a display
  • Detection failure treated as unknown, never as mismatch, so the app cannot brick itself
  • Offline WebView2 bundle and a disabled updater feed for air-gapped customer installs
  • Rebrand across the icon set and nine locale files, shipped as macOS and Windows installers
Stack(8)
  • Tauri
  • Rust
  • React
  • TypeScript
  • whisper.cpp
  • Argon2
  • WMI via PowerShell
  • WebView2 offline bundle

Built on Vibe, the MIT-licensed open-source transcription app by thewh1teagle. The engine, models and UI shell are upstream work. What is mine is the productisation: the kiosk hardware lock, the offline installer and the branded builds shipped to a customer.

SayRead transcribing an audio file: language selector, an audio player for the loaded recording, a Transcribe button, and the finished transcript below with a confirmation that it transcribed successfully in three seconds.
  • SayRead in record mode with microphone and speaker selectors, a recording name field, a toggle for saving the audio file, and a Record and transcribe button.
  • SayRead in file mode: a language selector above a drop area to select an audio or video file, or a whole folder for batch transcription.
  • SayRead's transcript export menu open, offering text, html, pdf, docx, srt, vtt, json, csv and md.

Freeze Dance

A camera party game for kids: music plays, the camera knows each child by face, and whoever is still wiggling when it stops is gently called out by name.

  • Face recognition that runs on an enlarged crop of each tracked body's head, so children far from the camera are still named
  • Names held on a body while the child faces away, and carried over when tracking briefly drops
  • Wiggle detection from the camera pixels inside each child's outline, ignoring overlap with neighbours and whole-picture exposure changes
  • Spoken call-outs by name, music synthesised live so it stops on the instant, and a name-in-lights champion screen
  • Fully offline: pose and face models ship with the app, and faces never leave the machine
  • Machine-locked licensing with Ed25519-signed keys, shipped as a Windows installer and a universal macOS app
Stack(8)
  • Electron
  • JavaScript
  • MediaPipe Pose Landmarker
  • face-api.js (TensorFlow.js)
  • Web Audio API
  • Web Speech API
  • Ed25519 (Node crypto)
  • electron-builder

The video is a promo animation that recreates the app's own interface — no real children appear in it. The screens are real captures from the app on an empty demo profile; the champion's name is a demo name.

30-second promo: the hook, the features, a freeze round and the champion screen.
Freeze Dance champion screen: the winner's name MAYA in giant glowing pink letters inside a dark-gold marquee ringed by alternating lit bulbs, under a Champion heading and above the line Freeze Dance Superstar and a Play again button.
  • Freeze Dance settings panel: camera guidance for the OBSBOT Tiny 2 Lite, built-in party music or your own songs, dance and freeze times, reaction time after the music stops, the wiggle detector from strict to gentle, and face-match strictness.
  • Freeze Dance activation screen: the computer's machine code with a copy button, a box to paste the license key, and an Activate button.

Pixami

A safety check-in app for people who live alone: they tap once a day to say they're okay, and if they miss their window, the people they trust are emailed to check on them.

  • One-tap check-in with a ring counting down to the deadline, turning amber near it and red once overdue
  • Reminder email at three-quarters of the window, alert to up to three contacts at the deadline, and an all-clear when the person checks in again
  • Each reminder and alert claimed by a single conditional write, so overlapping scheduler runs cannot send it twice
  • No passwords: a hashed session token in a cookie, and one-time emailed links to sign in on another phone
  • A daily reminder from the Quran or Sahih al-Bukhari and Muslim: 365 entries, each reference checked against its source
  • Installable on phones, and runs on free tiers: an external scheduler calls a secret-keyed endpoint instead of a server that never sleeps
Stack(8)
  • Next.js 16 (App Router)
  • React 19
  • TypeScript
  • Tailwind CSS v4
  • libSQL / Turso
  • Nodemailer SMTP
  • PWA manifest
  • Vercel

Built to test the idea before launch, so it has no users yet. The screens are real captures from the running app on a demo account; the names and emails in them are invented. The promo video is built from those same screens, with an animated opening scene and an AI voice-over.

41-second promo for TikTok and Reels: the hook, a 48-hour check-in story told with the app's own screens and emails, and the call to action.
Three Pixami phone screens side by side: the welcome screen with the star mascot and the line One tap a day, someone always knows you're okay; the home screen with a large violet I'm OK button inside a countdown ring, a six-day streak and one emergency contact; and the daily reminder card quoting Quran 25:74 with a Read button.
Three more Pixami phone screens: the sign-up step that asks who to tell, with one contact filled in; the home screen after a missed deadline, with a red I'm OK button and a banner saying the emergency contacts were emailed; and the settings screen with name, email and emergency contacts.

Osman and Khadijah Foundation

The website for a family-founded humanitarian foundation in Karachi: six initiatives labelled with their real status, and public records that stay empty until there is something verified to put in them.

  • Six initiatives, each one typed record: its page, index card, footer link and sitemap entry all follow from it
  • A status on every initiative, from Planned to Operational, with a timeline of what is done and what is still to come
  • Impact figures shown as Pending verification until checked against records, never as zero or an estimate
  • Registration, tax status, bank details and reports held as empty fields, each marked on the page until it is issued
  • Contact, volunteer, partnership and donation pledge forms, validated in the browser and again on the server, with a honeypot and a per-IP rate limit
  • Forms that stay closed until there is somewhere to store what people send, so no message is accepted and then lost
  • Pledges behind a payment provider interface, so a licensed gateway can be added without touching the form
  • Per-page canonicals, a generated sitemap, and NGO, breadcrumb and FAQ structured data
Stack(10)
  • Next.js 16 (App Router)
  • React 19
  • TypeScript
  • Tailwind CSS v4
  • cva + Radix Slot
  • Framer Motion
  • React Hook Form
  • Zod
  • JSON-LD structured data
  • Vercel

The photographs are illustrative stock images and do not show the foundation's beneficiaries or services. The foundation is still being established and its first initiative, an ambulance service for Karachi, is not yet operating, so the impact figures are deliberately empty. The forms and donation pledges are built but switched off until storage is connected, and no money is taken on the site.

osman-khadijah-foundation.vercel.app(opens in a new tab)

Osman and Khadijah Foundation home page: the headline Building a Better Tomorrow, One Life at a Time beside an illustrative photograph of an elderly man and a young boy, with a card for the first initiative, the Almost Free Ambulance Service, marked In development.
Foundation impact page headed Every number, verified: five metrics including people supported and ambulance journeys completed, each blank and marked Pending verification, above empty monthly charts reading No verified data yet.
  • Ambulance service page, Current status: an In development badge reading Not yet operational, and a four-step timeline with the first step done, vehicles, staffing and operating procedures in progress, and hospital partnerships and public launch still to come.
  • Foundation registration details: legal status, registration authority, registration number, date of registration, National Tax Number and tax-exemption status, each marked To be published once issued.
  • Foundation donate page headed Your gift, accounted for: a notice that online payments are not yet open, and a panel saying online submissions open soon with an email address in place of the form.