Skip to main content

Staff Frontend Engineer · Frontend Architect

Aayush Singh

I architect frontend systems that outlive their original teams — 11+ years setting the patterns, build systems and standards that other engineers build on, across regulated fintech and enterprise e-commerce.

View workDownload CV

Discipline

Frontend architecture, design systems, AI platform engineering

Domains

Regulated fintech · Enterprise e-commerce · Real-time 3D

Core stack

React · Next.js · TypeScript · GraphQL · NX

Based

Ghaziabad, India (IST) — open to anywhere

Status

Open — remote or relocation, worldwide

§ 01 — Evidence

Scope, in the units that matter

Every figure traces to a named engagement. Nothing here is self-scored.

1M+

Users reached

SigFig, via banking partners

5 / 12

Brands / locales

Goodyear NX monorepo

0

WCAG AA findings

Audited, not claimed

100K+

Designers served

Foyr, 30+ countries

§ 02 — Method

How I decide

Each position is paired with the work that earns it.

  1. 01

    Standards live in documents, not code review

    Code review catches one diff at a time. If a standard matters, it belongs in a design review and a written technical document that outlives the person who wrote it.

    Evidence

    At Publicis Sapient I presented solution designs for senior-architect review before rollout, and set implementation direction for other engineers in the pod through those documents rather than after the fact.

  2. 02

    Accessibility is a build-time guardrail

    WCAG AA is not a remediation pass scheduled before launch. It is a constraint you design to from the first component, which is the only way it survives contact with a deadline.

    Evidence

    Delivered an enterprise e-commerce platform with zero WCAG 2.1 AA audit violations — focus management and ARIA built into the shared components, not retrofitted.

  3. 03

    The best architecture is the one the team adopts

    I weight team familiarity and adoption cost as heavily as technical merit. An elegant pattern nobody sustains is a liability with good documentation.

    Evidence

    Chose Zustand over Redux Toolkit for the account domain because the ceremony would not have been sustained, then wrote the state-ownership guide so the decision held after I moved on.

  4. 04

    Diagnose before you choose

    Most architecture arguments are really unmeasured performance arguments. Find the actual cause first; the right tool is usually obvious once you have.

    Evidence

    Traced a re-render cascade across an account tree to Context identity churn before touching a state library — the migration was the consequence of the diagnosis, not a preference.

  5. 05

    Build the layer other teams stand on

    Platform work is leverage. One correct shared foundation is worth more than five well-built features, because it decides how expensive the next hundred features are.

    Evidence

    Engineered NX monorepo infrastructure for 5 brands across 12 locales — CSRF protection, a GraphQL proxy keeping credentials server-side, React Query SSR — consumed by every delivery pod.

§ 03 — Case records

Selected work

Read as decision records: the constraint, what was rejected and why, what it bought.

Goodyear E-Commerce

US retail e-commerce platform · NX monorepo, 5 brands, 12 locales

goodyear.com (opens in a new tab)

Scope

Platform infrastructure and the full authenticated experience for Goodyear's US storefront on Next.js 15 — CSRF protection, a GraphQL proxy keeping service credentials server-side, React Query SSR with HydrationBoundary, and the authentication, account and order domains built on top of them.

Constraint & decision

Order Details had to serve three fulfilment types with divergent data models and financial rules. Conditional-rendering sprawl breaks down past two types and a shared mega-component is untestable, so each fulfilment owns its own calculation and UI contract against a common interface — a fourth type lands without touching the other three. Separately, a re-render cascade across the account tree traced back to Context identity churn; migrating to Zustand gave fine-grained subscriptions without the ceremony Redux Toolkit would have added.

Outcome

  • 5 brands · 12 locales
  • Zero WCAG 2.1 AA audit violations
  • 3 fulfilment types on one contract
  • Next.js 15
  • React 18
  • TypeScript
  • GraphQL
  • NX Monorepo
  • Zustand
  • React Query

Digital Wealth

Digital wealth-management & robo-advisory platform · 1M+ end users via banking partners

sigfig.com (opens in a new tab)

Scope

Core modules of a regulated wealth platform delivered through banking partners — schema-driven investment, suitability and regulatory questionnaires, employer-sponsored plan flows, brokerage funding, new-client onboarding, and a React-PDF proposal generator.

Constraint & decision

The shared core repo and the per-partner repos were developed and released separately, so every partner deploy needed manual release sequencing. I ran the R&D to run both from a single folder structure under Vite and rebuilt the CI/CD pipeline to drive them from one place — a partner deploy now triggers the core pipeline automatically. Separately, the questionnaire playback module hit a hard 100-object Contentstack ceiling; migrating from an object-based to an array-of-objects model removed the limit and restored scalable detail rendering.

Outcome

  • 1M+ end users
  • ~45% faster load times
  • 30% faster builds · 40% faster partner onboarding
  • React
  • TypeScript
  • Vite
  • GraphQL
  • React Hook Form
  • CI/CD
  • Jest / RTL

Neo

Browser-based real-time 3D interior-design platform · 100K+ designers in 30+ countries

