Skip to content
Badr Abouhilal

HI, I'M BADR

Full-StackEngineer

I build web and mobile products end to end: the interface, the services behind it, and the cloud it runs on. I also build the agent workflows my teams review, test, and ship with.

About / bio

Full-stack engineer, frontend roots.

I'm a senior full-stack engineer with 10+ years building fast, accessible web and mobile apps. I work across the whole stack: React and Vue on the front end, Python and Node behind them, and the cloud they run on. I care about strong TypeScript, thoughtful testing, and a user-centered mindset. I like working with product teams to deliver measurable outcomes, and mentoring other engineers along the way.

Years shipping
10+
Users reached
1M+
Teams shipped with
7
Fewer runtime bugs
-45%
Feature delivery speed
2.1×

Tools & stack

Languages
  • TypeScript
  • JavaScript
  • Python
  • HTML
  • CSS
  • Sass
  • SQL
  • Bash
Frameworks
  • Vue
  • React
  • Next.js
  • Nuxt.js
  • FastAPI
APIs
  • ElysiaJS
  • Express
  • FastAPI
  • Bun
  • REST API
  • Socket.IO
  • Stripe
Data
  • Prisma
  • SQLAlchemy
  • Alembic
  • Pydantic
  • PostgreSQL
  • MySQL
  • Redis
  • Firebase
AI & LLMs
  • LangChain
  • OpenAI
  • Anthropic
  • Gemini
  • Mistral
  • Vertex AI
  • ElevenLabs
  • Azure Speech
Spoken
  • Arabic
  • French
  • English

AI / how I build

Working with agents

I don't just use AI tools. I build the workflow around them, so custom agents and skills handle the routine passes: drafting specs, reviewing pull requests, running smoke tests. The judgement calls stay with me. Every agent is scoped to the conventions the codebase already documents, so what comes back is something I can actually review.

1.

Spec first

  • Agents draft a tech spec from the feature context and the codebase itself
  • Specs get reviewed and approved before a line is implemented
  • Implementation follows the approved spec through phased roadmaps and logs
2.

Review as a gate

  • A review agent checks every pull request against the repo's documented conventions
  • Findings post as inline comments, but only once I've approved them
  • The conventions live in the repo, so the agent and the team read the same rules
3.

QA on demand

  • Smoke suites run end to end against deployed environments
  • Failures are triaged and reported back to the team automatically
  • Suites get updated as the API changes, so they stay worth running
4.

Written context

  • Domain rules written per subsystem: API shape, migrations, conventions
  • A dedicated agent keeps the handbook and docs consolidated
  • Design-system and UX skills keep generated interfaces on brief
Tooling
  • Claude Code
  • Claude Design
  • Antigravity
  • Gemini CLI
  • Warp
  • Custom agents
  • Custom skills
  • MCP

Case studies

Selected work

Three builds I owned end to end, from architecture and performance through to shipping.

Medzair screenshot

01 / Selected work

Medzair

Make medical recruitment faster to run, with tools that handle the busywork instead of the hospitals doing it by hand.

-45%
Fewer runtime bugs
↑ 2.1×
Feature delivery speed
  • Next.js
  • React Native
  • Nuxt.js
  • Pinia
  • Zustand
  • TypeScript
  • Node.js
Visit project
Poliigon screenshot

02 / Selected work

Poliigon

Move a busy asset marketplace off Laravel and onto Nuxt.js without losing its search rankings or its speed.

Green
Core Web Vitals
-28%
Time to Interactive
  • Nuxt.js
  • PostCSS
  • Vitest
  • Pinia
  • TypeScript
Visit project
Klingit screenshot

03 / Selected work

Klingit

Rebuild a creative-services platform off WordPress, keeping the SEO it had earned and adding the motion the brand needed.

-30%
Page speed
+18%
Time on site
  • Nuxt.js
  • Vue.js
  • WordPress REST API
  • GSAP
  • JavaScript
  • SCSS
Visit project

Approach

How I Work

Great software isn't just about shipping features. It's about building systems that are maintainable, secure, and pleasant to work in. I focus on long-term quality, so teams can move fast without bracing for what breaks next.

a.

Code Quality

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

Testing First

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

Design Systems

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

Performance

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

Refactoring

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

Security & Accessibility

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

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 / let's talk

Let's
build it
abouhilal.badr@gmail.com
GitHubLinkedIn