Hi, I'm Trey.

I build React that feels effortless.

Principal Engineer
CXO @ PixelTable
React · TypeScript

02write

Written in TypeScript. Rendered live.

Change a prop and watch the component re-render — the counter in the nav keeps score.

Trey.tsxengineer.types.ts

1type Mood = 'caffeinated' | 'focused' | 'shipping';23export function Trey({4  role = 'Principal Engineer',5  mood = 'caffeinated',6  focus = 'design systems',7  coffee = 3,8  stack = ['React', 'TypeScript', 'Node'],9}: TreyProps) {10  return <Engineer {...props} />;11}

moodcaffeinatedfocusedshipping

focus

coffee3

stack

preview● re-rendered · renders: 0

Trey McBridePrincipal Engineer

mood: caffeinated
focus: design systems
coffee

React
TypeScript
Node

Fully powered. Will refactor your design system before lunch.

03tree

20 years, one component tree.

Every role is a component. Scroll and the tree mounts itself, node by node.

<PixelTable role="CXO & Principal Engineer"> />Aug 2023 – present
PixelTable
- Built the official Daggerheart Card Creator with Critical Role and Darrington Press
- Shipped Alice is Missing: Digital Edition
- Helped build the underlying platform and stays hands-on in the codebase daily
- Owns the user experience across every PixelTable application
- Led the build-out of the Support Portal, a shared community hub for every game title
</PixelTable>
<Sunstate role="Senior Front-End Software Engineer"> />Dec 2023 – present
Sunstate Equipment Co.
- Builds resilient, performant and secure front-end components for the Sunstate experience
- Delivers complex features end to end alongside Product in an agile team
- Mentors and coaches engineers across the front end
</Sunstate>
<RiskLens role="Senior Front-End Engineer"> />Sep 2022 – Jul 2023
RiskLens
- Built front-end features for cyber-risk quantification used to justify security investment decisions
</RiskLens>
<HostPapa role="Senior Software Engineer I"> />Jun 2021 – Jul 2022
HostPapa
- Owned technical breakdowns for upcoming front-end projects
- Guided front-end developers while shipping tickets every sprint
</HostPapa>
<Endurance role="Senior Software Engineer I · Software Engineer I"> />Jun 2017 – Jun 2021
Endurance International Group
- Grew from Software Engineer I to Senior Software Engineer I over four years of front-end work
</Endurance>
<EarlyCareer from="2006" to="2017" roles={6} /><OffMadisonAve /><Pearson /><Arrowhead /><DynamicPageSolutions /><Firesquire /><Freelance />
1. Off Madison Ave
  Senior Developer · Jan 2016 – Jun 2017
  - Built MEAN-stack websites for new and existing agency clients
2. Pearson Embanet
  Web Developer · Apr 2015 – Nov 2015
  - Built responsive sites with HTML5, CSS3/Sass and jQuery, much of it in WordPress
  - Led the team presentation and documentation on responsive email best practices
3. Arrowhead Advertising
  Front-End Developer · Jul 2013 – Mar 2015
  - Developed client websites and internal applications, including a custom video-upload portal with the media team
4. Dynamic Page Solutions
  Web Developer · Feb 2012 – Jul 2013
  - Built B2C client sites on a proprietary CMS and maintained its custom templating platform
5. Firesquire.com
  Front-End Developer · Jan 2009 – Feb 2012
  - Turned designs into standards-compliant HTML/CSS and built custom WordPress themes and plugins
  - Ran client meetings to gather project specs
6. Independent Contractor
  Developer · May 2006 – Jan 2009
  - Built websites start to finish and helped designers shape layouts and wireframes

</Career>

04props

Things I've shipped.

Each project is a component. Inspect one to see its tree, its props and the decisions behind it.

Daggerheart Card Creator

Official homebrew & CGL tool · PixelTable × Critical Role × Darrington Press

React
TypeScript

Visit

Case study

<Problem />

Daggerheart players wanted to make homebrew cards that looked and felt official, and creators publishing under the Community Game License needed a sanctioned way to produce them. Hand-built templates in image editors were slow, inconsistent and easy to get wrong.

<MyRole />

As CXO and Principal Engineer at PixelTable I owned the experience end to end: shaping the editor flow with Critical Role and Darrington Press, building core editor features hands-on, and keeping every template faithful to the printed game.

