Syed Muhammad Jamal Waheed
Building premium, high-performance apps that scale.
New to Contra
Syed Muhammad Jamal is ready for their next project!
AI Personalization Engine & Merchant Dashboard for Product Genius AI
Role: Senior Frontend Engineer (Contract)
Tech Stack: React.js, Next.js, TypeScript, Tailwind CSS, Shopify Polaris, shadcn/ui, Static Site Generation (SSG)
Project Links: Shopify App Store (https://apps.shopify.com/product-genius-ai) | Marketing Site (https://productgenius.ai/)
The Technical Challenge
Product Genius AI is an e-commerce personalization engine that tracks real-time shopper behavior to dynamically serve tailored content and product suggestions. The core engineering challenge centered on the Merchant Dashboard, the central control system where store owners manage AI behavioral configurations, visual widgets, and billing. Inheriting a fragmented codebase that had passed through multiple teams, my mission was to execute a major architectural overhaul: refactoring legacy tech debt, scaling an intricate in-app editor, and building a high-performance public marketing infrastructure, all while adhering strictly to Shopify's ecosystem constraints.
Key Contributions
1. Legacy Codebase Refactoring & Feature-Based Architecture:
Took complete ownership of a fragmented legacy architecture and systematically restructured it into an extensible, feature-based directory system. By introducing strict TypeScript typecasting and eliminating code duplication, I improved long-term codebase maintainability by 40% and accelerated subsequent feature development cycles.
2. Extending Shopify Polaris UI Ecosystem:
Architected a reusable, low-debt component library built natively on top of Shopify Polaris to maintain ecosystem compliance without sacrificing brand customization. Utilized TypeScript generics and global CSS variables to engineer flexible, highly customizable component wrappers (such as a unified PGButton system), cutting redundant frontend UI code by 30%.
3. In-App Visual Editor Overhaul (The Design Tab):
Led the end-to-end engineering of the platform's "Design Tab"—a complex, data-heavy configuration dashboard. Transformed a restrictive, legacy setup into a fluid, fully responsive visual layout builder, empowering merchants to seamlessly customize live AI widget behaviors, spacing matrixes, and product card rules across all desktop and mobile breakpoints.
4. Performance-First Marketing Infrastructure:
Engineered an SEO-optimized iteration of the public-facing platform using Next.js (SSG) and Tailwind CSS. Replaced outdated structural dependencies with lightweight Static Site Generation, custom XML sitemaps, and automated meta-tag injections, drastically improving Core Web Vitals to maximize initial merchant acquisition.
1
49
E-Commerce Platform for Frame Fitness Live
Role: Senior Frontend Engineer (Freelance)
Tech Stack: React.js, GraphQL, Shopify API, Stripe, REST APIs, Context API, Figma
Project Link: https://framefitness.com/
The Technical Challenge
Frame Fitness is a luxury brand retailing high-end Pilates Reformers. The digital imperative was a high-conversion platform that felt as premium and seamlessly engineered as the physical hardware itself. The technical challenge lay in building a rock-solid frontend architecture capable of securely processing high-ticket transactions and managing dynamic media content, all while maintaining 100% brand integrity, smooth micro-interactions, and zero performance latency.
Key Contributions
1. High-Fidelity UI Development & Brand Integrity:
Translated intricate Figma specifications into a pixel-perfect, fully responsive interface. Assumed complete "Frontend-Only" ownership of the presentation layer, ensuring that every transition, animation, and typographic choice flawlessly reflected the premium, luxury aesthetic of the brand across all device spectrums.
2. Hybrid Data Architecture (GraphQL & REST):
Engineered a high-performance hybrid data pipeline to power the platform's dynamic blog and content system. Implemented GraphQL to fetch real-time content assets directly from Shopify, while utilizing RESTful APIs for core transactional product data, keeping the client-side bundle lightweight without sacrificing backend flexibility.
3. Secure Custom Checkout Integration:
Owned the integration of Stripe within a completely customized checkout workflow. Developed robust asynchronous state management logic to handle high-value transactions securely, eliminating data friction and ensuring a flawless, trusted buying experience for high-ticket customers.
4. Cross-Functional Contract Engineering:
Managed the entire frontend lifecycle while collaborating closely with a Django backend engineer. Jointly established and documented strict API data contracts between the UI and the server layer, ensuring robust data validation, smooth handoffs, and absolute production stability.
0
54
Enterprise Platform for Pakistan Quality Inspection & Services (PQIS)
Role: Lead Frontend Engineer
Tech Stack: Astro, Tailwind CSS, DaisyUI, SVG Manipulation
Project Link: https://pqis.com.pk/
The Technical Challenge
PQIS competes directly with global compliance giants like SGS, but their legacy digital footprint failed to reflect their enterprise authority. The company's original web presence was a cluttered, unoptimized single-page site hosted on a sluggish Oracle APEX instance. It suffered from fragmented navigation, severe loading bottlenecks, and poor mobile scalability. The challenge was to execute a total frontend overhaul: systematically refactoring a chaotic legacy layout into an authoritative, highly structured B2B multi-page ecosystem while migrating the entire stack to a modern, lightning-fast architecture.
Key Contributions
1. Legacy Code Refactoring & Modernization:
Rescued the brand from an outdated, unmaintainable Oracle-hosted setup. Completely re-engineered the content hierarchy from scratch, transforming a messy single-page view into a polished, multi-page corporate platform built with strict adherence to semantic layout principles.
2. Bespoke Interactive SVG MapViewer:
Engineered a custom, dark-themed regional compliance map ("Core Coverage Footprint") entirely from scratch using optimized vector paths. Implemented asynchronous state logic where selecting an operational node instantly zooms, dynamically repositions, and highlights targeted geographical matrices (such as Karachi) utilizing hardware-accelerated fluid transitions and a clean "Reset Map View" flow.
3. Performance-First Architecture (Astro SSG):
Leveraged Astro to replace the sluggish legacy framework with a content-first static architecture. By ensuring zero client-side JavaScript overhead by default, I eliminated historical loading bottlenecks, maximized user retention, and secured an elite technical foundation for local and global SEO.
4. Component-Driven UI Engineering:
Translated a heavy industrial brand identity into modular, low-debt code using Tailwind CSS and DaisyUI. Engineered crisp, fully responsive layouts for core enterprise frameworks ("Inspection & Audits", "DMAIC Specialization") that render flawlessly across all device spectrums.
5. Future-Proof CMS Architecture:
Intentionally structured the new directory schemes and data layers to support a seamless, plug-and-play migration to a git-backed headless content system (such as Sveltia CMS). This architecture ensures that non-technical admins can scale service descriptions in the future without needing to alter a single line of production code.
0
34
Open-Source Developer Portfolio & High-Performance Engineering Template
Role: Lead Frontend Architect & Open-Source Maintainer
Tech Stack: Astro, TypeScript, Tailwind CSS, GitHub Pages
Project Links: Live Portfolio (https://syedjamal030.github.io) | Open-Source Repository (https://github.com/SyedJamal030/syedjamal030.github.io)
The Technical Challenge
As an independent consultant, your personal portfolio is your ultimate proof of capability. The challenge was to engineer a premium, content-first digital storefront that commands technical authority, delivers near-instantaneous load times, and achieves perfect 100/100 Google Core Web Vitals scores. Furthermore, the codebase needed to be architected with such clean structural integrity and clarity that it could double as an open-source template for the global developer community.
Key Contributions
1. Performance-First Architecture (Astro & TypeScript):
Leveraged Astro to build a rigid, content-focused static platform. By eliminating heavy client-side framework overhead by default, I stripped away runtime loading bottlenecks, securing an elite technical foundation with zero JavaScript bloat and unmatched rendering speeds.
2. Sleek, Utility-First Component UI:
Translated a modern, premium "Premium Trust" developer aesthetic into highly reusable presentation layers using Tailwind CSS. Coupled with TypeScript for strict type-safety, the design ensures flawless layout fluidity and responsive scaling across all mobile and desktop viewport matrixes.
3. Open-Source Template Engineering:
Intentionally structured the repository into an easily forkable, highly decoupled directory system. Designed a clean content-configuration mapping layer so other independent developers can seamlessly clone the project, swap out data arrays, and deploy their own high-performance profiles in minutes.
4. Optimized Deployment & CI/CD Pipelines:
Configured automated deployment workflows utilizing GitHub Actions to seamlessly compile and push production builds directly to GitHub Pages, ensuring highly reliable, cost-effective static hosting with maximum global uptime.
0
17
Welfare Operations & FinTech Analytics Suite
Role: Full-Stack Frontend Engineer
Tech Stack: React, TypeScript, Firebase, React-Bootstrap
Project Link: Internal Community Deployment
The Technical Challenge
A regional welfare society relied entirely on fragmented, manual paper tracking to collect local funds across hundreds of homes and streets. This analog workflow made it nearly impossible to audit pending monthly balances, evaluate collector performance, or project financial run-rates.
The engineering challenge was to transform this highly chaotic, paper-based operational flow into a secure, real-time digital dashboard. Because the backend relied on a NoSQL infrastructure (Firebase), the main technical hurdle was architecting a performant relational data mapping system capable of handling complex multi-tiered queries (e.g., filtering unpaid house nodes nested under specific streets for distinct billing cycles) without incurring massive database read overhead.
Key Contributions
1. Mobile-First "Native-Feel" Optimization:
Engineered the interface with a strict mobile-first viewport architecture. By implementing touch-optimized interactive targets, hardware-accelerated transitions, and zero-layout-shift styling via Tailwind CSS, the platform delivers an incredibly fluid mobile experience that feels indistinguishable from a native iOS or Android application for on-the-field collectors.
2. Relational Mapping in NoSQL (Firebase):
Engineered a highly optimized Firestore data schema that successfully modeled relational dependencies between Streets, Houses, and monthly collection cycles. Designed client-side query logic to dynamically fetch and isolate "payment-pending" indicators, reducing database roundtrips and ensuring instant page loads.
3. Real-Time Data Aggregation Dashboard:
Built a dynamic operational command center utilizing React and TypeScript to crunch raw ledger data into high-value, real-time KPIs. The dashboard visually surfaces critical operational metrics, including Total Accumulated Funds, Progress Percentages sorted by street, and live remaining operational balances.
4. Full-Lifecycle Operational CRUD Modules:
Developed type-safe, strict validation forms (using Formik/Zod) to handle sensitive administrative data entry. Enabled seamless management of community street registries, collection-worker profiles, and recurring monthly salary disbursements.
5. Automated Administrative Guardrails:
Implemented proactive financial logic to track pending overhead and delayed payouts to operational workers. This system automatically flags administrative bottlenecks before they impact localized worker morale or collection schedules, shifting the society from reactive tracking to proactive planning.
0
61