# Hasnain Ahmed Khan – Systems Architect & Full Stack Engineer (Full Catalog)

This is the full comprehensive text catalog of Hasnain Ahmed Khan's portfolio, including deep-dives of case studies and technical insights.

=========================================
ABOUT HASNAIN AHMED KHAN
=========================================

Role: Systems Architect & Full Stack Engineer
Bio: Translating messy business problems into clean digital workflows. Specializes in real-time systems, WebGL digital twins, custom AI interfaces, and automated operations.

=========================================
CASE STUDIES
=========================================

### Ebidzy: Real-Time Reverse Auction Platform
URL: https://hasnain.io/case-study/ebidzy
Subtitle: Developed a custom real-time reverse auction platform with NestJS, Next.js, Redis, and WebSockets, solving client-server countdown drift and concurrency-safe double-selling race conditions.
Category: Custom Web & Mobile App | Client: Startup Auction Portal | Timeline: 6 months | Role: Lead Systems Architect
Tags: NestJS, Next.js, React Native, Redis, PostgreSQL, WebSockets, Stripe

#### Challenge / Problem
Resolving severe network clock drift in client-side countdowns and preventing race conditions and double-selling when thousands of users simultaneously trigger Buy Now clicks.

#### Solution / Approach
Engineered an NTP-style latency handshake syncing all client clocks to absolute server time and formulated a 3-layer concurrency-safe ordering pipeline.

#### Implementation Approach
- **State Isolation**: Separated high-frequency bidding telemetry entirely into memory caches (Redis HASH) to shield primary database from excessive SQL write-locks.
- **NTP Clock Handshake**: Constructed a WebSocket-based handshake estimating ping latency and adjusting client device timers to synchronize with server clock.

#### Key Metrics & Results
- **Distributed Lock Time**: <5ms - Redis Redlock overhead during simultaneous Buy clicks
- **Concurrency Throughput**: 15K req/s - Zero deadlock transaction validation capacity

#### Technical Highlights
- **3-Layer Transaction Lock**: Utilizing Redis Redlock to serialize, followed by PostgreSQL row-level locks for transaction write-back.
  ```
  SELECT status, winner_id FROM auctions WHERE id = $1 FOR UPDATE;
  ```

#### Lessons Learned
- In-memory caches are critical for real-time states
- NTP handshakes are required for timing equity

-----------------------------------------

### Smart IoT Compliance & Monitoring Suite
URL: https://hasnain.io/case-study/smart-iot-compliance
Subtitle: Developed an interactive industrial digital twin dashboard using React, Three.js, and D3, solving CPU main-thread blocking by decoupling telemetry updates from React state rendering.
Category: IoT E-Governance App | Client: Enterprise Regulation Entity | Timeline: 8 months | Role: Systems & WebGL Engineer
Tags: React, Vite, Three.js, React Three Fiber, D3.js, Leaflet, Radix UI

#### Challenge / Problem
Handling major CPU thread blocking and rendering lag caused by high-frequency smart sensor inputs, and establishing cross-browser GPU compliance fallbacks.

#### Solution / Approach
Decoupled telemetry state bindings from React rendering cycles and developed an automated regulatory penalty compliance evaluator.

#### Implementation Approach
- **Decoupled Canvas Painting**: Mapped live IoT variables directly to Three.js meshes using mutable references inside a requestAnimationFrame rendering loop, bypassing React virtual DOM updates.
- **D3 Sankey Flow Mapping**: Mapped complex thermodynamic and chemical inputs flowing into processing units and attributing waste paths.

#### Key Metrics & Results
- **Rendering Frame Rate**: 60 fps - WebGL facility display under 1K concurrent sensor inputs
- **Manual Oversight Cut**: 70% - Automated penalty evaluation efficiency

#### Technical Highlights
- **Direct Ref Material Painting**: Updating materials directly in-engine to bypass state hooks.
  ```
  requestAnimationFrame(() => { meshRef.current.material.color.setHSL(tempVal, 1.0, 0.5); });
  ```

#### Lessons Learned
- Direct GPU canvas manipulation is mandatory for live telemetry
- Graceful 2D SVG fallbacks preserve accessibility

-----------------------------------------

### Bilingual Citizens AI Assistant
URL: https://hasnain.io/case-study/citizens-ai-assistant
Subtitle: Developed a state-level bilingual chatbot with Next.js, Google GenAI SDK, and custom Nastaliq CSS, solving stream parsing failures and dynamically generating stateful forms in the viewport.
Category: Conversational E-Governance AI | Client: Civic Welfare Department | Timeline: 5 months | Role: Lead AI Architect
Tags: Next.js, Prisma, PostgreSQL, Google GenAI SDK, Gemini 2.5, Urdu Nastaliq CSS

