Summary

Software Engineer with 5+ years of experience building and maintaining production web applications using React, Next.js, Vue.js, Nuxt, and TypeScript.

Currently working at Serva on a multi-tenant fleet management SaaS platform. Previously, I spent five years at Baianat contributing to 8+ production systems, including SaaS platforms and role-based dashboards. During that time, I helped reduce average page load times by 40% and achieved Lighthouse scores of 95–100 across major products.

My experience covers application development, API integration, frontend architecture, testing, and performance optimization.

Outside my professional work, I build developer tools and AI-related applications, including a published Nuxt CLI, an open-source Directus extension integrating multiple LLM providers, and a FastAPI image-classification service developed as part of a university team project.

Experience

Software Engineer

Serva – Jul 2026 – Present

  • Software Engineer on a multi-developer team building a multi-tenant fleet and mobility management SaaS platform with React 19, TypeScript, Vite, RTK Query, MUI, and Tailwind CSS. The codebase has separate Tenant and Admin applications with 30+ feature modules, 45+ routes, and 60+ API modules.
  • Build and maintain features against REST APIs, mainly in vehicles (onboarding, bulk import, documents), contracts and invoicing, ride and booking flows, wallet top-ups and payment links, accounting, and reports.
  • Work within the shared architecture: auto-discovered lazy-loaded routes, a factory-based RTK Query API layer with cache tagging, and feature-colocated modules (api, ui, i18n). Build permission-gated screens on top of the existing role-based access control (route guards and element-level gates).
  • Build screens in Arabic and English with RTL/LTR layout, centralized i18n namespaces, and light/dark theme tokens.
  • Contribute to the shared component library (100+ Storybook stories with accessibility checks, Vitest and Testing Library tests), published as a versioned package through GitHub Actions, and to the Playwright + TypeScript automation suite (80+ spec files covering API and UI) with Docker, CI, and Allure reporting.
  • Work with product, design, and backend engineers to ship production features.

Frontend Engineer

Baianat – Jun 2021 – Jun 2026

  • Led frontend development on 8+ production systems and reduced average page load time by 40% through SSR and performance optimization.
  • Achieved Lighthouse performance scores of 95–100 across major products, including 100 on Desktop and an LCP of ~0.6s on the Tatmeen healthcare platform, through code-splitting, lazy loading, and asset optimization.
  • Architected scalable UI for role-based, multi-dashboard platforms serving 3+ user roles per application.
  • Integrated GraphQL and REST APIs across 6+ projects, improving data-fetching efficiency and reducing over-fetching.
  • Worked with cross-functional teams of 5+ engineers to take 4 products from zero to production.
  • Mentored junior developers, conducted code reviews, and helped establish frontend architecture standards for the team.

Education

Delta University

Bachelor of Artificial Intelligence (in progress)

Expected graduation: 2028

Skills

  • Programming Languages: TypeScript, JavaScript (ES6+), Python, Java, C#, HTML5, CSS3, SASS
  • Frontend Development: React, Next.js, Vue.js, Nuxt.js, Redux Toolkit, RTK Query, Pinia, Vuex, Material UI, Tailwind CSS, UnoCSS, Responsive Design, Accessibility, PWA
  • Backend Development: FastAPI, Node.js (CLI tooling), Nuxt/Nitro server routes, REST API Integration and Design, GraphQL, JWT Authentication, Directus (headless CMS)
  • AI & Machine Learning: TensorFlow/Keras, MobileNetV2 image classification (model integration and serving through an API)
  • Generative AI: LLM API integration (Claude, OpenAI, Gemini, Mistral, DeepSeek), local LLMs with Ollama, prompt templating, bilingual Arabic/English AI chat
  • Databases & Data: SQLite, SQLAlchemy, Directus data modeling and permissions
  • Architecture & Engineering: Multi-Tenant SaaS, Design Systems and Component Libraries, RBAC, SSR, i18n (RTL/LTR), Code Splitting, Core Web Vitals and Performance Optimization, Code Review, Mentoring
  • Testing & DevOps: Playwright (E2E and API), Vitest, Testing Library, Cypress, pytest, Allure, Git, GitHub Actions (CI/CD), Docker, Vite, Storybook, npm publishing
  • Spoken Languages: Arabic (Native), English (Intermediate)

