Portfolio

Featured Projects

Technical breakdown of production systems I've architected and maintained. Due to NDAs, focus is placed on system logic and architectural challenges.

01
Lead Frontend Engineer

Yosan - Public Procurement & Budget ERP

Desktop Budget Execution & Expenditure Lifecycle System

Desktop Client (Tauri v2)
Native Windows Bundle

Core Implementation

  • 1Engineered a lightweight desktop client using Tauri v2, React 19, and Bun, featuring native OS file dialogs and background auto-updating via GitHub releases.
  • 2Modeled the Moroccan public expenditure pipeline: procurement act creation, supplier commission evaluation, delivery validation, tax withholdings (TVA/IS), and Treasury dispatch (Bordereau TrĂ©sor).
  • 3Implemented arbitrary-precision financial calculations using BigInt integer-cent conversion to prevent IEEE 754 floating-point drift in budget allocations.
  • 4Built a hierarchical Excel ingestion engine parsing 4-level budget structures (Chapitre > Article > Paragraphe > Ligne) with line-by-line syntax validation and client-side procurement PDF generation.

Tech Stack

Tauri v2React 19TypeScriptTailwind CSS v4RustBunxlsxjsPDF

Outcome

Replaced manual spreadsheet-based budget tracking with a sub-15MB native desktop ERP, enforcing procedural validation across public procurement acts and treasury disbursements.

02
Lead Full-Stack & Systems Engineer

SmartHire

AI-Assisted Candidate Screening & Evaluation Engine

Web Application
FastAPI Microservice

Core Implementation

  • 1Engineered a decoupled two-tier evaluation system: LLM handles categorical criteria matching with exact text citations, while a deterministic formula computes weighted applicant scores (skills, experience, education).
  • 2Built document deduplication using SHA-256 file checksums and in-memory extraction locks to eliminate redundant LLM calls on concurrent uploads.
  • 3Implemented candidate identity resolution with phone/email normalization and automated cross-job conflict detection.
  • 4Integrated local PDF text extraction via WebAssembly/unpdf and streaming NDJSON endpoints for interactive CV querying and gap-focused interview prep generation.

Tech Stack

Next.jsTypeScriptPythonFastAPIPostgreSQLPrismaOllamaTailwind CSS

Outcome

Eliminated arbitrary LLM scoring variance by separating semantic classification from mathematical evaluation, providing recruiters with deterministic candidate rankings and verified source citations.

03
Lead Full-Stack Engineer

Project Qarawiyyin

University Management System

Admin Desktop
Student Web Portal
Professor Web Portal

Core Implementation

  • 1Engineered component-level RBAC and real-time state synchronization via WebSockets.
  • 2Module-based architecture covering HR, Pedagogy, Exams, and Payments.
  • 3Automated certificate issuance pipeline replacing paper workflows.
  • 4Custom Form Builder for student registration with Excel data ingestion.
  • 5Automated desktop updates via GitHub and electron-updater.
Extensive departmental modules (HR, Payments, Schooling) not listed for brevity.

Tech Stack

ElectronTypeScriptReactNode.jsTailwind CSSWebSockets

Outcome

Successfully migrated university operations from paper-based tracking to a unified digital ecosystem, providing the Dean with real-time oversight of all departments.

04
Lead Frontend Engineer

Exact POS & Retail ERP

Desktop Point-of-Sale & Store Management System

Desktop Client (Electron)
Real-time Mobile Sync

Core Implementation

  • 1Built a high-throughput desktop point-of-sale interface featuring barcode scanning, tiered discount calculations, and complex multi-tender split payments (cash, card, and multi-cheque schedules).
  • 2Engineered real-time mobile-to-desktop register synchronization using Socket.IO, allowing floor staff to scan carts on mobile that instantly populate the cashier's checkout drawer.
  • 3Implemented bilingual (French/Arabic) invoice and thermal receipt generation with jsPDF, embedding vector Arabic typography (Amiri) and dynamic RTL layouts.
  • 4Integrated automated desktop updates and release pipelines via electron-updater alongside daily cash reconciliation and session closing workflows.

Tech Stack

ElectronReactTypeScriptTailwind CSSSocket.IOjsPDFelectron-updater

