Islamabad, Pakistan·Frontend & Full-Stack

3 years shipping web applications & full-stack systems

Engineering high-performance web apps, desktop tools, and 3D systems.

Frontend and full-stack engineer with 3 years of production experience building modular React & Next.js applications, cross-platform Electron tools, Three.js graphics, and Supabase PostgreSQL architectures.

// Core Production Stack

Technologies & Tooling

Hover to pause · Applied daily in production

React 19

UI & Runtimes

Next.js

Framework

TypeScript

Language

Electron

Desktop

Swift

macOS Native

Three.js & WebGL

3D & Graphics

Python

Backend & Data

Supabase

Database & Auth

Tailwind CSS

Design System

Google Gemini

AI & Multimodal

Docker

Containers

Playwright

E2E Testing

React 19

UI & Runtimes

Next.js

Framework

TypeScript

Language

Electron

Desktop

Swift

macOS Native

Three.js & WebGL

3D & Graphics

Python

Backend & Data

Supabase

Database & Auth

Tailwind CSS

Design System

Google Gemini

AI & Multimodal

Docker

Containers

Playwright

E2E Testing

// Engineering Evolution · 2024 to Present

Career & Project Trajectory

Chronological milestone log of shipped systems, architecture transitions, and technical scope.

9 Key Milestones
01 · Foundation & FundamentalsFeb 2024 — Oct 2024

Frontend Fundamentals & Design Systems

Software Engineering Intern @ Embrace IT

Mastered semantic web standards, responsive CSS architecture, UI design tokens, and Git team workflows in Agile sprints.

HTML5/CSS3JavaScript ES6+UI TokensREST APIs
02 · Production OnboardingOct 2024 — Mar 2025

Next.js & GraphQL Production Integration

Frontend Engineer @ Embrace IT / First Production Project

Onboarded to first enterprise client build, integrating typed GraphQL queries and mutations with Next.js for deterministic UI states.

Next.jsGraphQLTypeScriptApollo Client
03 · SaaS Product & State MachinesMar 2025 — Oct 2025

Dynamic Mockups & Configurator Platform

Full-Stack Engineer @ Commercial SaaS Client

Engineered dense multi-step form workflows with Ant Design and TanStack Query server caching across a 7-month commercial SaaS engagement.

ReactTanStack QueryAnt DesignState Machines
04 · High-Performance Web & Bespoke UISummer — Autumn 2025

Dog Trainers ISR Platform & Dubai Luxury Rental

Frontend & UI Engineer @ Specialized Client Builds

Delivered sub-50ms ISR page loads for a Next.js dog training editorial platform, and converted custom Figma designs into clean vanilla JS/CSS for a Dubai luxury rental engine.

Next.js ISRHeadless CMSVanilla JSTailwind CSS
05 · Modular Architecture & SecurityNov 2025 — Jun 2026

Bulletproof React Construction Management

Full-Stack Engineer @ Enterprise Construction Client

Architected a modular 7-month construction hub with Supabase PostgreSQL RLS, multi-crew scheduling calendars, and non-custodial Gmail/Outlook OAuth metadata sync.

Bulletproof ReactSupabase RLSOAuth SyncPlaywright
06 · 3D WebGL & Geospatial AutomationJun 2026 — Present

3D Celestial Watch & Procedural City Dial Engine

Graphics & Geospatial Engineer @ Luxury Horology & Procedural Engine

Engineered an interactive Three.js watch configurator with curved surface diamond placement and a Python geospatial engine turning real city maps into 3D-printable dials.

Three.jsWebGLPython OSMnxBlender GLB
07 · Full-Stack Migration & QualityAug 2026

Enterprise HR Modernization (JS/Firebase → TS/Supabase)

Systems Modernization Lead @ Enterprise Client

Migrated legacy JavaScript/Firebase backend to strictly typed TypeScript and Supabase PostgreSQL with comprehensive RLS policies and automated Playwright E2E suites.

