Frontend Engineering

By Arash Sarfehjou
Picture of the author
Published on
image alt attribute

What I Do

I craft high-performance, accessible, and maintainable user interfaces using modern frontend technologies. From sleek marketing sites to scalable, component-driven web applications, I deliver pixel-perfect, production-ready code that meets both design and business goals.

My stack includes TypeScript, React, Next.js, Tailwind CSS, Styled Components, and deployment platforms like Vercel. I also integrate tightly with CI/CD pipelines and development infrastructure to ensure smooth delivery and maintainability at scale.

How I Work

I bridge the gap between design, engineering, and operations — translating creative vision into scalable, performant, and accessible frontend solutions.

  • Translate Figma to Code: Build responsive, cross-browser UIs that align precisely with the design system and UX patterns.
  • Optimize for Quality: Focus on performance (lazy loading, code splitting), accessibility (WCAG, semantic HTML), and scalability (modular components, design systems).
  • Code Craftsmanship: Write clean, typed, well-documented code with TypeScript, enforced by ESLint and formatted with Prettier.
  • Collaborative Development: Partner closely with designers, PMs, and backend teams to iterate quickly and ship with confidence.

Build Tools & Infrastructure

Modern frontend engineering doesn’t stop at writing UI code — I actively manage build and deployment infrastructure to support velocity and quality at scale.

  • CI/CD Pipelines: I design and maintain automated workflows using Azure DevOps — ensuring code is linted, tested, built, and deployed reliably across environments. Pipelines include:

    • Pull request validations (build + lint + unit tests)

    • Production and preview environment deployments

    • Static analysis and code quality gates

  • Build Optimization: Use tools like Webpack, esbuild, or Vite (depending on project setup) to ensure fast bundling, tree-shaking, and optimal asset delivery. Employ performance budgeting, lazy loading, and CDN strategies.

  • Environment Management: Configure and manage environment variables, secrets, and app settings securely through Azure DevOps Pipelines and Vercel environments for seamless transitions between dev, staging, and production.

  • Monitoring & Feedback Loops: Integrate tools like Azure Application Insights, Lighthouse CI, or Sentry for visibility into runtime behavior, performance regressions, and client-side errors — creating a feedback loop that informs ongoing improvements.

Technologies

  • Languages & Frameworks: HTML5, CSS3, JavaScript (ES6+), TypeScript, React, Next.js

  • Styling: Tailwind CSS, Styled Components

  • Build Tools: Webpack, Vite, Babel, PostCSS, esbuild

  • DevOps & CI/CD: Azure DevOps Pipelines, GitHub Actions, Vercel

  • Quality & Tooling: ESLint, Prettier, Storybook, Jest, Playwright

  • Monitoring: Application Insights, Lighthouse, Sentry

AboutServicesProjectsContact