hero
hero

Zachery Ng

Founding Front-end Engineer at Catalyst

About

I'm a front-end engineer at Catalyst, building AI trading agents for everyday investors. I joined in May 2026 as one of the first engineers, while the company was still in stealth, and helped take the product to its public launch in October alongside a Sequoia-backed $30M raise. Before that I spent four years at Airfoil as its first engineering hire.

Most of my day is still production React and Next.js: the shared components, the motion, the performance budget, the parts that tend to go unowned unless someone picks them up. I care about how a product feels in the hand, so the small things get attention too: the easing on a reveal, the layout shift nobody filed, the tick that lands on a round number. At an early-stage company that also means whatever the launch needs, from sign-in and trading flows to the landing page, and reviewing most of what the rest of the team ships.

I came to this from product design, so I can read a Figma file and I have opinions about it. I don't lead with that. The design side is context for the engineering, not a second job title.

What I've been thinking about more recently is the loop between designers, engineers and the agents both now work through. AI has raised the rate at which explorations show up, and the usual process wasn't built with that in mind. A few things I've been trying in response:

  • A second PR lane for prototypes, with lighter CI, so exploring stays cheap
  • A /stories surface where anyone on the team can put a component or an idea in front of others as code
  • Component docs generated from the source, so an agent reads one file instead of opening a hundred

There's a longer write-up of the reasoning in the articles. The rest is still being worked out on a real product, with real reviewers, and some of it will probably change.

The other half of a senior role is the less visible part: scoping with leadership, helping decide what the front-end standard is and writing it down, reviewing in a way that nudges fixes into the shared component instead of the call site, and trying new tooling early so the team has a data point before committing. On that last one I've worked through Cursor's Composer, Claude Code and Codex as they arrived, usually a few of them at once across parallel worktrees.

Experience

Loading...
Loading...
Loading...

Catalyst

Founding Front-end EngineerMay 2026 - Present

One of the first engineers at Catalyst, which builds AI trading agents for everyday investors. I joined in May 2026 while the company was still in stealth and work across most of the web front-end. Catalyst launched publicly on 8 October 2026, alongside a $30M raise backed by Sequoia that Fortune covered in Term Sheet.

  • Launch.
    The pieces a public launch needs to hold up: phone, wallet and passkey sign-in, the waitlist with invites and referral credit, the landing page and its scroll performance, terms and privacy pages, and a cleanup pass on every error and empty state a new user is likely to meet.
  • Trading and portfolio.
    The Quick Trade desk across perps, spot and prediction markets, funding and cash flows, position details, and a shareable PnL card with a signed link preview so a good trade travels well.
  • Agent surfaces.
    The chat composer with @ mentions for strategies, the thinking trace, threads and strategies in the sidebar, the Explore feed, and the workflow graph where you can read and edit what an agent is going to do. On the graph, the change that mattered most was a layout pass that centres every node and its connection points, so lines run straight wherever they can and the canvas reads the way people expect it to, instead of a tangle that's hard to follow.
  • Foundations.
    A lot of what the team builds on today started as one of these. The chat transcript moved to the new message-scroller primitive, with the React 19 and Next.js 16 upgrade it needed, which fixed the scroll and pinning problems a virtualised list kept causing. One icon system for crypto tokens, stocks and prediction markets, so an asset looks the same everywhere it appears. Widgets built as composition components with container queries, so the same card lays itself out correctly in the chat, the sidebar or a full page without knowing where it's been placed. A shared composer shell, transaction chips split by asset class instead of one component with twenty props, and a shared formatter for amounts.
  • Motion and detail.
    The animated logo that doubles as the agent's thinking spinner, scroll-snapped cards that reveal as you go, and the animated line work that ran through the early product. Landing page sections only play while they're in view, so the motion doesn't cost scroll smoothness. The details get the same care: a transcript that doesn't shift when a scrollbar appears, chart cards that hold their size when the period changes, y-axis ticks on round values, display type that sits optically centred, iOS Safari that no longer zooms into text fields, and its browser chrome blended into the app background.
  • Brand and system.
    Light mode and the Figma token migration, then the Metalab rebrand in code: logo, type and share card. Plus the mobile layout.
  • The stories lane.
    A /stories segment beside the product with three lanes: shared components rendered the way their real call sites use them, widgets and prototypes that can be reviewed outside the app, and an interactions lane for behaviour a props matrix struggles to show. Playwright runs against it in CI, so a PR picks up regression screenshots along the way.
  • Component inventory for agents.
    A generator that derives the shared component catalogue from the TypeScript AST, including variant axes and who imports what. Because it's regenerated from source it stays current, and the first run surfaced 22 components with no importers. It runs as a repo check.
  • Review.
    Most of the team's front-end comes to me for review, because I catch what's hard to see in a diff: a fix that belongs in the shared component instead of the call site, a popup on the wrong primitive, motion that doesn't match the rest of the app, a layout that breaks on a phone, copy that names the backend instead of what the user sees, a regression that looks like a design change. AI workflows take the first pass so my turnaround stays quick, and where it's cheaper I push the follow-up fix myself rather than leave another round of comments. Review stays out of the way of velocity, and the codebase gets more consistent with each PR instead of less.

