Skip to content
Available

Jamshaid Mehmood

Frontend engineerbuildinganalytics dashboards

Frontend engineer with 2+ years on the UI layer of HireStream — a multi-tenant React/Next.js hiring platform used by enterprise recruiting teams. My work sits where data meets interface: analytics dashboards, paginated report surfaces, chart systems, and the state architecture that keeps them all deep-linkable.

JM-2024-07ENGINEERING

Jamshaid Mehmood

FRONTEND ENGINEER

Lahore, Pakistan
A FEW QUICK FACTS
BASED IN
Lahore, Pakistan
CURRENTLY
Frontend Engineer · Arbisoft
FOCUS
Analytics UI · Test automation
STACK
React · Next.js · TypeScript

AVAILABLE

Open to frontend & full-stack roles

Drag a little · click to flip

Experience
2+ yrs
Dashboards shipped
3 role-based
Report UIs rebuilt
9
Features delivered
20
E2E tests authored
+384
Locales supported
EN · DE
Impact at HireStream2024 — 2026
0+

Modules migrated

Class components → hooks, platform-wide

0%

Technical debt cut

Measured after the hooks migration

0

Report UIs rebuilt

Server-side sort, filter, CSV export

0%

Fewer UI defects

After a targeted state-bug sweep

ReactNext.jsTypeScriptReduxReact QuerySCSSTailwindChart.jsRechartsi18nextDjango RESTPythonNode.jsExpressPostgreSQLPrismaMongoDBMongooseJWT / OAuthViteWebpackFormikFigmaWebSocketsWebdriverIOPlaywrightMochaAllureGitHub ActionsAgileReactNext.jsTypeScriptReduxReact QuerySCSSTailwindChart.jsRechartsi18nextDjango RESTPythonNode.jsExpressPostgreSQLPrismaMongoDBMongooseJWT / OAuthViteWebpackFormikFigmaWebSocketsWebdriverIOPlaywrightMochaAllureGitHub ActionsAgile
01Selected work

Six problems, and what shipped.

Each of these came out of the same product. Together they're the story of turning a drifting hiring platform into a system — one where data views are shareable, components are shared, and the frontend has one mental model.

The problem

Recruiters, team leads and leadership were all reading the same undifferentiated screen. Nobody got the numbers that mattered to their role, and every question ended in a manual export.

Outcome

Each role lands on a screen built for the decisions they actually make, and any filtered view can be shared as a link.

ReactNext.jsReduxChart.jsSCSS
What I did
  • 01Translated Figma wireframes into three fully responsive, role-scoped dashboard layouts.
  • 02Built the chart layer: HiringFunnel, GenderDistribution, OfferAcceptanceTrend, RecruiterPerformanceTable, UpcomingInterviewsCard.
  • 03Wrapped Chart.js in lazy-loaded HOCs — CustomBar, CustomDoughnut, CustomHorizontalBar — so heavy viz never blocks first paint.
  • 04Wired URL-synced filters, skeleton loaders and per-table pagination through every panel.
02Live demo

Not a screenshot — the real thing.

A working slice of the dashboard pattern I build: role-scoped views, URL-backed filters, skeleton loading states, and charts rendered from raw SVG. Change the filters and watch the address bar mock update — that's the deep-link behaviour, running.

app.hirestream.io/analytics?view=lead&range=30d&sort=hires:desc&page=1
Team of 6

Open requisitions

47

4.9%vs prev.

Active candidates

812

9.8%vs prev.

Avg. time to hire

27d

7.2%vs prev.

Offer acceptance

86%

3.4%vs prev.

Offer acceptance trend

30 days
55677890D3D6D9D12D15D18D21D24D27D30

Hiring funnel

conversion
  • Applied1,840
  • Screened44%812
  • Interviewed50%405
  • Final round46%187
  • Offered51%96
  • Hired74%71

Source of hire

share
100%
of hires
  • Referral34%
  • Job board29%
  • Sourced24%
  • Careers page13%