#### Challenge / Problem
Ensuring structural JSON schema output consistency during multi-turn chats under high API traffic, and creating dynamic user intakes without static layouts.

#### Solution / Approach
Formulated a server-side JSON-repair interceptor and designed a stateful chatbot pre-filling user files and injecting custom intake inputs directly into stream contexts.

#### Implementation Approach
- **Structured Parsing Safeties**: Implemented server-side parser middleware that monitors incomplete stream packets and repairs brackets, maintaining absolute JSON compliance.
- **Stateful Form Injection**: Programmatically mapped profile data and dynamically evaluated fields inside the conversation context, generating specialized forms inside chat viewports.

#### Key Metrics & Results
- **Form Ingestion Time**: Instant - Self-prefilling known profiles dynamically
- **JSON Parsing Success**: 100% - Ensured by self-healing stream interceptors

#### Technical Highlights
- **Stream JSON Repair Interceptor**: Self-healing parser resolving unescaped keys or trailing commas mid-stream.
  ```
  const cleanJSON = (str) => { return str.replace(/\,\s*\}/g, '\u0027}\u0027').replace(/\,\s*\]/g, '\u0027]\u0027'); };
  ```

#### Lessons Learned
- Stream validators must handle packet fragmentation
- Nastaliq typography requires specialized CSS container constraints

-----------------------------------------

### Lexer Systems Brand Portal
URL: https://hasnain.io/case-study/lexer-systems
Subtitle: Developed a premium conversion-focused portfolio using React, Vite, and Three.js, solving mobile battery drain by implementing instanced mesh particle systems and viewport-aware loops.
Category: Custom Next.js App | Client: Lexer Systems | Timeline: 3 months | Role: Systems Architect
Tags: React, Vite, Three.js, Radix UI, Shadcn UI, Framer Motion

#### Challenge / Problem
Minimizing battery drainage and page load speeds on mobile browsers while maintaining complex 3D hardware-accelerated hero canvases.

#### Solution / Approach
Engineered an instanced particle array drawing hundreds of dynamic nodes in a single draw call, and configured viewport-aware intersection monitoring.

#### Implementation Approach
- **Instanced Mesh Physics**: Engineered single instanced mesh rendering to process hundreds of particles in a single WebGL draw call, eliminating draw overhead.
- **Viewport-Aware Suspension**: Configured Intersection Observers that halt dynamic 3D calculations whenever the hero viewport is scrolled away.

#### Key Metrics & Results
- **First Contentful Paint**: 0.6s - Fast portfolio load times
- **Booking Conversion**: +40% - Increase in consultancy calendar bookings

#### Technical Highlights
- **Instanced Particle Matrix Update**: Transforming hundreds of particle coordinates in a single frame.
  ```
  particles.forEach((p, idx) => { tempObject.position.set(p.x, p.y, p.z); tempObject.updateMatrix(); meshRef.current.setMatrixAt(idx, tempObject.matrix); });
  ```

#### Lessons Learned
- Instanced meshes are essential for Three.js mobile performance
- Viewport monitoring preserves laptop battery runtimes

-----------------------------------------

### Adsorse Growth Platform
URL: https://hasnain.io/case-study/adsorse
Subtitle: Developed a high-performance growth marketing platform using Next.js, React 19, and Lenis, solving hydration rendering mismatches and routing form intakes via Zod-validated Server Actions.
Category: Custom Next.js App | Client: Adsorse Agency | Timeline: 12 months | Role: Full-Stack Lead Architect
Tags: Next.js 16, React 19, Tailwind CSS v4, Lenis Scroll, Framer Motion, Zod, Nodemailer

#### Challenge / Problem
Preventing Next.js server-side hydration mismatches and performance lag during dynamic physics engine initializations.

#### Solution / Approach
Utilized unified client-hydration hooks to delay physics bindings until browser compilation was complete, and routed intake submissions via secure Server Actions.

#### Implementation Approach
- **Hydration Integration**: Synchronized client-side inertial scroll bindings using React 19 hydration hooks, eliminating initial page shifts.
- **Server Actions Intake**: Processed complex multi-tier lead questionnaires directly using Next.js Server Actions with Nodemailer notifications.

#### Key Metrics & Results
- **Intake Submission Time**: <200ms - No REST API endpoint routing overhead
- **SEO Performance Score**: 98/100 - LCP asset optimizations

#### Technical Highlights
- **Zod Validated Server Action**: Validating multi-tier form inputs on the server and executing SMTP mail transport.
  ```
  \u0027use server\u0027; const parsed = contactSchema.parse(formData); await transporter.sendMail(parsed);
  ```

#### Lessons Learned
- Next.js Server Actions eliminate frontend-backend API boilerplate
- Hydration sync locks prevent initial animation jumps