<Architecture />

A template-driven editor: each card type is described as data, and the same description drives both the live on-screen preview and the export, so what a creator sees is exactly what they download as PDF or PNG, on desktop or mobile.

<HardParts />

Pixel-perfect parity between the preview and exported files across browsers, keeping text fitting and layout stable as creators type, and making a dense, print-oriented editor genuinely comfortable to use on a phone.

<Outcome />

Shipped as the official Daggerheart homebrew tool, with customisable templates, PDF and PNG export, and support for Community Game License submissions, so the community can create content that sits alongside official cards.

Alice is Missing: Digital Edition

A silent, real-time mystery · PixelTable

React
TypeScript
Real-time messaging

Visit

Case study

<Problem />

Alice is Missing is a silent role-playing game: for ninety minutes players never speak and only text each other in character. Bringing that to the web meant recreating the tension of a group chat without breaking the spell of the table.

<MyRole />

I led the experience and front-end engineering, turning the tabletop rules into an interface that disappears: messaging, timed clue reveals and character information that players reach for without ever stopping to think about the tool.

<Architecture />

Real-time sessions connect every player to a shared game state. Messages, clue cards and the session timer are driven by that state, so each device shows the same story at the same moment while each player keeps their own private view.

<HardParts />

Keeping a ninety-minute live session in sync when players drop and rejoin, pacing timed reveals so they land together, and designing a chat that feels like a real phone conversation rather than a game menu.

<Outcome />

A live digital edition that preserves what makes the tabletop game special: collaborative storytelling, real-time mystery solving and rich characters, now playable with friends anywhere.

The PixelTable homepage: “The Table, Amplified” with a glowing d20

PixelTable Support Portal

One community hub for every game · PixelTable

React
TypeScript

Visit

Case study

<Problem />

Players across PixelTable titles had nowhere shared to ask questions, report issues or talk about the games, and the team had no single place to hear from them. Support and community conversations were scattered.

<MyRole />

I led the build-out and expansion of the portal, owning the product direction and user experience and staying hands-on in the implementation as it grew from a support page into a real community space.

<Architecture />

One portal serves every game title: shared community and support features, with each game getting its own space, so a new title plugs in without building a new site and players move between games with one account.

<HardParts />

Designing one information structure that works for very different games, keeping questions discoverable as the community grows, and letting players reach the development team directly without overwhelming it.

<Outcome />

A centralised hub where players ask questions, discuss games, share ideas and interact with the development team in one place, and a foundation every future PixelTable title launches into.

The Natural World Library

Field guides for mycology, herbalism & geology · PixelTable

React
TypeScript
Search & data

Visit

Case study

<Problem />

Amateur enthusiasts and professional researchers needed one trustworthy place to identify fungi, plants, herbs and minerals: a reference deep enough for experts yet approachable for someone standing in a forest with a phone.

<MyRole />

I shaped the reading and identification experience and built interface features hands-on, making a large and growing reference library feel like a friendly field guide in your pocket instead of a database.

<Architecture />

A structured species database powers primers for geology, herbalism and mycology, with interactive identification tools and a wiki-style reading experience layered on the same data, so new primers reuse the whole platform.

<HardParts />

Presenting dense scientific data clearly on small screens out in the field, guiding identification step by step without oversimplifying it, and designing for community contributions without ever compromising accuracy.

<Outcome />

A growing digital library with Geologist, Herbalist and Mycologist primers already live and an Avian primer on the way, serving curious hobbyists and professional researchers alike from one shared, trustworthy source.

05commit

Let's build something.

Commit a message straight to my inbox. Or skip the terminal and find me below.

Hi, I'm Trey.

Written in TypeScript. Rendered live.

20 years, one component tree.

<PixelTable role="CXO & Principal Engineer"> />Aug 2023 – present

<Sunstate role="Senior Front-End Software Engineer"> />Dec 2023 – present

<RiskLens role="Senior Front-End Engineer"> />Sep 2022 – Jul 2023

<HostPapa role="Senior Software Engineer I"> />Jun 2021 – Jul 2022

<Endurance role="Senior Software Engineer I · Software Engineer I"> />Jun 2017 – Jun 2021

Things I've shipped.

Daggerheart Card Creator

Alice is Missing: Digital Edition

PixelTable Support Portal

The Natural World Library

Let's build something.