Recruiter performance

sorted by hires
NameReqsHiresAccept
AKAyesha Khan
11
18
91%
BABilal Ahmed
9
14
84%
SRSana Riaz
8
13
88%
UTUsman Tariq
10
11
79%
Synthetic data · charts hand-rolled in SVG · no chart library4 rows · page 1 of 1
03Test automation

Proving the platform holds.

Two months on HireStream's end-to-end suite: 384 new automated test cases across 25 product areas, 14 of which had no coverage at all. Delivered through 21 merged pull requests, with every spec written against the product's real selectors, route guards and API permissions.

Aug — Oct 2026WebdriverIO 8TypeScriptMochaAllureMailosaurGitHub Actions
2570
+384

Automated test cases

+149% in two months

690
+119

Spec files

New suites across the product

0
14 from zero

Product areas covered

Reports, dashboards, permissions, careers

0
12 + 9

Page objects & API helpers

Specs seed their own data through the API

Coverage by product area

BeforeAfter
Reports
123 / +117
Candidates
100 / +57
Users, roles & permissions
25 / +24
Role dashboardsNEW
21 / +21
Session & auth resilienceNEW
21 / +21
Jobs
34 / +20
Careers siteNEW
18 / +18
TagsNEW
16 / +16
Forms
23 / +12
RequisitionsNEW
11 / +11
Candidate reviewsNEW
10 / +10
Application historyNEW
9 / +9
CV viewerNEW
7 / +7
WorkflowsNEW
7 / +7
Candidate mergeNEW
6 / +6
Sourcing
6 / +5
Reference checkNEW
5 / +5
Data importNEW
4 / +4
OnboardingNEW
4 / +4
Online assessmentsNEW
3 / +3

Plus interviews, referrals, accounts and cross-cutting suites — and role-based coverage for Recruiter, Team Lead, Leadership, Hiring Manager and Reviewer, asserting both the UI surface and API-level 403s.

04Side projects

Where I build the backend too.

At work I own the frontend and extend the API behind it. On my own time I ship the whole thing — schema, endpoints, auth and client. These are on GitHub, and all four are deployed and running.

LiveFull-stack sales CRM2026

SalesFlow CRM

Sole engineer — frontend, API, database, deployment

A production-deployed CRM for managing contacts, deals, activities and sales performance. I designed the schema, built the REST API, wrote the auth stack — including TOTP two-factor and Google Sign-In — and shipped the React client on top of it.

sales-flow-crm-dashboard-iks4.vercel.app

Demo login: admin@example.com / password123

Backend & data

  • Express 5 REST API over PostgreSQL with Prisma for schema and migrations.
  • Auth stack built from scratch: JWT sessions, bcrypt hashing, Google OAuth token verification, and TOTP two-factor with QR enrolment and recovery codes.
  • Role-based access control — admins see the org, reps see their own records — enforced in middleware, not the UI.
  • Audit log capturing create / update / delete / merge across every entity, plus multer-backed file attachments.

Frontend & analytics

  • React 19 + Vite client with React Query for server state and caching.
  • Dashboard of KPI cards, revenue charts, deal-stage distribution, quota progress and a forecast widget (Recharts).
  • Drag-and-drop Kanban pipeline via DnD Kit, with configurable stages and lost-reason capture.
  • Contacts at scale: search, multi-facet filters, sorting, CSV import/export, duplicate detection and merge.
  • Reports on win rate, average deal size, sales-cycle length and lead-source performance.
  • i18next EN/DE, persisted dark/light theme, responsive from phone to desktop.
FrontendReact 19ViteTailwind CSS 4React QueryRechartsDnD Kiti18next
BackendNode.jsExpress 5PostgreSQLPrismaJWTbcryptotplib (2FA)multer
LiveMERN gallery + walkable 3D tour2026

Virtual Art Gallery

Full-stack — React client, Express/MongoDB API, 3D tour, deployment