neo.foyr.com (opens in a new tab)

Scope

The core user-facing application, built from scratch to production on Vue.js, Nuxt.js and Vuex — authentication, dashboards and every primary surface — for a platform that turns floor plans into 3D renderings and 4K walkthroughs in the browser.

Constraint & decision

The interaction layer and the rendering engine had to stay in sync in both directions without either owning the other's state. I designed a bidirectional middleware between Vue and Three.js: a property change in Vue — object height, say — invokes the engine to update the 3D/2D canvas in real time, and engine-side changes propagate back to the UI. A molecules-and-components design system built alongside it eliminated duplicate UI and became the shared vocabulary for feature teams.

Outcome

  • 100K+ designers · 30+ countries
  • ~30% faster 3D model loads
  • Design system built from scratch
  • Vue.js
  • Nuxt.js
  • Vuex
  • Three.js
  • WebSockets
  • Algolia
  • Design Systems
All projects
§ 04 — Capability

Depth, against a stated benchmark

Bands, not percentages — so the claim can be interrogated.

Architecture

  • Frontend ArchitectureExpert
  • NX MonorepoExpert
  • Design SystemsExpert
  • SSR / HydrationExpert
  • Multi-tenant & Multi-locale PlatformsExpert
  • Micro-frontendsAdvanced
  • System DesignAdvanced

Core Frontend

  • React.jsExpert
  • Next.js 15Expert
  • ZustandExpert
  • React QueryAdvanced
  • Vue.js / Nuxt.jsAdvanced
  • ReduxAdvanced
  • React Hook FormAdvanced
  • Tailwind CSSAdvanced
  • Material UIAdvanced
  • StorybookAdvanced

AI & Agents

  • MCP Server DesignExpert
  • Agentic WorkflowsExpert
  • Claude Code Skills & HooksExpert
  • LLM GuardrailsAdvanced
  • Prompt EngineeringAdvanced
  • Anthropic SDKAdvanced
  • RAG / GroundingAdvanced
  • Model EvaluationWorking

Graphics & Motion

  • Canvas / 2D RenderingExpert
  • Three.js InteropAdvanced
  • Real-time Sync (WebSockets)Advanced
  • Animation & Motion SystemsAdvanced
  • Parallax & Scroll ChoreographyAdvanced
  • SVGAdvanced

Languages

  • TypeScriptExpert
  • JavaScript (ES6+)Expert
  • HTML5 / CSS3 / SASSExpert

Platform & Quality

  • ViteExpert
  • Git / GitHubExpert
  • Jest / React Testing LibraryExpert
  • WCAG 2.1 AA AccessibilityExpert
  • Performance OptimizationExpert
  • CI/CD PipelinesAdvanced
  • WebpackAdvanced
  • DockerWorking
  • AWSWorking

APIs & Backend

  • REST API DesignExpert
  • GraphQLAdvanced
  • Node.jsAdvanced
  • Express.jsAdvanced
  • MongoDBWorking
  • Firebase / SupabaseWorking
Expert
Production-proven at scale, with architectural responsibility
Advanced
Shipped features and reviewed others' work
Working
Used in real projects, not a primary focus
§ 06 — AI systems

Building the layer around the model

I build the layer between a language model and a system that matters — the guardrails, the grounding and the audit trail. Most of this is infrastructure rather than prompting.

2

MCP servers built

database access, design system

4

Open-source AI repos

MIT, on GitHub

4

Scheduled agents

running unattended, daily

12+

Custom skills authored

project skills and job-search pipeline

What an MCP server exposes and what it keeps backClaude talks to an MCP server over typed tool calls. The server holds the credentials and the connection to the underlying system — a database or a design system library — and only typed, bounded results cross back. The raw system is never exposed to the model.MODELBOUNDARY YOU OWNSYSTEMClaudeno credentialstyped tool callbounded, masked resultMCP SERVERTool schemasGuardrailsCredentialsnever leave hereDatabase / libraryunchangedThe model never holds a credential and never sees the raw system — only what a tool chose to return.
Fig. — what an MCP server exposes, and what never crosses the boundary

harbor-console

Streaming chat UI over a guarded MCP server · Next.js · public, MIT

Try it — ask it to delete the invoices (opens in a new tab)Source — github.com/aayushsinghm16/harbor-console, opens in a new tab

Constraint & decision

Most AI chat UIs are demos with simulated tool calls and a happy path. Every call here is a real MCP tools/call against a real database, and the interesting states are the ones usually skipped. A tool card appears the moment the model asks — running, before anyone knows the outcome — then resolves green with a row count or amber with the refusal reason. The demo’s fourth suggested prompt is "Delete all the invoices": the model genuinely tries, the guard refuses, and that renders as a card you can read rather than a crash.