-----------------------------------------

### Sovereign AI E-Governance Strategic Blueprint
URL: https://hasnain.io/case-study/sovereign-ai-blueprint
Subtitle: Developed a sovereign e-governance RAG infrastructure plan using LLaMA 3, QLoRA, and Milvus, solving strict data residency restrictions through secure air-gapped proxy server architectures.
Category: Sovereign AI & National Strategy | Client: Regional E-Governance Bureau | Timeline: 10 months | Role: Enterprise AI Strategist
Tags: Sovereign AI, On-Premise GPU Clusters, LLaMA 3, QLoRA, Milvus, Qdrant, RAG

#### Challenge / Problem
Balancing advanced e-governance RAG (Retrieval-Augmented Generation) lookup capabilities with strict national security regulations and citizen data residency laws.

#### Solution / Approach
Architected an air-gapped virtual private network structure and designed local sovereign LLM training pipelines with QLoRA and air-gapped vector databases.

#### Implementation Approach
- **Air-Gapped Privacy Gating**: Formulated isolation proxies that sanitise, parse, and scrub personally identifiable records before allowing indexing inside local vector databases.
- **Sovereign Fine-Tuning Roadmap**: Designed high-efficiency QLoRA training parameters for local LLaMA-3-70B models, optimizing them for regional dialects.

#### Key Metrics & Results
- **Air-Gapped Data Security**: 100% - Completely localized vector storage compliance
- **Agent Cooperation Depth**: 4 Agencies - Cross-agency legal, farm, and civic workflow design

#### Technical Highlights
- **Air-Gapped Proxy Routing Specification**: Configuring reverse proxy filters for sanitizing local vector lookups.
  ```
  # Air-gapped secure vector sync proxy filter
server_name secure-ai.local;
location /RAG {
  proxy_pass http://milvus_cluster;
  # PII sanitation filter module active
}
  ```

#### Lessons Learned
- National scale RAG requires air-gapped local database networks
- Dialect training is essential for regional citizen trust

-----------------------------------------

### MWA Charity
URL: https://hasnain.io/case-study/mwa-charity
Subtitle: Developed a custom WordPress theme using Elementor Pro, custom post types, and Advanced Custom Fields (ACF), solving donor drop-off through custom Gravity Forms with integrated Stripe payments and automated PDF invoice generation.
Category: Custom WordPress Theme | Client: MWA Charity | Timeline: 4 months | Role: Custom Theme & Plugin Engineer
Tags: WordPress, Custom Themes, Elementor Pro, Custom Post Types, ACF, Gravity Forms, Stripe, PDF Generation

#### Challenge / Problem
Replacing a fragmented third-party donation plugin system that caused high checkout failure rates and lacked support for custom tax-deductible PDF receipt generation.

#### Solution / Approach
Built a unified custom WordPress theme on Elementor Pro with tailored Custom Post Types and Advanced Custom Fields. Integrated Gravity Forms with Stripe payments to stream checkout, and developed custom PHP handlers to compile and email PDF invoices automatically on successful transactions.

#### Implementation Approach
- **Custom Post Types & Fields**: Designed custom post structures using Advanced Custom Fields (ACF) to allow admins to publish campaigns with distinct financial goals.
- **Gravity Forms Stripe Integration**: Constructed secure, responsive single-page donation checkout flows utilizing Gravity Forms mapped to Stripe payment intents.
- **Automated PDF Receipting**: Programmed server-side PHP hooks that capture transaction metadata and generate clean tax-compliant PDF invoices on checkout success.

#### Key Metrics & Results
- **Donation Flow Uptime**: 100% - Robust processing via Gravity Forms and Stripe
- **Admin Efficiency Gain**: 12+ hrs/wk - Eliminated manual invoice compiling and emailing

#### Technical Highlights
- **Gravity Forms Stripe Payment Callback Hook**: Capturing transaction metadata to generate and mail PDF invoices dynamically.
  ```
  add_action('gform_stripe_charge_captured', function($entry, $charge, $action) { $invoice_pdf = generate_donation_pdf($entry); send_donation_invoice($entry['email'], $invoice_pdf); }, 10, 3);
  ```

#### Lessons Learned
- Decoupling PDF generation to run asynchronously prevents checkout connection timeouts.
- Custom post hierarchies with ACF keep content management intuitive for non-technical administrators.

-----------------------------------------

### Snap Reno Chicago
URL: https://hasnain.io/case-study/snap-reno-chicago
Subtitle: Developed a high-performance contractor showcase theme on Elementor Pro with server-side WebP image optimization, solving slow mobile loading times and increasing SEO search rankings via custom JSON-LD schema injection.
Category: Custom WordPress Theme | Client: Snap Reno Contractor | Timeline: 3 months | Role: Full-Stack Developer
Tags: WordPress, Custom Themes, Elementor Pro, WebP Asset Optimization, Schema.org Markup, SEO