Projects

nuxtkit-pro – Nuxt CLI Scaffolding Tool

Role:Creator & Maintainer (personal project)

Tech Stack:Node.js, TypeScript, CLI, Nuxt 4, File System, Scaffolding Architecture

  • Built a production-ready CLI tool that scaffolds scalable Nuxt 4 applications with a modular architecture.
  • Implemented a template system (default, dashboard, landing, SaaS) with feature-based composition.
  • Designed plug-and-play features (Auth, API layer, Tailwind, Linting) with dynamic merging logic.
  • Automated project setup, including dependency installation, Git initialization, and environment configuration.
  • Published and distributed via npm as a reusable developer tool.
View on npm | GitHub Repo

directus-extension-ai-field – AI Content Generation for Directus

Role:Creator & Maintainer (personal open-source project, published on npm)

Tech Stack:TypeScript, Vue 3, Directus 11 extension (interface + endpoint), Claude, OpenAI, Gemini, Mistral and DeepSeek APIs

  • Built a Directus extension that adds a Generate button to any string or text field and fills it with output from an LLM.
  • Integrated five providers (Claude, GPT-4o mini, Gemini 2.0 Flash, Mistral Small, DeepSeek Chat) behind one server-side endpoint.
  • Added prompt templates that reference other fields in the same item ({{fieldName}}), tone control, regeneration, and a history of the last three results.
  • Kept provider API keys on the server; the endpoint requires Directus authentication.
View on npm | GitHub Repo

calorie-chatbot – AI Nutrition Coach

Role:Developer (personal project)

Tech Stack:Python, FastAPI, SQLAlchemy, SQLite, JWT, Ollama (llama3 / mistral), Nuxt, Vue 3, Tailwind CSS, pytest

  • Built a bilingual (Arabic/English) nutrition coaching app with a FastAPI backend and a Nuxt frontend.
  • Implemented JWT registration and login, meal logging, progress tracking, and a persistent user profile.
  • Connected the chat to a local LLM through Ollama: each prompt includes the user's profile and recent conversation history, and the reply language follows the user's message.
  • Implemented a step-by-step onboarding flow with a rule-based parser (goal, weight, height, age, activity) that feeds plan calculation.
  • Wrote pytest tests for the API and nutrition logic.
GitHub Repo

Digital Ophthalmology Assistant – Eye Disease Classification

Role:Team member (Delta University team project): FastAPI inference service, image validation, and tests

Tech Stack:Python, FastAPI, TensorFlow/Keras (MobileNetV2), Pillow, NumPy, SQLAlchemy, SQLite, pytest, Docker

  • University team project (Faculty of Artificial Intelligence, Delta University): a web app that classifies anterior eye diseases from uploaded images. Model training was not part of my contribution.
  • Built the FastAPI inference service: the Keras model loads once (thread-safe, with a warm-up call), and the preprocessing pipeline matches the one used in training.
  • Implemented image validation for upload format, dimension limits, and file integrity.
  • Added confidence, margin, and entropy thresholds so low-confidence inputs return "unrecognized" instead of a forced diagnosis, and logged predictions to a database.
  • Wrote pytest tests for the inference service and the prediction endpoint.
GitHub Repo

Tatmeen – Online Mental Health Platform

Role:Frontend Developer

Tech Stack:Vue.js, Nuxt.js, TypeScript, SCSS, Pinia, GraphQL, i18n, PWA

  • Built a high-performance, SEO-optimized frontend using Nuxt.js (SSR).
  • Achieved a Lighthouse performance score of 100 (Desktop) and 96 (Mobile) by optimizing Core Web Vitals (LCP ~0.6s).
  • Designed a secure and scalable frontend architecture using code-splitting and lazy loading to handle sensitive healthcare data.
  • Integrated UI for medical prescriptions, lab test requests, and psychological assessments.
