React/TypeScript Design System for City of Portland
City of Portland – Bureau of Technology Services
Senior Frontend Engineer (Contract) — design system architecture & platform
2025-02 – 2025-09 · Remote, USA
Public Sector, Internal Tools, Design System, Accessibility, Component Libraries, screen readers, WCAG, Section 508, USWDS
Highlights
- Set frontend architecture and technical direction for the design system, including component patterns, API design, theming and tokens, versioning strategy, testing approach, and adoption guidance used across multiple product teams.
- Architected and implemented @cityofportland/design-tokens as a design-to-code pipeline connecting Figma, Tokens Studio, Zeroheight, GitHub Actions, and automated CSS, JSON, and npm deliverables.
- Led the creation and rollout of a React/TypeScript component library and design system used across multiple internal and public-facing city applications.
- Implemented accessible component patterns aligned with WCAG, ARIA, keyboard navigation, and semantic HTML best practices.
- Developed @cityofportland/component-library (React + USWDS/PGOV) with accessible, reusable components published to npm.
- Built and maintained npm publishing workflows including semantic versioning, automated builds, changelogs, and versioned releases for downstream teams.
- Owned frontend testing strategy for the component library, writing unit tests with Jest and React Testing Library.
- Implemented visual snapshot and accessibility testing to guard regressions before rollout.
- Created Storybook documentation, live demos, and training sessions to support design system adoption and self-service usage across departments.
- Established platform governance for reusable components, technical documentation, versioning, implementation standards, and design-to-code parity with UX designers and frontend engineers.
- Used AI tooling such as Cursor to scaffold components, tests, and documentation while manually reviewing and refining the output.
Tech stack
- React
- TypeScript
- Design System
- Design Tokens
- Component Library
- Figma
- Tokens Studio
- Zeroheight
- GitHub Actions
- Storybook
- USWDS
- PGOV
- HTML5
- CSS3/SCSS
- GitHub Workflows
- npm
- pnpm
- Jest
- Vitest
- Playwright
- React Testing Library
- Visual Snapshot Testing
- Accessibility Testing
- WCAG
- 508 compliance
- axe
- CI/CD pipelines