#### Challenge / Problem
Balancing dynamic high-resolution project images with extreme performance demands and localized SEO rankings.

#### Solution / Approach
Engineered an aggressive lazy-loading framework, next-gen WebP formatting pipelines, and micro-schema structured markup.

#### Implementation Approach
- **Asset Pipeline Restructuring**: Configured dynamic image compression, transcoding upload files to WebP formats on the server.
- **Structured Schema Injection**: Integrated detailed JSON-LD micro-data matching LocalBusiness specifications to maximize search visibility.

#### Key Metrics & Results
- **Mobile Speed Score**: 95/100 - Google Lighthouse audit success
- **Lead Generation Boost**: +55% - Frictionless localized request forms

#### Technical Highlights
- **JSON-LD LocalBusiness Schema Markup**: Injecting rich search snippets directly into header headers.
  ```
  <script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "HomeAndConstructionBusiness",
  "name": "Snap Reno Chicago"
}
</script>
  ```

#### Lessons Learned
- Serving WebP formats is mandatory for contractor image showcases
- Structured schemas are a direct catalyst for client acquisition

-----------------------------------------

### EDI Services Corp
URL: https://hasnain.io/case-study/edi-services-corp
Subtitle: Developed a luxury repair intake portal on a custom WordPress theme using Elementor Pro and AJAX endpoints, solving booking abandonment through a clean, multi-step interactive onboarding flow.
Category: Custom WordPress Theme | Client: EDI Services Corp | Timeline: 5 months | Role: Custom WordPress Engineer
Tags: WordPress, Custom Themes, Elementor Pro, Booking Engine, Custom PHP Intake, Luxury Brand

#### Challenge / Problem
Presenting complex service selections and booking structures for luxury watch, jewelry, and leather repairs without overwhelming users.

#### Solution / Approach
Designed a clean, multi-tiered interactive onboarding selector and constructed a custom PHP lead manager.

#### Implementation Approach
- **Multi-Step Interactive Selector**: Built responsive layout modules that dynamically direct users through repair scopes depending on luxury brand inputs.
- **Performance Optimization**: Stripped third-party script bloated plugins, writing lightweight direct CSS and JS scripts.

#### Key Metrics & Results
- **Intake Completion**: +65% - Decrease in initial questionnaire abandonment
- **Mobile Response Latency**: <1.2s - Page load speeds

#### Technical Highlights
- **Bespoke Intake Category Router**: Routing service requests to target luxury repair teams.
  ```
  add_action(\u0027wp_ajax_route_intake\u0027, function() { $brand = sanitize_text_field($_POST[\u0027brand\u0027]); wp_send_json(get_intake_rules($brand)); });
  ```

#### Lessons Learned
- Multi-tier selectors must minimize visual clutter to retain high-ticket clients
- Bespoke AJAX pipelines keep platform responsiveness sharp

-----------------------------------------

### Tapout Girls
URL: https://hasnain.io/case-study/tapout-girls
Subtitle: Developed a media-optimized community branding portal on a custom WordPress theme using raw CSS Grid and vanilla JS, solving page rendering blocks and reducing asset payloads on mobile viewports.
Category: Custom WordPress Theme | Client: Tapout Girls | Timeline: 3 months | Role: Front-End Engineer
Tags: WordPress, Custom Themes, CSS Grid, Zero-Dependency JS, Lazy Loading, Responsive Design

#### Challenge / Problem
Displaying heavy media portfolios and interactive social streams without triggering render blocks or page lag.

#### Solution / Approach
Developed responsive zero-dependency grid modules, image lazy-loaders, and modular lightboxes.

#### Implementation Approach
- **Zero-Dependency Image Grid**: Engineered clean, responsive grids using modern CSS Grid rules, bypassing heavy external grid plugins.
- **Modular CSS Media Gating**: Constructed lightboxes that load high-res assets only upon interaction, conserving user data.

#### Key Metrics & Results
- **Render Blocks**: 0 - Removed heavy external layout dependencies
- **Mobile Page Speed**: 97/100 - Lighthouse performance audit result

#### Technical Highlights
- **Zero-Dependency Lightbox Trigger**: Loading heavy media elements only after user click inputs.
  ```
  document.querySelectorAll(\u0027.grid-item\u0027).forEach(item => {
  item.addEventListener(\u0027click\u0027, () => loadLightbox(item.dataset.src));
});
  ```

#### Lessons Learned
- CSS Grid eliminates structural code overhead
- Lazy loading high-res assets is essential for media portals

-----------------------------------------