A full-stack MERN art gallery: browse, search and filter artwork, open detail pages, add pieces to a cart, upload your own work, and walk a 3D virtual tour of the collection. Deployed end to end — React + Tailwind on Vercel, a Node/Express API on Render, MongoDB Atlas for data and Cloudinary for media. It's the production rebuild and hardening of my final-year project.

virtual-art-gallery-v2.vercel.app

Demo login: amara@vag.local / Gallery@2026 · first load may take ~30–60s while the free-tier backend wakes

Frontend & 3D tour

  • Walkable 3D gallery tour built on three.js, code-split into its own bundle chunk so the WebGL viewer never blocks first paint.
  • Artwork loads into the scene as WebGL textures with crossOrigin handled for Cloudinary-hosted images.
  • Browse, search and filter the collection, view artwork detail pages, and add pieces to a cart.
  • React (CRA) + Tailwind client on Vercel, with SPA deep-links (/tour, /discoverArt) resolving straight to the right view.

Backend, media & hardening

  • Node/Express API over MongoDB Atlas with Cloudinary-backed uploads that survive redeploys.
  • Upload pipeline with server-side watermarking, perceptual-hash duplicate detection, and authenticated (non-public) original files.
  • JWT auth with an email-OTP signup and password-reset flow.
  • Production hardening: multi-origin CORS with a Vercel preview-URL wildcard, and fail-fast boot checks that refuse to start on missing config.
FrontendReact (CRA)Tailwind CSSthree.jsWebGL
BackendNode.jsExpressMongoDB AtlasCloudinaryJWTEmail OTP
DeployVercelRender
LivePhoto feed, likes, follows2026

Instagram Clone

Sole engineer — React client, TypeScript API, database, deployment

An Instagram-style social app built end to end — photo feed, likes, comments, follows, saved posts, search, explore and an activity inbox. A typed React client over a TypeScript Express API, with photos stored in GridFS and streamed back through the API.

instagram-lite-iota.vercel.app

Demo login: demo@example.com / Demo1234, or the one-click demo button · first load may take ~30–60s while the free-tier API wakes

Frontend

  • React 18 and TypeScript on Redux Toolkit Query — likes, saves and follows apply optimistically and roll back if the request fails.
  • One optimistic edit patches the post everywhere it is cached — feed, explore grid, profile grid and permalink — so no stale copy is left on screen to toggle the wrong way.
  • Expired sessions funnel through a single in-flight refresh, so a screen full of simultaneous 401s triggers one token rotation instead of tripping the server's reuse detection.
  • The API returns image dimensions, so the client reserves the right box before the photo loads and the feed never reflows as you scroll.
  • Every colour and spacing value resolves from one token file, which makes light / dark / system theming a single-file change.

API, data & testing

  • Express and TypeScript over MongoDB with photos in GridFS, so a feed page is a few hundred bytes per post instead of megabytes of inlined image.
  • Keyset pagination on (createdAt, _id) rather than skip — an index seek at any depth, with no rows double-served when new posts land mid-scroll.
  • Likes are idempotent by unique index instead of read-then-write, and counters move with atomic $inc alongside the write itself.
  • 15-minute access tokens held in memory, refresh tokens in an httpOnly cookie that rotates on use — replaying a spent token revokes the whole family.
  • 46 Playwright end-to-end tests across auth, feed, profile, follow, search, saved and responsive layout, driving the real API and client.
FrontendReact 18TypeScriptMUIRTK QueryReact RouterZod
BackendNode.jsExpressTypeScriptMongoDBGridFSJWTGoogle Sign-In
TestingPlaywright
DeployVercelRender
LiveTwo-sided freelance marketplace2026

Fiverr Lite

Sole architect & developer — v2 re-architecture of a legacy prototype