TypeScriptSupabase RLSFirebase MigrationPlaywright
08 · Agentic AI & Native DesktopLate Aug 2026

AI Meeting Notetaker & MCP Ecosystem

Native & AI Systems Engineer @ Production Product

Engineered native macOS Swift audio capture (AudioCapture.swift) without meeting bots, automated Gemini Flash fallback chains, and an authenticated MCP tool server.

ElectronSwift BridgeMCP ServerGemini Flash
09 · Product Innovation & High LeverageSep 2026 — Present

Career Copilot & Swiss Modernist Engineering

Product & AI Engineer @ Autonomous Products & Portfolio

Built Career Copilot (AI ATS resume tailoring & Upwork proposals with Gemini Flash and Supabase) alongside this portfolio to showcase real production systems.

React 19Gemini APISupabaseNext.js 16

Trajectory complete · Explore flagship architecture below

Explore Selected Work

01 / Flagship Systems

Selected Work

Four systems engineered around challenging technical constraints: native audio, real-time 3D, graphics diagnostics, and privacy-first operations.

[01]Native AI / Audio

AI Meeting Notetaker & MCP Ecosystem

Engineered a privacy-first desktop meeting assistant that records crystal-clear dual-channel audio without awkward bots joining your calls, generates instant structured AI summaries with Gemini Flash, and exposes an authenticated MCP server so developers can query past meeting decisions directly inside Cursor and Claude Desktop.

ElectronSwift BridgeGemini FlashMCP ServerChrome MV3
Live App
AI Meeting Notetaker Studio Interface
Native Swift Audio · No Bots
[02]Commerce / 3D WebGL

3D Celestial Watch & Procedural City Dial Engine

Engineered an interactive Three.js 3D watch configurator where customers customize dial designs—including precisely placing diamond markers across curved sapphire surfaces—paired with a Python geospatial pipeline (OSMnx, Shapely, Trimesh) that procedurally converts real-world city maps into 3D-printable physical dials.

Three.jsWebGLPython GeospatialBlender GLBShopify API
Live App Shopify Store
3D Celestial Watch Customizer Web Application
Three.js 3D + Python Geospatial
[03]Graphics / Upstream