### JBS Live (Jaffer Business Systems)
URL: https://hasnain.io/case-study/jbs-live
Subtitle: Developed a high-performance corporate directory theme on custom WordPress utilizing recursive PHP taxonomy queries, solving MySQL query depth overhead and cPanel database throttling.
Category: Custom WordPress Theme | Client: Jaffer Business Systems | Timeline: 5 months | Role: Systems & Database Developer
Tags: WordPress, Custom Themes, Catalog Hierarchy, SQL Optimization, Database Indexing, PHP

#### Challenge / Problem
Displaying massive scientific product databases and commercial catalogs without overloading standard SQL database queries.

#### Solution / Approach
Constructed a lightweight relational data lookup structure, reducing SQL query depths by over 50%.

#### Implementation Approach
- **Database Query Refactoring**: Restructured theme catalog lookups, indexing custom tables to speed search results under high categories.
- **Dynamic Breadcrumb Generator**: Designed high-efficiency recursive PHP algorithms to print multi-level categories with zero rendering lag.

#### Key Metrics & Results
- **SQL Query Reduction**: -52% - Decreased database lookups per directory render
- **Search Response Time**: <300ms - Dynamic lookup speeds

#### Technical Highlights
- **Recursive Category Breadcrumb Compiler**: Constructing dynamic category lookups with minimal SQL overhead.
  ```
  function get_parent_crumbs($cat_id) { $parent = get_term($cat_id); return $parent->parent ? get_parent_crumbs($parent->parent) . \u0027 > \u0027 . $parent->name : $parent->name; }
  ```

#### Lessons Learned
- Database normalization is critical for large directory systems
- Recursive PHP caching prevents massive query loops

-----------------------------------------

### Digilexer Ads
URL: https://hasnain.io/case-study/digilexer-ads
Subtitle: Developed conversion-focused landing pages on a custom WordPress theme using atomic style hooks, solving AdWords traffic bounce rates by pruning non-essential scripts and styling payloads.
Category: Custom WordPress Theme | Client: Digilexer LLC | Timeline: 2 months | Role: Performance Optimization Specialist
Tags: WordPress, Custom Themes, Performance Optimization, Largest Contentful Paint, AdWords Optimization, CSS

#### Challenge / Problem
Maintaining sub-second Largest Contentful Paint (LCP) speeds under massive high-traffic Google Ads campaigns.

#### Solution / Approach
Stripped all general theme-level asset loaders and constructed atomic CSS/JS files specifically for conversion landing flows.

#### Implementation Approach
- **Asset Pruning Pipeline**: Disabled core style assets and scripts from loading on target landing files, loading only essential components.
- **Atomic Layout Engineering**: Engineered landing visual systems with clean, inlined styling variables, completely removing HTTP requests.

#### Key Metrics & Results
- **Largest Contentful Paint**: 0.7s - Google Ads performance success
- **Mobile Bounce Rate**: -30% - Achieved through immediate loading

#### Technical Highlights
- **Asset Pruning Action Hook**: Unregistering non-essential styles and scripts on marketing pages.
  ```
  add_action(\u0027wp_enqueue_scripts\u0027, function() { if (is_page(\u0027ads\u0027)) { wp_dequeue_style(\u0027global-styles\u0027); wp_dequeue_script(\u0027bloated-js\u0027); } }, 999);
  ```

#### Lessons Learned
- Pruning non-essential assets is critical for paid ad campaigns
- Immediate loading directly reduces traffic bounces

-----------------------------------------

### Modish Furnishing
URL: https://hasnain.io/case-study/modish-furnishing
Subtitle: Developed a high-performance Shopify storefront using custom Liquid templates and lazy loading 3D assets, solving mobile rendering latency and variant inventory display mismatches.
Category: Custom Shopify Theme | Client: Modish Furnishing Ltd | Timeline: 7 months | Role: Lead Shopify Architect
Tags: Shopify, Custom Shopify Themes, Shopify Liquid, Variants Optimizer, 3D Media, Conversion

#### Challenge / Problem
Managing high-resolution product imagery and 3D furniture models without introducing render lag on mobile devices.

#### Solution / Approach
Constructed specialized Shopify Liquid asset handling pipelines, next-gen media lazy loaders, and clean dynamic variants selectors.

#### Implementation Approach
- **Shopify Asset Pipeline Restructuring**: Utilized dynamic Shopify filters to serve optimized image sizes matching mobile layout grid breakpoints.
- **Decoupled 3D Object Loading**: Developed lazy-loading script bindings loading intensive 3D models only on explicit user click requests.

#### Key Metrics & Results
- **Product Page Speed**: 94/100 - Mobile Lighthouse performance audit result
- **Add-To-Cart Rate**: +32% - variant selector optimization success