A full-stack, two-sided freelance marketplace: sellers publish gigs with tiered packages, buyers order through an escrow-style lifecycle, and both sides chat, exchange deliveries and leave ratings in real time — plus an admin dashboard and an AI assistant that drafts gig copy. It's a complete v2 re-architecture: I audited the legacy v1 prototype (297 issues documented in my own written audit) and rebuilt it end to end around a shared type contract, server-side authorization and payment integrity.

fiverr-lite-web.vercel.app

First load may take ~30–60s while the free-tier backend wakes

Security & payments

  • Every actor id is read from the authenticated JWT, never the request body — closing a systemic BOLA/IDOR class where any user could otherwise edit any gig or settle any order.
  • Order prices are derived server-side from the gig so amounts can't be tampered with, and settlement is idempotent — an order is never marked paid on the client's word.
  • Settlement is verified two ways: a signed Stripe payment_intent.succeeded webhook plus a server-side re-read of the PaymentIntent — so an order settles reliably and can't double-charge.
  • A payment-provider abstraction backs both real Stripe and a built-in mock, so the whole checkout-to-settlement flow is demoable offline and demo and production share the exact same settlement code.
  • Strict credentialed CORS allowlist, a path-scoped refresh cookie, and token-version session revocation.

Architecture & real-time

  • A shared @fiverr-lite/shared package makes one Zod source the single source of truth — generating both runtime validation and the static DTO types imported by the API and the web app, so client and server can't drift.
  • Layered backend — routes → controllers → services → models — with one module per domain: auth, gigs, orders, payments, chat, ratings, admin, AI and uploads.
  • An escrow-style order state machine allows only legal transitions (awaiting payment → paid → in progress → delivered → completed, plus cancellation), enforced in the service layer with DB-level invariants like one active order per buyer+gig.
  • The API parses its entire environment with Zod at boot and refuses to start if misconfigured, instead of failing deep in a request handler.
  • Socket.IO powers live buyer↔seller chat and live order-status updates.
  • Six competing styling approaches collapsed into a single design-token source feeding Tailwind and MUI v6, with full dark mode and defined loading / empty / error states.
FrontendNext.js 14TypeScriptTailwindMUI v6TanStack QuerySocket.IO
BackendNode.jsExpress 4TypeScriptMongoDBMongoose 8ZodJWTStripe
TestingVitestmongodb-memory-serverPlaywright
DeployVercelRender
05Experience

Two-plus years on one product, end to end.

Depth over breadth: the same codebase from Figma handoff through production, long enough to own the consequences of my own architecture decisions.

Frontend Developer · Arbisoft

HireStream — multi-tenant HR & hiring SaaS

Current

Jul 2024 — Present

2+ yrs · Lahore, Pakistan

Own the UI layer of a React 17 / Next.js hiring platform serving enterprise recruiting teams, from Figma handoff to production.

01

Application-Wide UI Revamp

  • Currently leading a revamp of the platform's entire user interface — modernising the visual language, layout and interaction patterns across every module, from Figma redesigns through to production.
  • Rolling the new patterns out through the shared component library so the redesign lands consistently across dashboards, reports and workflow screens rather than page by page.
02

Dashboards & Reporting

  • Shipped 3 role-based analytics dashboards (Recruiter, Team Lead, Leadership) with funnel, distribution and trend charts.
  • Rebuilt 9 report UIs with debounced search, server-side sort/filter, a chip system and CSV export.
  • Built a WebSocket-driven export progress UI with a linear progress bar and disabled states.
03

Architecture & State

  • Implemented Redux action/reducer/selector patterns with URL-backed filter state — deep-link restore, per-table page-size memory, zero-loss browser navigation.
  • Engineered a shared component library adopted across 9 report UIs and 3 dashboards.
  • Led a 30+ module class-to-hooks migration, cutting technical debt 40%.
04

Backend (Django REST)

  • Extended the Django REST Framework endpoints behind the report and dashboard surfaces — serializers, viewsets, filter backends and pagination — so the API returned the shape the UI needed instead of the UI reshaping it client-side.
  • Moved sorting and filtering server-side across the reporting endpoints, keeping large result sets off the client.
  • Wrote SQL and Python metrics scripts against the product database to verify dashboard figures and answer ad-hoc reporting requests.
