Full portfolio
About, trajectory, case studies, and tooling-the full arc beyond the homepage snapshot.
I've spent 9+ years turning messy requirements into products that work. I do frontend (React, TypeScript, Next.js) and backend (Node.js, APIs), and I care a lot about design systems, component libraries, and the tools and docs that help teams move fast.
I sit between design and engineering: I make sure the code is accessible and actually ships. I've run design-system rollouts and built things like an MCP server for Cursor so we catch issues before review. I like working in small teams where everyone cares about the product.
I'm good at leading, working with others, and mentoring. I care about stable releases and making hard stuff simple so everyone can contribute.
Impact and outcomes, not just responsibilities.
AlwaysGeeky Games
Emplifi
ControlTech Startup Studio
Rayvarz Inc.
Outcome first, then how the work was structured—technical signals up front, full stack on request. Serious write ups, not a gallery.
Turned vague, chatbot-style suggestions into specific, auditable recommendations that stay in sync between the dashboard and PDF reports.
Designed and implemented an AI recommendations pipeline that planners, developers, and auditors can trust—grounded in the same zoning rules, feasibility math, and datasets as the rest of MapBylaw.
Best for: AI product engineering · Frontend architecture
Technical signals
Early AI recommendations were generic, hard to trace back to inputs, and sometimes drifted from MapBylaw's content policy (no fake or static data, no Montreal-only fallbacks pretending to be real). There was no single typed contract between the Fastify API, React dashboards, and React-PDF reports, so auditing a recommendation meant spelunking across services and documents.
Standardized a strict TypeScript shape for ai_recommendations in the API and database, then consumed it in both the web dashboard and PDF payload builder. Built a narrow context builder that only feeds the model what MapBylaw already knows is true (zoning code, PUM 2050 sector, heritage/climate flags, feasibility scores, computed scenarios). Wired the flow through OpenAPI + Zod validation, added tests so malformed recommendations fail fast, and codified the constraints in REPORTS_DATA_AUDIT.md, ARCHITECTURE.md, IMPLEMENTATION_STATUS.md, and API_AUDIT.md.
Specific, auditable recommendations that line up between dashboard and PDF (e.g., “Scenario B exceeds the Plateau conversion cap; keep GFA under 200 m² or switch to a plex + ADU strategy”) and evolve automatically as rules and incentives change—without hand-editing report copy.
More outcomes
Single design system (@mapbylaw/ui) for web and admin so toasts, shell, and tables behave the same everywhere.
Product engineering for a map-first property insights platform: a shared UI across web and admin, feature-based architecture, and a type-safe API and PDF report system.
Best for: Design systems · Frontend architecture
Technical signals
Web and admin needed a consistent design language and patterns, while API, PDF report, and frontend all evolved with new bilingual reports, consent-gated analytics, and internal tooling.
Built a shared component library (@mapbylaw/ui) for both apps, organized by feature with barrel exports and path aliases (components/, features/, utils/) for clean imports. Used OpenAPI 3.0 and Zod for API contracts, plus React-PDF with a typed payload builder and shared report components so the 10-page bilingual report stays single-source.
A single design language and predictable DX: API docs and types drive the frontend, and report content policy (no static/fake data) is enforced via shared types and audit.
More outcomes
Unified look and accessibility across products so new features feel native no matter which Web3 surface they land on.
Built and maintained the design system for our Web3 products, then used it to ship the marketplace and login flows from design to production. Accessible (WCAG), consistent UI, solid API and auth, deployed on AWS.
Best for: Design systems · Frontend architecture
Technical signals
Teams were building their own components and we needed marketplace and login experiences that matched design, integrated with Web3 APIs, and felt fast—not fragile or inconsistent.
Established a Storybook-driven design system with WCAG-compliant components and wired CI (GitHub Actions) to run lint, visual diff, and a11y checks on every PR. Built marketplace and login in React/Next.js/Vite on top of that system, smoothing loading and error states and integrating cleanly with APIs and auth.
A unified look and accessibility baseline across products. CI catches visual/a11y regressions before merge, and marketplace and login stayed stable under real Web3 traffic.
More outcomes
A/B tests and analytics showed better retention and a noticeably snappier UI.
Built data-heavy dashboards with smooth motion (GSAP) and D3.js charts, tuned to run well inside mobile webviews and embedded contexts.
Best for: Performance · Dashboards
Technical signals
Dashboards had to look good, stay legible, and feel smooth inside mobile webviews and embedded surfaces, with real motion design instead of jank.
Used D3.js for charts and GSAP for motion, then profiled and tuned React so a single codebase ran well across webviews and embeds.
A smoother embedded experience and more trustworthy visuals, with data showing better retention and fewer drop-offs.
More outcomes
Reached 99.9% deployment stability with Jest, Playwright, and GitHub Actions in the loop.
Built several startup products end to end, focusing on code splitting, lazy loading, and CDN-backed assets, plus PWAs with offline support and caching from scratch.
Best for: Frontend architecture · Performance
Technical signals
Products had to load quickly on modest devices, work offline, and deploy without breaking core flows.
Split code and lazy loaded heavy paths, moved assets behind a CDN, and built PWAs with service workers and caching. Added Jest, Playwright, and GitHub Actions so regressions were caught before reaching users.
99.9% uptime on releases, faster first load, and key flows that continued to work offline for early adopters.
More outcomes
Automation I run in the editor and in CI—early feedback, smaller reviews, same standards as the rest of my work.
Custom MCP integration so lint, types, and tests run inside Cursor. Issues surface before you open a PR—same checks as CI, faster loop for the author.
Format, types, and tests in the pipeline so regressions are caught before merge. Pairs with editor-side tooling: two layers of the same quality bar.
How I use the stack in practice, trade-offs and scale, not just keywords.
I scale React, Next.js, Vue 3, and Nuxt 3 apps with clear structure, libraries, design systems, and tooling so teams don't step on each other.
I use Zustand, Redux, Pinia, and React Query so complex UIs (dashboards, real-time) stay predictable and easy to debug.
I build GSAP timelines, D3.js charts, and 3D/WebGL when motion and data viz are part of the product, not just eye candy.
I run design systems in Storybook, keep components WCAG-ready, and use CI to block a11y and visual regressions.
I design and wire up Node.js, REST, and GraphQL so the frontend gets clear contracts and good error handling.
I set up Jest, Playwright, and Sentry so we catch bugs in CI and fix production issues fast.
I ship with AWS, Docker, and GitHub Actions. I also build custom tooling (like the MCP for Cursor) so feedback is fast.
CORE: I lead, collaborate, and mentor. I care about stable releases and clear communication.
Master's Degree in Computer Information Technology · 2016