#### Technical Highlights
- **Responsive Shopify Liquid Image Breakpoints**: Serving perfectly sized image scales dynamically.
  ```
  <img src="{{ product.featured_image | img_url: \u0027300x\u0027 }}" srcset="{{ product.featured_image | img_url: \u0027600x\u0027 }} 2x" alt="{{ product.title }}">
  ```

#### Lessons Learned
- Shopify Liquid image filters are essential for fast product listings
- Lazy-loading 3D models preserves initial performance ratings

-----------------------------------------

### Modern Wall Arts US
URL: https://hasnain.io/case-study/modern-wall-arts-us
Subtitle: Developed a custom Shopify storefront using Liquid and vanilla JS, solving checkout abandonment on massive product variant groupings through custom framing selection tools and AJAX drawers.
Category: Custom Shopify Theme | Client: Modern Wall Arts US | Timeline: 10 months | Role: Lead Shopify Engineer
Tags: Shopify, Custom Shopify Themes, Shopify Liquid, Custom Framing Systems, E-Commerce conversion, JS

#### Challenge / Problem
Managing massive product variant combinations (sizes, framing, custom designs) while maintaining immediate frontend response.

#### Solution / Approach
Engineered dynamic variant controllers using native Shopify Liquid and fast vanilla JavaScript logic.

#### Implementation Approach
- **Dynamic Variant Controller**: Built bespoke JS modules resolving pricing and sizing options instantly without server callbacks.
- **Cart Performance Restructuring**: Created high-performance inline cart drawers utilizing Shopify AJAX API to prevent page redirection.

#### Key Metrics & Results
- **E-Commerce Revenue**: 6-Figures - Sustained high-volume sales platform performance
- **Cart Checkout Conversion**: +45% - Inline AJAX cart drawer boost

#### Technical Highlights
- **AJAX Shopify Cart Drawer Integration**: Adding products to cart drawer dynamically using AJAX.
  ```
  fetch(\u0027/cart/add.js\u0027, { method: \u0027POST\u0027, body: formData })
  .then(res => res.json())
  .then(cart => updateCartDrawer(cart));
  ```

#### Lessons Learned
- AJAX cart drawers dramatically improve conversion rates
- Vanilla JS variant controllers reduce library dependencies

-----------------------------------------

### Modern Wall Arts UK
URL: https://hasnain.io/case-study/modern-wall-arts-uk
Subtitle: Developed a localized regional Shopify storefront using custom Liquid scripts, solving international compliance hurdles through edge-based tax calculations (VAT) and Klarna/Clearpay payment routing.
Category: Custom Shopify Theme | Client: Modern Wall Arts UK | Timeline: 8 months | Role: Lead Shopify Engineer
Tags: Shopify, Custom Shopify Themes, Shopify Liquid, Multi-Currency, UK Tax Laws, Localization

#### Challenge / Problem
Handling localized catalog options and UK tax-compliant checkout routing for an international home decor platform.

#### Solution / Approach
Implemented localized Shopify Liquid translation tables, tax-inclusive calculators, and localized shipping engines.

#### Implementation Approach
- **Localization Infrastructure**: Constructed robust schema parameters mapping localized shipping limits and tax regulations.
- **UK Checkout Integrations**: Aligned payment pipelines with local UK methods (Klarna, Clearpay, dynamic cards).

#### Key Metrics & Results
- **Regional Checkout Conversion**: +28% - Localized payment option success
- **Tax Accuracy**: 100% - VAT calculation accuracy

#### Technical Highlights
- **UK VAT Tax Inclusive Liquid Pricing**: Rendering localized tax inclusive pricing dynamically.
  ```
  {{ product.price | times: 1.20 | money }} <span class="tax-note">(VAT Inc.)</span>
  ```

#### Lessons Learned
- Multi-currency displays require solid backend routing validations
- Inline tax notes build donor and buyer trust

-----------------------------------------

### Velascent Perfumes
URL: https://hasnain.io/case-study/velascent
Subtitle: Developed a luxury perfume Shopify storefront using modular Liquid components and image compression pipelines, solving initial page load lag while maintaining a premium high-resolution aesthetic.
Category: Custom Shopify Theme | Client: Velascent Perfumes | Timeline: 4 months | Role: Shopify Frontend Developer
Tags: Shopify, Custom Shopify Themes, Shopify Liquid, Luxury Branding, AJAX Cart, Asset Optimization

#### Challenge / Problem
Delivering a luxury brand experience with dynamic visual styling without slowing checkout speeds.

#### Solution / Approach
Designed minimal Liquid template modules, custom-styled drawers, and optimized high-resolution image formats.

#### Implementation Approach
- **Minimalist CSS Architecture**: Crafted lightweight style architectures utilizing modern CSS variables for rapid client theme configurations.
- **Product Media Pipeline**: Configured dynamic image compressions that preserve premium aesthetic qualities while reducing loading lag.