05

End-to-End Test Automation

  • Expanded the platform's WebdriverIO/TypeScript e2e suite from 257 to 641 automated test cases (+149%) and from 69 to 188 spec files over two months, across 25 product areas — 14 of which had no automation before.
  • Built role-based coverage for the three dashboards and a user/role/permission matrix (Recruiter, Team Lead, Leadership, Hiring Manager, Reviewer), asserting both the UI surface and API-level 403s.
  • Authored 12 page objects and 9 API seeding helpers so specs provision their own data through the API, plus Mailosaur-driven email and OTP flow testing.
  • Triaged nightly CI runs, root-causing flaky and environment-specific failures against the product source instead of masking them with retries.
  • Delivered through 21 merged pull requests under conventional commits with pre-commit lint and format gates.
06

Craft & Quality

  • Rolled out i18next (EN/DE) across the full frontend, including server-driven workflow labels.
  • Introduced skeleton loaders, debounced inputs and lazy-loaded chart wrappers to cut perceived load time.
  • Diagnosed and fixed Formik re-init, search-highlight corruption, filter-reset-on-refresh and double-API-call bugs — 30% fewer reported UI issues.
  • Built the Careers & Job Discovery UI with faceted search, bookmarks, recency labels and similarity scores.
  • Shipped step-by-step virtual tour onboarding for Settings, Jobs, Candidates and Requisitions.
  • Reviewed PRs, enforced ESLint standards, and delivered 20 distinct features across Agile/Scrum sprints.

Education

  • BS Information Technology

    Punjab University College of Information Technology (PUCIT)

    Jun 2020 — Jun 2024

    CGPA 3.7 / 4.0

  • Intermediate (ICS)

    Punjab College of Information Technology (PGC)

    Mar 2018 — Mar 2020

    90% · A+

Certifications

  • Responsive Web Design

    freeCodeCamp · 2024

06Capabilities

Frontend-first, full-stack aware.

The bars are a self-assessment against what I've actually shipped — not a claim to mastery. Backend sits here because I design UI against the shape of the data, and sometimes change that shape.

Core Frontend

Where I spend most of my time
  • React95
  • Next.js88
  • JavaScript (ES6+)93
  • TypeScript80
  • HTML5 / CSS395
  • SASS / SCSS88

State & Data

Predictable, shareable UI state
  • Redux92
  • React Hooks94
  • URL-synced state90
  • Deep-link filters90
  • WebSockets75

Backend & Data

I build against the API, and inside it
  • Django REST Framework80
  • Python80
  • Node.js / Express82
  • PostgreSQL / Prisma78
  • MongoDB / Mongoose74
  • REST API design82
  • Auth (JWT, OAuth, 2FA)78
  • SQL80

Test Automation

Coverage I wrote and maintain
  • WebdriverIO88
  • Playwright84
  • TypeScript (specs)86
  • Page-object design88
  • API seeding (supertest)82
  • Allure / CI triage82
  • Flake root-cause85

UI, Tooling & Practice

The rest of the delivery surface
  • Figma → code92
  • Chart.js / data viz86
  • Webpack / ESLint80
  • i18next88
  • Formik / Yup85
  • Git / Agile / Scrum90
Available for work

Jamshaid Mehmood

FRONTEND ENGINEER

Based in
Lahore, Pakistan
Timezone
PKT · UTC+5
Currently
Frontend Engineer · Arbisoft
Focus
Analytics UI · Test automation
Education
BS Information Technology · CGPA 3.7 / 4.0
Status
Open to frontend & full-stack roles
Email mePKT · UTC+5
Open to frontend & full-stack roles

Let’s build something
worth measuring.

Whether you need dashboards that people actually trust, a reporting surface that scales past the prototype, or a frontend that stops accruing debt — I’d like to hear about it.