UI/UX Engineer | Vue.js / Next.js / JavaScript | Water-Tech SaaS Application

UI/UX Engineer | Vue.js / Next.js / JavaScript | Water-Tech SaaS Application We are building regulation-aligned SaaS for civil engineers in the water and wastewater sector. The product is a browser-based engineering workspace with four work modes, a geospatial map interface, a real-time analysis pipeline, and a structured design system. It is in active development, moving toward a commercial launch. We need a UI/UX engineer who works at the intersection of design and implementation. Someone who can read a design system, build components to spec, and also flag when a design decision does not hold up in the browser. This starts as a scoped project with a clear path to an ongoing engagement for the right person. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ THE PRODUCT ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ The workspace serves licensed civil engineers running hydrology and hydraulics studies. The four work modes are Audit, Design, Collaboration, and Reporting. The front end is production-grade, fully designed, and documented. Backend integration is the current development priority, and this role works at that intersection: building components, refining the UI as backend contracts are wired, and holding the front-end quality bar as the product moves toward launch. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ WHAT YOU WILL WORK ON ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Backend integration work A documented integration backlog defines the front-end contracts that need connecting to real backend endpoints. Each item has a clear recipe. You work through them in priority order alongside the backend team, one contract at a time. Interface depth and polish Icons for map layer types (pipes, basins, catchments), each needs to read clearly at small sizes on both light and dark map backgrounds. A usage counter tied to user plan data. Module indicators in the application header. A mobile strategy for the public landing page. Accessibility contrast validation against WCAG AA. Front-end quality The codebase has a full automated test suite. Part of this role is helping raise the CI bar so tests run on every pull request before backend work scales across the team. Known cleanup tasks A handful of documented interface edge cases to resolve, and a pre-launch sweep to confirm every front-end integration point is either connected, hidden, or formally cut. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ THE STACK ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Application: Vue.js with a documented design system and a full workspace guide Marketing site: Next.js Map: geospatial SDK with plugin integration for major engineering tools The codebase is well-documented. A developer or coding agent can onboard from the shipped docs without hand-holding. Framework flexibility: strong candidates with React, Nuxt, Svelte, or another modern JS framework are welcome. We will consider anyone who can demonstrate they ramp on an unfamiliar codebase methodically. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ YOU ARE THE RIGHT FIT IF ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ✔ You have shipped a data-heavy or map-based application interface ✔ You can read a design system document and build to it without drift ✔ You understand the difference between UI-level gating and backend enforcement, and you build accordingly ✔ You are comfortable working against a documented integration backlog with clear contracts and recipes ✔ You flag problems in writing before they become blockers ✔ You can hold quality standards while the team moves fast on backend development ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ NOT THE RIGHT FIT IF ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ✘ You have only worked on marketing sites or landing pages this is an application, not a page ✘ You need a product manager to define every task before you start ✘ You conflate UI-level gating with backend security ✘ You are not comfortable reading and contributing to technical documentation ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ HOW TO APPLY — READ BEFORE SUBMITTING ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Answer all three in your proposal. Generic openers are ignored. 1. Describe a component or interface you built on a data-heavy or map-based application. What was the design constraint, what was the hardest front-end decision, and what would you do differently? 2. How do you approach raising the CI test bar on an active codebase without blocking the team mid-sprint? 3. What JavaScript framework do you know best, and what does ramping on an unfamiliar framework look like for you in practice? Include a link to a live application or a private repo you can walk us through. Marketing-site-only portfolios will not move forward. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ SKILLS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Vue.js · Next.js · JavaScript · TypeScript · SaaS Application UI · Design Systems · Geospatial / Map UI · Component Architecture · CI/CD · Accessibility (WCAG) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ If you read "documented integration backlog with clear recipes" and immediately wanted to see what was in it, you are probably the right person.