#### Key Metrics & Results
- **Lighthouse Score**: 96/100 - SEO and Performance audit success
- **Bounce Rate Reduction**: -25% - Achieved through sub-second dynamic loading

#### Technical Highlights
- **Shopify Liquid Luxury Media Scaling**: Rendering responsive high-res product media scales.
  ```
  <img src="{{ image | img_url: \u0027800x\u0027 }}" loading="lazy" alt="{{ image.alt }}">
  ```

#### Lessons Learned
- Deploy virtual fragrance profile selector tools
- Configure automated luxury packaging selection flows

-----------------------------------------

### Vida Cleaners: Premium Booking & Automation Platform
URL: https://hasnain.io/case-study/vida-cleaners
Subtitle: Developed a custom WordPress theme using Elementor Pro, Gravity Forms, and Make.com/n8n, converting Figma designs into a fully automated booking-to-dispatch client journey.
Category: Custom WordPress Theme | Client: Vida Cleaners | Timeline: 3 months | Role: Custom Theme & Automation Engineer
Tags: WordPress, Custom Themes, Elementor Pro, Gravity Forms, Make.com, n8n, Figma, Business Automation

#### Challenge / Problem
Translating complex Figma designs into responsive custom Elementor Pro themes, and constructing custom multi-step booking paths integrated with client CRM systems.

#### Solution / Approach
Developed a custom WordPress theme using Elementor Pro, coupled with advanced Gravity Forms integrations. Formulated scalable backend routing and workflow automation pipelines utilizing Make.com and n8n to sync client bookings, assign cleaners, and process transactions.

#### Implementation Approach
- **Figma to Elementor Conversion**: Converted complex UI/UX vectors into responsive custom themes, optimizing styles and minimizing asset bloating.
- **Multi-Step Booking Flows**: Constructed dynamic client intake forms using Gravity Forms with conditional logic for service customization.
- **Workflow Orchestration**: Engineered n8n and Make.com integrations syncing calendar bookings, dispatch notifications, and CRM updates.

#### Key Metrics & Results
- **Booking Automation**: 100% - Hands-off customer intake and cleaner assignment pipeline
- **Admin Time Saved**: 25+ hrs/wk - Eliminated manual scheduling coordination

#### Technical Highlights
- **n8n Webhook Intake Handler**: Parsing multi-step Gravity Forms submissions and dispatching job payloads to n8n.
  ```
  add_action('gform_after_submission', function($entry, $form) { wp_remote_post('https://n8n.example.com/webhook/booking', ['body' => $entry]); }, 10, 2);
  ```

#### Lessons Learned
- Complex multi-step forms require server-side caching to prevent session losses.
- Decoupling scheduling logic into n8n/Make preserves cPanel server performance.

-----------------------------------------

### Human Concern International UK
URL: https://hasnain.io/case-study/human-concern-uk
Subtitle: Developed a custom WordPress charity theme using Elementor Pro and Advanced Custom Fields, solving HMRC compliance bottlenecks by implementing localized UK tax-recovery (Gift Aid) fields.
Category: Custom WordPress Theme | Client: HCI UK | Timeline: 6 months | Role: Lead Theme Developer
Tags: WordPress, Custom Themes, Elementor Pro, ACF, HMRC Gift Aid, PHP

#### Challenge / Problem
Adapting international charity databases to conform strictly with UK HMRC Gift Aid tax-recovery frameworks and payment systems.

#### Solution / Approach
Integrated specialized Custom Field (ACF) structures mapped to localized UK tax-exemption metadata triggers.

#### Implementation Approach
- **Gift Aid ACF Gating**: Developed dedicated custom field rules tracking eligibility status and injecting tax recovery options at checkout.
- **Localized Asset Optimization**: Tailored performance scripts specifically for regional UK networks, dropping payload weight.

#### Key Metrics & Results
- **Gift Aid Intake Rate**: +98% - Accurate UK tax recovery data collection
- **Asset Overhead Cut**: 35% - CSS and JS payload optimization

#### Technical Highlights
- **UK Gift Aid Custom Field Verification**: Routing Gift Aid eligibility to localized UK database schemes.
  ```
  if (get_field(\u0027gift_aid_eligible\u0027)) { update_post_meta($post_id, \u0027hmrc_status\u0027, \u0027pending\u0027); }
  ```

#### Lessons Learned
- HMRC metadata structures must be isolated from global fields
- Clean visual inheritances save developer hours

-----------------------------------------

