Skip to content

Badr Abouhilal

Senior Frontend Developer

I help teams turn complex ideas into fast, reliable web and mobile apps. My focus is on performance, accessibility, and developer experience, so products ship quickly and scale with confidence.

Let’s work togetherSee my work
VueReactNext.jsNuxt.jsTypeScriptPiniaZustandVitestStorybookMSWESLintPrettierCI/CDReact NativeExpoElysiaJSREST APIPrismaMySQLOpenAI APISentry

My bio & experiences

About

Portrait of Badr Abouhilal

I'm a Senior Frontend Engineer with 7+ years building fast, accessible web and mobile apps. I care about strong TypeScript, thoughtful testing, and a user centered mindset. I love working with product teams to deliver measurable outcomes, and mentoring other engineers to help them grow.

  • Quality from day one: types, tests, a11y, perf budgets.
  • Design systems for consistency across web & mobile.
  • Measurable outcomes over vanity work.
  • Clear and async communication with preview URLs.
  • 2024-07 — 2025-08
    MedZair
    Full Stack Developer

    Built cross-platform medical applications (web + mobile) using TypeScript, Nuxt.js, Next.js, Node.js, MySQL, and React Native. Focused on security and scalability to ensure safe data handling in production environments.

    • Next.js
    • TailwindCSS
    • Nuxt.js
    • TypeScript
    • Node.js
    • MySQL
    • Prisma
    • Rest API
    • MSW
    • Vitest
    • Storybook
    • ESLint
    • Prettier
    • CI/CD
    • React Native
    • Expo
  • 2023-05 — 2024-06
    Checkin.com
    Frontend Developer

    Developed and optimized frontend features for a SaaS platform serving thousands of daily active users. Improved UI performance and implemented best practices in frontend architecture for maintainability and speed.

    • Vue.js
    • TypeScript
    • Vuex
    • Unit Testing
    • E2E Testing
  • 2022-10 — 2023-05
    Poliigon
    Frontend Developer

    Delivered responsive, high-performance UIs with JavaScript, Nuxt.js, and Vue.js. Contributed to a digital assets platform with over 1M monthly downloads, improving user experience and engagement.

    • Nuxt.js
    • TypeScript
    • SCSS
    • Vuex
    • Unit Testing
    • E2E Testing
  • 2021-10 — 2022-08
    Proxify
    Full Stack Developer

    Worked on full-stack applications with Nuxt.js, supporting clients in delivering scalable, production-ready projects. Ensured quality across the stack with a focus on reliability and developer experience.

    • Nuxt.js
    • Vue
    • GSAP
    • WordPress REST API
    • SCSS
  • 2021-08 — 2022-05
    Axelerant
    Vue.js Developer

    Specialized in building modular, reusable Vue.js frontends. Collaborated effectively with globally distributed teams to ship features quickly and consistently.

    • Vue.js
    • React.js
    • TypeScript
    • TailwindCSS
  • 2020-06 — 2021-02
    1450 Factory
    Full Stack Developer

    Collaborated directly with founders to design and deliver multiple applications. Built a Slack bot to track team productivity and mood, and developed custom WordPress plugins focused on optimizing user experience.

    • Vue.js
    • Nuxt.js
    • Node.js
    • Express
    • MongoDB
    • SCSS
    • WordPress
    • REST API
    • GitHub Actions
    • MSW
    • Vitest
    • Storybook
    • ESLint
    • Prettier
    • CI/CD
    • Slack bots

    Approach

    How I Work

    I believe great software isn't just about shipping features, it's about building systems that are maintainable, secure, and enjoyable to work with. My focus is on long term quality so teams can move fast with confidence.

    Code Quality

    • Strict TypeScript everywhere (types as contracts)
    • ESLint/Prettier + pre-commit hooks
    • CI gates for format, lint, types, tests

    Testing First

    • Behavior-first unit/component tests
    • MSW for realistic API mocks
    • Visual & a11y checks via Storybook

    Design Systems

    • Composable UI primitives & tokens
    • Storybook-driven states/variants
    • Shared libraries across apps

    Performance

    • Code splitting & dep hygiene
    • Perf budgets tracked in CI
    • Image/font optimization + CWV

    Refactoring

    • Small, safe, iterative changes
    • Extract composables/hooks
    • Clear migration plans & docs

    Security & Accessibility

    • Secure defaults in reviews & CI
    • a11y-first components & flows
    • Monitoring & error budgets

    Selected work

    Case Studies

    Medzair preview

    Medzair

    Next.jsReact NativeNuxt.jsPiniaZustandTypeScriptNode.jsPrismaMySQLOpenAI APIVitestSentryMSWStorybookDetox
    • -45%
      Fewer runtime bugs
    • ↑ 2.1×
      Feature delivery speed
    Goal
    Optimize the medical recruitment process through intelligent tools and simplified management.
    What I owned
    Lead frontend (admin + hospitals panel, mobile app).
    Decisions
    Stack selection, architecture, tooling, testing, deployment, perf, accessibility, security, scalability.
    Outcome
    Faster iteration, fewer runtime bugs, stable flows, reusable endpoints, test confidence, snappy performance.
    Poliigon preview

    Poliigon

    Nuxt.jsPostCSSVitestPiniaTypeScript
    • Green
      Core Web Vitals
    • -28%
      Time to Interactive
    Goal
    Move from Laravel to Nuxt.js to build a modern, responsive, and user-friendly website.
    What I owned
    Led frontend development and code structure.
    Decisions
    Stack selection, architecture, tooling, testing, perf optimization.
    Outcome
    Responsive, modern, user-friendly website with fast UX.
    Klingit preview

    Klingit

    Nuxt.jsVue.jsWordPress REST APIGSAPJavaScriptSCSS
    • -30%
      Page speed
    • +18%
      Time on site
    Goal
    Rebuild Klingit’s creative service platform from WordPress into a modern, SEO-friendly, animation-rich Nuxt.js site.
    What I owned
    Migrated to Nuxt.js, integrated WordPress REST API backend, and implemented GSAP-driven animations.
    Decisions
    Adopted Nuxt.js for SSR & SEO, retained WordPress REST API as headless CMS, used GSAP for motion, optimized animation performance with budgets.
    Outcome
    A fast, SEO-optimized site with simplified content management and highly engaging animations, boosting user trust and engagement.

    How i keep quality high

    Testing & Tooling

    Testing

    • Vitest + Testing Library for unit & component coverage
    • MSW for reliable API mocks (no flaky tests)
    • Detox for RN end-to-end flows
    • Storybook snapshots for visual & a11y checks

    Tooling & DevOps

    • Strict TS config + ESLint/Prettier enforced via CI
    • Code splitting + performance budgets
    • Automated Prisma migrations & seed
    • Sentry + OpenReplay for monitoring

    Performance

    • Lighthouse budgets in CI
    • Bundle analyze & dependency hygiene
    • Nuxt/Next image & font optimization
    • Web Vitals tracking

    CI/CD

    • Preview URLs per PR
    • Typed checks + tests as required status
    • Conventional commits + changelogs
    • Auto-deploy on main with health checks

    Quality Gates

    • Pre-commit hooks (lint-staged)
    • a11y checks in Storybook
    • Security linting (npm audit / snyk)
    • Error budgets & dashboards

    Data & DX

    • Prisma schema review rules
    • DB seed scenarios for demos
    • Local parity docker compose
    • API contracts mocked with MSW

    Contact

    Get in touch

    or email me directly