JN

Senior frontend engineer in Ottawa

Justin Nguyen

I lead frontend for Fire Products at ESO, where I architected the NERIS Fire Incidents app, modernize legacy Angular, and bring AI into the everyday workflow. After hours I build the things I wish existed.

See the work Email me

Side projects

Three projects, three very different users: a driver who can only glance, a trainer planning a team on their phone, and a developer who needs components that work for everyone. Each demo below is live, so try it.

Car Infotainment UI

What if BMW’s iDrive NBT screen had been designed for fingers instead of a click wheel?

Live 1280 × 480 build, scaled to fit. Tap around, or open it full screen.

I started this years ago as a Bootstrap and jQuery sketch of my ideal car screen. Version 2 is a ground-up rewrite in plain HTML, CSS and JavaScript on a fixed 1280 × 480 canvas, the size of a 10.25" automotive display. It opens from file:// with no build step and runs on a Raspberry Pi in kiosk mode.

The rules: tap targets of at least 10 mm, one accent colour that carries all state, big glanceable numbers, and hardware keys that always get you home, even from inside CarPlay.

  • One event bus keeps the native screens, split screen and CarPlay in sync
  • Canvas maps built once into Path2D with Dijkstra routing over the street graph
  • Every setting works: accent colour, units, balance pad, brightness
  • Direct manipulation: drag the map, scrub tracks, swipe away warnings

Code on GitHub Vanilla JS, Canvas, CSS color-mix(), Web Speech

Side project · React Native · Expo SDK 58

Pokédex

A pocket-sized Pokédex with a Pokémon of the day, a silhouette quiz and a team builder, all running on PokeAPI.

  • 1,000+Pokémon
  • 8Explore hubs
  • 4Trainer tools
  • 5Detail tabs

Try the app below

Built on PokeAPI with Expo SDK 58 and Expo Router. It started as a list and a detail screen and grew into a full companion: a Home tab with a Pokémon of the day, eight Explore hubs of reference data, and four tools for planning a team.

TanStack Query caches everything, so moving between hubs is instant after the first load. On iOS 26 the tab bar is the native floating Liquid Glass; on Android it’s Material bottom navigation.

  • Home: Pokémon of the day, a daily fact, recent views and favourites
  • Explore: types, regions, moves, abilities, items, berries, TMs and natures
  • Tools: team matchups, stat calculator, silhouette quiz and compare
  • Detail screens with About, Stats, Evolution, Moves and Locations, plus Pokémon cries

Code on GitHub React Native 0.88, Expo Router, FlashList, TanStack Query

Live app, best viewed on mobile. Open full screen

Just In Case UI

An accessibility-first React component library. Yes, the name is a pun.

  • In progress
  • v0.3.0
  • 24 components
  • 0 runtime dependencies
  • WCAG 2.2 AA

Every component library I’ve shipped at work taught me the same lesson: accessibility added at the end never quite fits. Just In Case UI starts there instead, with each component specced in OpenSpec before any code is written.

It began with buttons, a text input and a dropdown. It’s now 24 components, from comboboxes and dialogs to pagination and toasts, each checked with axe. Instead of Storybook there’s a lightweight kitchen-sink app, running live below. Try it with only your keyboard.

  • Primary, secondary, tertiary: solid, outlined, text. Destructive gets its own red
  • Native elements first, then the matching WAI-ARIA pattern, with full keyboard support
  • Contrast is tested: every colour pair in the tokens is checked in CI
  • Calm by default: reduced motion and forced colours are both honoured
  • One variable per decision: every colour, radius and space is a --jic-* token
The real components, straight from the library.

Open the kitchen sink React, TypeScript, CSS Modules, Vitest + axe, OpenSpec

Where I’ve shipped

Enterprise SaaS, public safety and high-traffic mobile, with an eye on craft and velocity the whole way.

  1. Senior Lead Front End Developer, Fire Products

    ESO, Ottawa

    to present

    • Architected frontend of newest NERIS Fire Incidents flagship application.
    • Collaborated with various teams on implementation including data team, DBA team, as well as EMS team looking to modernize their apps as well as ensuring proper data sharing and flow.
    • Built custom AI machine learning model for NERIS app using TensorFlow.js. The model studies user behaviours and workflows to further automate and speed up incident reporting times by suggesting often-used value combinations.
    • Teach junior, intermediate, as well as senior developers how to prompt and effectively use AI tooling in Cursor with using Plan mode while executing the builds with cheaper models.
    • Leading overhaul of legacy applications using React, Redux, and Radix stateless libraries for internal component library.
    • Rigorously maintain existing Angular applications ensuring they’re the latest 22 or latest JS maintained by Herodev.

  2. Senior Front End Developer

    ESO, Ottawa

    to

    • Help establish engineering team’s frontend forum to discuss best practices and discoveries among all the teams.
    • Migrated older flagship NFIRS Fire Incidents product from gulp AngularJS to a custom webpack Angular 15 build along with writing extensive Confluence documentation detailing the transition. This allowed 6 different product teams to upgrade their application quickly following said documentation.
    • Work with designers to set Figma design standards.
    • Contribute to component library which is being used by all the modern apps.
    • Aid converting mono repo projects into smaller app services in serverless push to Azure to better automate and scale services.
    • Build E2E and unit tests and help QA team in building tooling for different environments.
    • Coordinate with teams to set a standard code gating framework behind SonarCloud and automated tests.

  3. Senior Front End Developer

    Field Effect Software, Ottawa

    to

    • Lead the front end build of Cyber Range using a new, ground-up React framework to replace their original UI built in GWT.
    • Used a combination of Redux for state management and various TanStack tools for data grids, routing, etc.
    • Used WebSockets to update many UI states as VMs in Cyber Range update OS and network statuses live.
    • Heavily contributed to company component library.
    • Collaborated with UI designers and developers to make decisions on dependencies, tooling, and frameworks to be used company-wide.
    • Implemented unit (Jest/Enzyme) and E2E (Webdriverio) testing suite and deployment automation via Bamboo and BitBucket.

Toolkit

Enterprise Angular and .NET stacks at work, and React wherever I’m leading greenfield builds and migrations.

  • TypeScript & JavaScript
  • Angular & AngularJS
  • React & React Native
  • C# & .NET
  • Azure DevOps
  • Node.js
  • Figma
  • Magic Patterns
  • E2E & unit testing
  • TensorFlow.js
  • Cursor, Claude Code & Copilot