Visit website

ClassesHub – E-Learning Ecosystem

Role:Frontend Developer

Tech Stack:Vue.js, Nuxt.js, TypeScript, SCSS, Pinia, GraphQL, i18n, PWA

  • Built a full course builder system from scratch with dynamic content and assessment tools.
  • Developed multi-role dashboards for students, instructors, and admins with tailored experiences.
  • Implemented real-time data flow between users for interactive learning.
  • Integrated subscription and payment flows with optimized performance across the platform.
Visit website

Furnish AI – Furniture Restoration Studio (in progress)

Role:Creator (personal project, frontend prototype)

Tech Stack:React, Vite, React Router

  • Building the frontend for a furniture restoration, redesign, and workshop marketplace: an art-directed, bilingual (English/Arabic) homepage.
  • Built a working studio prototype that guides the user through a restoration brief, with projects stored on the device.
  • Current scope is frontend only. The FastAPI/PostgreSQL backend and AI previews are planned and not implemented yet.
Live demo (source repository is private)

Maknon

Role:Full-Stack Developer

Tech Stack:Vue.js, Nuxt.js, TypeScript, SCSS, Pinia, GraphQL, i18n, PWA, Directus

  • Built the full marketing website from scratch, including UI design and frontend implementation.
  • Configured and managed the Directus backend, including data modeling, permissions, and content structure.
  • Implemented animations and micro-interactions to enhance user experience.
Visit website

FRA Sandbox – Financial Regulatory Authority

Role:Frontend Developer

Tech Stack:Vue.js, Nuxt.js, TypeScript, SCSS, Pinia, GraphQL, PWA

  • Developed frontend modules for the public website, user portal, and admin dashboard.
  • Implemented role-based access control (RBAC) for multiple user types.
  • Designed a scalable architecture aligned with financial regulatory requirements.
Visit website

Baiitna – Property Service Platform

Role:Frontend Developer

Tech Stack:Vue.js, Nuxt.js, TypeScript, SCSS, Pinia, GraphQL, i18n, PWA

  • Built the full platform from scratch (main website and 2 dashboards).
  • Developed the subscription system and provider onboarding flow.
  • Implemented registration forms for service providers.
  • Designed role-based dashboards for admins and providers.
Visit website

Caterk – Embrace Togetherness

Role:Frontend Developer

Tech Stack:Vue.js, Nuxt.js, TypeScript, SCSS, Pinia, GraphQL, i18n, PWA

  • Built the main website and the registration and onboarding flow from scratch.
  • Developed a full order system with reviews and tier-based pricing.
  • Implemented a menu builder with modifier groups and an add-ons system inside the dashboard.
  • Built business dashboard features for managing products, orders, and provider accounts.
Visit website

Leiaqa – E-Learning Platform

Role:Frontend Developer

Tech Stack:Vue.js, Nuxt.js, TypeScript, SCSS, Pinia, GraphQL, i18n, PWA

  • Developed a course builder, a dynamic quiz system, and subscription flows.
  • Built analytics dashboards for tracking user activity and performance.
  • Improved architecture and data handling using GraphQL.
Visit website

Nexcent – Membership Management Landing Page

Role:Frontend Developer (personal project)

Tech Stack:Next.js 16, Tailwind CSS v4, TypeScript

  • Built a fully responsive landing page from a Figma design using the Next.js App Router.
  • Implemented scroll-triggered animations with IntersectionObserver and countdown stats.
  • Configured SEO metadata, OG image generation, sitemap, and JSON-LD structured data.
  • Set up Tailwind CSS v4 with custom design tokens matching the original design system.
Visit website | GitHub Repo | Figma Design