Outcome

  • Real MCP client — initialize, tools/list, tools/call; pointing it at a remote server is a transport swap and nothing else
  • Stop actually aborts through to the provider, rather than hiding output that keeps generating and keeps billing
  • Transcript follows the stream but stops the instant you scroll up, and offers to catch up instead of yanking you back
  • Custom renderer for the markdown subset Harbor returns — no dangerouslySetInnerHTML, no XSS surface, ~40 kB of client JS not shipped. 107 kB first load
  • Reduced motion respected, focus rings throughout, composer labelled and keyboard-driven
  • Deployed and open to anyone — no key needed, it answers on a free open-weight tier
  • Next.js
  • MCP client
  • Streaming
  • AbortController
  • Accessibility
  • TypeScript

harbor-mcp-server

MCP server · agent access to a subscription business database · public, MIT

Source — github.com/aayushsinghm16/harbor-mcp-server, opens in a new tab

Constraint & decision

"Let an agent query our database" is a two-line proof of concept and a genuinely hard production problem. I rejected pattern-matching the SQL string — a regex looking for DROP is defeated by comments, casing and string literals — and parse every statement into an AST instead, allowlisting tables and clauses from the tree rather than the text. Personal data is masked on the way out, result sets are clamped, and writes require a preview plus a confirmation token.

Outcome

  • Statement stacking, comment-hidden DELETEs, schema introspection and banned functions all refused
  • Every rejection returns a hint naming the offending table or clause, so the agent self-corrects instead of retrying blind
  • Audit log the agent has no read access to
  • Ships with a seeded demo database — nothing to provision before asking it a question
  • MCP
  • TypeScript
  • AST parsing
  • SQL guardrails
  • PII masking
  • Audit logging

Design system, exposed to LLMs

MCP server · built at Publicis Sapient · internal tooling

Employer work — not public

Constraint & decision

Agents writing UI reinvent components that already exist, because they cannot see the design system. Pasting component source into the context window is expensive and goes stale the moment the library moves. I exposed the library as typed MCP tools instead — discovery, component detail, search, generated usage, and the correct import statement — reading from a read-only mount so the tool can never be the thing that breaks the library.

Outcome

  • Full atomic-design coverage — atoms, molecules and organisms, discoverable and searchable by an agent
  • An agent can inspect props and variants and emit the correct import instead of inventing a component
  • The design system becomes an agent-callable API rather than pasted context
  • Containerised, with the component library mounted read-only
  • MCP
  • TypeScript
  • Design Systems
  • Docker
  • LLM tooling
All AI work, guardrails and workflows
§ 05 — Track record

12 years, no gaps

  1. August 2025 - March 2026

    Contract

    Lead Frontend Engineer (Senior Experience Engineer)

    Publicis Sapient — client: Goodyear

    Engineered the platform infrastructure behind an NX monorepo serving 5 brands across 12 locales — multi-locale/brand API configuration, CSRF protection, a GraphQL proxy keeping service credentials server-side, and React Query SSR with HydrationBoundary — shared foundations consumed by every delivery pod.

  2. January 2025 - August 2025

    Independent

    Career Focus Period

    Independent — Frontend & GenAI Engineering

    Built two MCP servers: one giving an AI agent audited, read-mostly access to a business database — AST-allowlisted SQL, PII masking and two-step writes — and one exposing a design system to LLMs as typed tools.

  3. March 2022 - January 2025

    Full-time

    Software Development Engineer 2 — Frontend

    SigFig

    Re-engineered the local-development and release layer so the shared core repository and the per-partner repositories run from a single folder structure under Vite, then rebuilt the CI/CD pipeline to drive both from one place — deploying a partner repo now triggers the core pipeline automatically, removing manual release sequencing.

  4. July 2021 - March 2022

    Full-time

    Web Development Engineer II

    CoreValue Technologies

    Built a React.js merchant dashboard with real-time analytics that let e-commerce merchants compose dynamic, personalized storefront content, lifting engagement 35%.

  5. April 2019 - July 2021

    Full-time

    Senior Frontend Developer

    Foyr (RBJ Technologies)

    Designed a bidirectional middleware between the Vue interaction layer and the Three.js engine: a property change in Vue — object height, for instance — invokes the 3D engine to update the 3D/2D canvas in real time, and engine-side changes propagate back to the UI.

Fig. — Fourteen numbers. All of them checkable.

Text alternative: “Receipts”14s

Fourteen figures land one at a time, accelerating — the first four hold two beats each, the middle six a beat and a half, the last four a single beat — while a column on the right accumulates everything already shown.

100K+ designers on the 3D platform; 30+ countries; 5 brands × 12 locales on one monorepo; −45% application load time; −35% landing-page drop-off; −30% build time after the Vite migration; +40% faster partner onboarding; +35% merchant engagement; +50% template adaptability; −20% delivery time via a shared component library; 2 MCP servers; 4 agents running unattended; 6,563 questions authored and validated by one of them; 100 Lighthouse accessibility on this site.

It closes on the only claim that matters: every one of these is on the site, next to the work it came from.

Full history Five short films

Open to Staff / Principal and architect roles

Based in Ghaziabad, India (IST) and open to anywhere — fully remote, or relocation with visa sponsorship. Hours overlap European afternoons and US mornings.

Get in touchEmail directly