Airfoil

Senior Product EngineerMar 2022 - May 2026

First engineering hire at Airfoil, a design-led studio, from 2022 to 2026. I helped build the front-end practice from the start: the Next.js starter most projects began from, the shared design system, and a lot of the estimation and review habits the team works with.

  • Client delivery.
    Lead front-end on client work in Next.js, TypeScript and Tailwind, with a bias towards performance and motion.
  • Internal products.
    Product design and lead front-end on the studio's internal tools, then Meld v1 and v2, a visual reference and capture tool: the capture extension, the feed and collections, threaded comments and mentions, AI transforms over assets, optimistic mutations, and a light-dark token system. Plus a run of stealth products and prototypes through 2026 where I owned the front-end end to end.
  • Developer experience.
    Set up the studio's Vite+ monorepo in early 2026 and moved the team onto oxlint and oxfmt, with merge-queue-safe preview e2e in CI. The aim was a faster loop for engineers and agents alike.
  • Scoping.
    Estimations with leadership and clients: tasks, assumptions and timelines, so surprises later were fewer and smaller.
  • Team.
    Onboarding, mentoring, hiring input and performance reviews for the engineers who joined after me. Early adopter of AI coding tools and headless CMSs, so the studio could decide from experience rather than hype.

Spark

Design EngineerApr 2020 - Mar 2022

At Spark, I built the foundation for a cohesive design and development workflow by creating the Spark Design System and a Figma component library. My work focused on:

  • Design & Traffic Optimization:
    I developed mockups and design solutions to guide users toward underutilized features, helping increase engagement with premium offerings and improving platform retention.
  • Consistent Product Experience:
    As the sole designer, I established a unified design language across multiple products within the same application. For example, I set the visual direction for LNG Basis—including its purple theme and icon—and designed a seamless product-switching mechanism.
  • End-to-End Product Design:
    I handled the full design lifecycle, from low to high-fidelity designs, ensuring clear validation and visualization of user inputs (e.g., submission flows with chart-based feedback). I worked closely with the team to refine designs through iterative feedback before handing them off to engineering.
  • User Research & Usability Testing:
    I led product research, created mockups, and conducted remote usability tests to gather user insights and improve design decisions.
  • Front-End Development Contributions:
    Beyond design, I implemented key features in VueJS, TypeScript, and TailwindCSS. I also re-designed and developed sparkcommodities.com with a mobile-first approach in NuxtJS, achieving a perfect Google Lighthouse performance score. Additionally, I contributed to core platform features like layout, dashboards, notifications, and marketing banners.

By bridging design and development, I helped create a more polished, user-friendly platform while improving internal processes for future projects.