KH
Open navigation menu

Skills in practice

Engineering capabilities, shown through the systems behind them.

My strongest skills are not isolated tools. They are the decisions, integrations, and safeguards that turn complex product requirements into maintainable interfaces and controlled workflows.

Implemented in Nova

AI Agents & Automation Integrations

A controlled research-to-publishing workflow

I designed and implemented an AI-assisted workflow where Hermes Agent researches and discovers content, returns structured JSON, and hands control to a TypeScript application pipeline. The application validates, filters, deduplicates, ranks, and transforms candidates before creating draft-only entries in Directus for human editorial review.

Controlled workflow

  1. 01

    Research & discovery

    Hermes Agent gathers candidate content and supporting context.

  2. 02

    Structured contract

    The agent returns predictable JSON instead of publishing directly.

  3. 03

    Schema validation

    TypeScript and Zod reject malformed or incomplete output.

  4. 04

    Content controls

    Application logic filters, deduplicates, ranks, and selects candidates.

  5. 05

    Data transformation

    Validated candidates are mapped into the CMS content model.

  6. 06

    Draft creation

    Least-privilege credentials create idempotent Directus drafts only.

  7. 07

    Review & delivery

    Editors review before publishing; authenticated webhooks then revalidate Next.js content.

Operating principles

  • Human-in-the-loop, draft-first publishing
  • Application-controlled validation and transformation
  • Least-privilege API access
  • Idempotent writes that prevent duplicate entries
  • Authenticated publishing webhooks
  • No direct autonomous publishing by the agent

Technologies

Hermes AgentTypeScriptREST APIsJSONZodDirectusNext.jsWebhooksPostgreSQL

Project-backed capabilities

The recurring work behind the technology list.

Each capability is grounded in a concrete product contribution rather than a standalone keyword.

Frontend architecture & reusable systems

Feature boundaries, shared data layers, reusable administration patterns, and maintainable project structure across large product surfaces.

ReactTypeScriptNxTanStack Query

Project proof

  • Univerta

    Reusable CRUD tables and hooks, clearer library boundaries, and circular-dependency cleanup.

  • Mutoon Admin

    Initial dashboard setup and reusable React/MUI administration patterns.

  • Quran Orb Admin

    Shared REST/query hooks, form patterns, permission gates, and explicit cache invalidation.

API, CMS & controlled content integrations

Typed contracts and application-owned pipelines that connect interfaces, services, and content platforms without surrendering validation or permissions.

REST APIsGraphQLDirectusZod

Project proof

  • Nova

    A validated, deduplicated, draft-first pipeline between Hermes Agent and Directus.

  • Bab al-Sham

    Complete Directus schema, permissions, localized queries, filters, relations, and media.

  • Quran Orb Admin

    Multi-step REST workflows for uploads, content relationships, and publishing operations.

Async, real-time & media workflows

Legible UI state for long-running jobs, live sessions, browser media, notifications, cancellation, timeouts, and recovery.

Socket.IOWeb AudioFirebaseReact Query

Project proof

  • Mushaf Eqrra

    Browser audio processing, live recitation transport, verse synchronization, and recovery states.

  • Adam Radar

    Polling, cancellation, notifications, pagination, and filter-aware report exports.

  • Mutoon Admin

    Jitsi and Socket.IO workflows for live councils and attendance.

Multilingual product systems

Localized routing, content, validation, metadata, search, and direction-aware interaction across RTL and LTR experiences.

next-intli18nextRTL / LTRLocalized SEO

Project proof

  • Mushaf Eqrra

    A responsive Quran product supporting six languages and direction-aware reader behavior.

  • Bab al-Sham

    Arabic and English routes, slugs, metadata, canonicals, alternates, and CMS content.

  • Quran Orb Admin

    Arabic/English forms, validation, navigation, and operational content workflows.

Performance, quality & resilient state

Removing structural friction, validating boundaries, and making failure, waiting, recovery, and permissions visible in the product.

NxESLintTypeScriptReact Query

Project proof

  • Univerta

    Dependency cleanup restored hot reload and supported a controlled Lighthouse improvement from 78 to 92.

  • Adam Radar

    Explicit report states keep filters and exports unavailable until data is complete.

  • Mushaf Eqrra

    Timeout, privacy, error, and recovery states around live recitation sessions.

Visualization & data-rich interaction

Responsive maps, analytics, readers, charts, search, and operational interfaces that keep complex data understandable.

D3 GeoApexChartsRechartsVisx

Project proof

  • Adam Radar

    KPI, sentiment, time-series, keyword, and word-cloud analytics across responsive dashboards.

  • Bab al-Sham

    A responsive, keyboard-operable D3/GeoJSON explorer synchronized with URLs and CMS filters.

  • Mushaf Eqrra

    Cached Mushaf rendering with synchronized verses, reciters, playback, and page boundaries.

Certifications

Professional learning, backed by public credentials.

Structured programs that strengthened the frontend foundations applied across my product work.

Meta · Coursera

Featured credential

Meta Front-End Developer Professional Certificate

A nine-course professional program including Advanced React, Version Control, and UI/UX Design.

February 13, 2023

Completed over approximately 7 months · ~6 hours/week

View credential

freeCodeCamp

JavaScript Algorithms and Data Structures

Completed the freeCodeCamp certification curriculum in JavaScript algorithms and data structures.

June 2022

View credential

AI-assisted development

AI supports the loop; engineering judgment stays human.

I use AI assistants throughout development without treating their output as an authority. The useful part is a disciplined loop that keeps context, scope, and review explicit.

  1. 01

    Gather product context, constraints, and repository conventions.

  2. 02

    Inspect the existing system before proposing implementation changes.

  3. 03

    Break work into a scoped plan with clear acceptance criteria.

  4. 04

    Use AI for implementation support, debugging, and comparing approaches.

  5. 05

    Review diffs, assumptions, interfaces, and unintended side effects.

  6. 06

    Manually verify important behavior and document the final decisions.

AI-generated suggestions are reviewed before they are accepted, and important behavior is manually checked before delivery.

Working stack

Tools grouped by the work they enable.

Core frontend

  • React
  • Next.js
  • TypeScript
  • JavaScript
  • HTML
  • CSS

Architecture & state

  • TanStack Query
  • React Context
  • Custom hooks
  • Nx monorepos
  • Forms & validation
  • Reusable admin UI

UI & visualization

  • Material UI
  • Tailwind CSS
  • shadcn / Radix
  • D3 Geo
  • ApexCharts
  • Responsive UI

Data & integrations

  • REST / Axios / fetch
  • GraphQL / Hasura
  • Socket.IO
  • Browser audio
  • Directus
  • File uploads

Localization & delivery

  • next-intl
  • i18next
  • RTL / LTR
  • Localized SEO
  • Git / ESLint
  • Vite

Build with intent

Need an engineer for a complex product workflow?

I’m open to remote React, Next.js, and frontend product-engineering roles involving thoughtful architecture, demanding integrations, and polished execution.

Email me