Outcome

Streamlined retail checkout workflows and unified multi-device operations into a single synchronized register, handling daily transaction accounting and automated receipt issuance.

05
Lead Full-Stack Developer

Storyland

Gamified Reading Platform & Quiz Evaluation Engine

Student Web App
Desktop Client (Tauri v2)
School Admin Portal

Core Implementation

  • 1Engineered multi-tenant school workspaces with role-based access for system admins, teachers, and elementary students.
  • 2Built an interactive 2D journey map with PixiJS canvas, unlocking progression milestones and discovery checkpoints based on student reading points.
  • 3Developed a timed quiz engine with countdowns, remainder-balanced 100-point scoring across arbitrary question counts, and once-per-day attempt rate limits.
  • 4Built a catalog import pipeline allowing schools to clone central library stories, replicate question sets, and manage local media assets.
  • 5Added batch student onboarding from Excel rosters using SheetJS with Moroccan Massar code validation and automated password generation.

Tech Stack

ReactTypeScriptBunExpressPrismaMariaDBPixiJSTauri v2Tailwind CSS

Outcome

Modernized reading tracking across elementary schools, replacing manual reading logs with automated quiz grading and school-wide reading leaderboards.

06
Lead Full-Stack Developer

VAA - Virtual Assistant for Associations

Full-Stack NGO Governance & Document Automation Platform

Web Application (SPA & Next.js)
Node.js REST API

Core Implementation

  • 1Engineered a browser-side document compilation engine using @react-pdf/renderer with embedded Arabic typography (Cairo), generating legally compliant NGO bylaws, assembly minutes, and invoices without server rendering overhead.
  • 2Built an on-premise Arabic conversational NLP assistant using node-nlp and arabic-stemmer, featuring live model retraining and bulk dataset management via Excel.
  • 3Architected administrative modules for association lifecycle tracking: constituent assembly quorum logging, executive board registers, and grant opportunity aggregations.
  • 4Led the full-stack architecture across a decoupled Express/MySQL backend and Vite client, initiating a modernized Next.js 16 and Prisma ORM migration.

Tech Stack

ReactTypeScriptNode.jsExpressMySQLPrisma@react-pdf/rendererTailwind CSS

Outcome

Digitized legal association formation and governance workflows across regional organizations, replacing manual paperwork with automated document compilation and self-contained Arabic NLP guidance.

07
Lead Full-Stack Engineer

Project Nid

Grant Application & Scoring System

Admin Desktop
Public Submission Portal

Core Implementation

  • 1Custom mathematical engine for business plan risk/success assessment.
  • 2Identity-gated submission flow with pre-validated ID white-listing.
  • 3Multi-step financial intake form with complex validation and data persistence.
  • 4Administrative analytics dashboard with real-time data visualization.
  • 5Digitized face-to-face manual processes into a secure automated pipeline.

Tech Stack

ElectronNode.jsExpressReactTypeScriptMySQL

Outcome

Replaced manual Excel-based evaluations with a secure, automated decision-making tool, significantly reducing processing time and human error in grant distribution.

08
Lead Frontend Engineer

MyStore E-Commerce & Content CMS

Administrative Back-Office & Storefront Management Engine

Web Application (SPA)

Core Implementation

  • 1Architected an administrative back-office managing multi-variant catalog data, inventory levels, flash sale schedules, and media uploads via multipart/form-data.
  • 2Engineered a dual-state order fulfillment pipeline separating payment reconciliation from multi-stage shipping logistics (in-transit, delivery tracking, and returns).
  • 3Built a dynamic bilingual RTL/LTR engine supporting over 500 localized strings, automatically switching document direction and font families (Almarai for Arabic, Roboto for French).
  • 4Integrated a live storefront theme customizer with dynamic hex color tokens, banner sequencing, WYSIWYG rich-text editing, and Recharts sales turnover analytics.

Tech Stack

ReactTypeScriptViteTailwind CSSRadix UIRechartsreact-intl

Outcome

Delivered a centralized operational dashboard replacing fragmented manual spreadsheets with unified order tracking, catalog management, and storefront customization.

Interested in working together?

I'm always open to discussing new projects and opportunities.

Let's Talk