### Human Concern International Canada
URL: https://hasnain.io/case-study/human-concern-canada
Subtitle: Developed an enterprise charity theme on custom WordPress using Elementor Pro and Custom Post Types, solving multi-country donor synchronization by mapping custom fields directly into the CRM API.
Category: Custom WordPress Theme | Client: HCI Canada | Timeline: 8 months | Role: Lead Theme Developer
Tags: WordPress, Custom Themes, Elementor Pro, Custom Post Types, CRM Integration, PHP

#### Challenge / Problem
Mapping complex multi-national donor configurations and custom inputs into legacy client CRMs without compromising platform load speeds.

#### Solution / Approach
Engineered an optimized Custom Post Type mapping hierarchy and designed a seamless third-party donation iframe system.

#### Implementation Approach
- **Custom Post Type Architectures**: Designed isolated post taxonomies matching dynamic campaigns, optimizing database performance.
- **CRM Mapping Pipeline**: Structured high-efficiency PHP variables passing donor credentials securely to administrative operations.

#### Key Metrics & Results
- **CRM Sync Accuracy**: 100% - Flawless contact mapping
- **Theme Loading Speed**: <1.5s - Stripped assets optimization

#### Technical Highlights
- **Dynamic CPT Query Model**: Optimizing database execution times for dynamic campaign loads.
  ```
  $query = new WP_Query(array(\u0027post_type\u0027 => \u0027campaigns\u0027, \u0027posts_per_page\u0027 => 10));
  ```

#### Lessons Learned
- Custom PHP post mapping increases cPanel performance
- Strict separation of styles avoids asset bloating

-----------------------------------------

### Global Family Aid NGO Portal
URL: https://hasnain.io/case-study/global-family-aid
Subtitle: Developed a multicurrency NGO portal using Next.js 15, React 19, and Stripe Elements, solving payment double-charging over unstable networks through edge-geolocated idempotent transactions.
Category: Custom Next.js App | Client: Global Family Aid NGO | Timeline: 8 months | Role: Lead Fintech Architect
Tags: Next.js 15, React 19, Tailwind CSS v4, Stripe Elements, Leaflet, Nodemailer

#### Challenge / Problem
Securing donation processes against double-charging during unstable network connectivity and automatically serving localized regional currencies to international donors.

#### Solution / Approach
Formulated an edge-level idempotent transaction protocol generating unique client tokens and mapped geolocated Stripe Elements dynamic checkout sessions.

#### Implementation Approach
- **Idempotent Safe Charge Lock**: Constructed client-side cryptographic keys passed to backend checkouts, verifying transactional states prior to executing Stripe checkouts.
- **Edge Geolocated Routing**: Parsed geo-headers on edge handlers to dynamically choose and mount Stripe Elements in local currency.

#### Key Metrics & Results
- **Idempotency Success Rate**: 100.00% - Zero double charge transactions recorded
- **Donor Conversion Increase**: +25% - Native localized currency donation boost

#### Technical Highlights
- **Idempotent stripe Checkout Spawner**: Ensuring a unique charge token is verified before payment submission.
  ```
  const payment = await stripe.paymentIntents.create({ amount, currency }, { idempotencyKey: token });
  ```

#### Lessons Learned
- Idempotency tokens protect international payments in unstable networks
- Edge-level geo-selection minimizes frontend routing overhead

-----------------------------------------

=========================================
INSIGHTS
=========================================

### Building Webhook Logic for NGO Payment Systems
URL: https://hasnain.io/insights/webhook-logic
Type: video | Read Time: 18:42
Description: A raw, casual walkthrough of how I handle Stripe webhooks and map donations to fund codes in real-time.

#### Content
# Handling Stripe Webhooks
When you are building a donation platform, transaction processing is only half the battle. The real work starts when the webhook arrives.
In this video, I walk through how to build a highly robust Stripe Webhook Processor in Next.js.

Key Takeaways:
- **Idempotency checks**: Checking signature validation to avoid duplicate transactions.
- **Transactional isolation**: Writing to ledger tables before acknowledging receipt.
- **Failover strategies**: Handling timeout states gracefully.

-----------------------------------------

### Systems Thinking: From Messy Requirements to Clean APIs
URL: https://hasnain.io/insights/systems-thinking
Type: article | Read Time: 8 min
Description: My framework for translating vague business needs into structured technical specifications.

#### Content
# Systems Thinking
Most clients don't know what they want. They know their operational symptoms—bloated payroll processing, duplicate payments, manual record keeping—but they cannot design the cure.

As a Systems Architect, my job is to translate messy business operations into clean, scalable database models and programmatic workflows.

Here is my 3-step design blueprint:
1. **Identify the absolute source of truth**: Determine where states are kept and isolate them.
2. **Build for concurrency first**: Expect race conditions, unstable connections, and simultaneous clicks.
3. **Map operations to atomic API verbs**: Keep API endpoints predictable, structured, and decoupled.

-----------------------------------------