Upstream Graphics Diagnostic (Photopea Issue #8924)

Diagnosed a subtle visual glitch where automated phone case previews produced jagged, pixelated staircase artifacts along curved edges. Traced and benchmarked the canvas rasterizer across Chrome, GIMP, and Photoshop to prove an upstream clipping flaw in Photopea, filing GitHub Issue #8924 which the creator patched same-day.

WebGLCanvas APIGLSL ShadersOpen Source FixPhotopea
Live App GitHub Issue #8924
Issue #8924
Photopea upstream issue #8924 curved mask rasterization defect benchmark and reproduction
Upstream Bug Merged Same-DayResolved on GitHub
[04]Enterprise / Sync

Enterprise Construction Operations & Sync Platform

Architected a central scheduling and communications hub for construction project managers and jobsite crews, featuring a non-custodial Gmail/Outlook OAuth sync that coordinates and searches project email threads on-demand without ever saving private message bodies to the application database.

Bulletproof ReactSupabase RLSGCP / Azure OAuthReact NativePlaywright
SecuritySync.app
Zero Body Storage
CalendarMulti-Tier PM & Crews
OAuth SyncLive Header Indexer
Supabase DBPostgreSQL with RLS
Non-Custodial OAuth (Gmail & Outlook)Zero body storage
Bulletproof React ArchitectureReact Native Field Sync

// Additional Production Builds

Career Copilot
AI Career Assistant

Career Copilot

AI job hunt accelerator featuring ATS keyword resume tailoring, personalized Upwork proposal generation, and custom prompt personas built with Google Gemini Flash and Supabase.

React 19, Tailwind CSS, Supabase, Google Gemini API, jsPDFVisit
Full-Stack DB & Auth Migration

Company HR System Modernization

Migrated legacy JavaScript/Firebase backend to strictly typed TypeScript and Supabase PostgreSQL with comprehensive Row-Level Security policies and automated Playwright E2E test suites.

TypeScript, React 19, Supabase RLS, Playwright, Tailwind CSS
Financial Internal Tool

Hardware Vendor Settlement System

Custom financial bookkeeping and billing ledger built for a family business to automate daily inventory reconciliation and track complex vendor settlement accounts.

React, Node.js, PostgreSQL, Modular Architecture

02 / Background & Philosophy

Engineering with discipline: from physical recovery to resilient systems.

In late 2020 during university, Guillain-Barré Syndrome caused temporary neck-down paralysis. Full physical recovery required an uncompromising routine of atomic milestones: twitching a fingertip, standing for three seconds, taking five steps.

That radical patience and incremental discipline became the foundation for self-teaching software engineering and building robust production systems that remain composed under technical constraints.

01

Incremental Mastery

Break intimidating scope into the next atomic, measurable unit.

02

Root-Cause Depth

Trace failure to the lowest responsible layer before writing code.

03

Calm Under High Stakes

Replace panic with telemetry, observability, and sequence.

03 / Core Proficiency

Capabilities

Deep enough for low-level systems and graphics. Precise enough for pixel-perfect user interfaces.

[01]Frontend & UI Architecture

Production web applications, component design systems, and client state machines.

React 19 & Next.js (App Router, SSR, ISR)

Built modular web applications with server rendering, sub-50ms ISR editorial page loads, and zero-regression UI.

TypeScript & Modern ES6+

Enforced strict typing across GraphQL queries, REST APIs, custom hooks, and full-stack database interfaces.

Tailwind CSS & Design Tokens

Authored structured CSS architectures, responsive component systems, and micro-animations across dark/light themes.

TanStack Query & Zustand

Managed dense form state machines, multi-step workflows, and resilient server-state caching for commercial SaaS tools.

[02]3D & Creative Engineering

In-browser WebGL graphics, mathematical projection, and procedural generation.

Three.js & WebGL

Engineered interactive 3D luxury watch configurators with real-time lighting and procedural material shaders.

2D→3D Projection & Blender GLB

Calculated mathematical projection to anchor diamond markers onto celestial star maps on curved sapphire surfaces.

Canvas API & Engine Diagnostics

Diagnosed and benchmarked upstream WebGL rasterizer flaws on curved masks (Photopea Issue #8924).

Python Geospatial (OSMnx, Shapely, Trimesh)

Parsed OpenStreetMap building vectors (EPSG:3857), extruded 3D skyscraper geometry, and exported printable STL files.

[03]AI Systems & Native Tooling

Native desktop bridges, browser extensions, and LLM orchestration.

Electron & Native Swift Audio Bridge

Bypassed Chromium loopback limits with AudioCapture.swift to record discrete system & mic audio without bots.

Model Context Protocol (MCP)

Built authenticated 4-tool MCP servers exposing meeting transcripts and actions to Cursor and Claude Desktop.

Google Gemini Flash & Fallback Chains

Engineered automated model fallback chains (2.0-flash → 1.5-flash → 1.5-pro) on 429 quota limits for diarization.

Chrome Extensions (Manifest V3)

Captured offscreen tab audio with Web Audio API (ChannelMergerNode) and automated meeting tab detection.

[04]Backend, Cloud & Testing

Database architecture, secure synchronization, and automated verification.

Supabase (PostgreSQL & RLS)

Designed relational database schemas with strict Row-Level Security policies and authenticated user isolation.

Firebase to Supabase Migration

Spearheaded full-stack modernization from legacy JavaScript/Firebase to strictly typed TypeScript and PostgreSQL.

Playwright E2E Automation

Wrote automated regression suites for critical user flows (attendance, scheduling, auth) before production cutover.

Non-Custodial OAuth Sync (Gmail & Outlook)

Built secure calendar and message header indexers with GCP & Azure OAuth without storing private email bodies.

04 / Direct Communication

Bring the difficult brief. Let’s make it real.