SAGA DE DÉVELOPPEMENT FRONTLINE

RIDA EL FAGROUCH

// INGÉNIEUR LOGICIEL

[INGÉNIEUR LOGICIEL SENIOR · BASÉ À PARIS FRANCE · REMOTE ENTHUSIAST]

ANALYTIQUE
AUTONOME
LEADER CALME

SommaireIndex

Illustration manga de Rida El Fagrouch en tant que tech lead senior dirigeant ses projets à distance depuis Casablanca

SENIOR EDITION!

// RIDA EL FAGROUCH PARLE
"Chaque interface est une architecture. Je construis celles qui tiennent à l'échelle."

NOUVEL ARC : LA PLATEFORME AFRICA DEVELOPMENT CLUB 2026 !

SPÉCIAL : DE LA PHYSIQUE AU CODE

[PAGE DOUBLE SPÉCIALE]

SPLASH D’IMPACT CRITIQUE

// EXPÉRIENCE
3+ ANS
Parcours Professionnel
Ingénierie de pointe et leadership technique frontend.
// PROJETS LIVRÉS
8 MAJEURS
Projets d'Envergure
Conçus et livrés de bout en bout avec une qualité de code maximale.
// DIVERSITÉ SECTORIELLE
5 SECTEURS
Banque, Assurance...
Distribution, Immobilier, Éducation. Une adaptabilité totale.
// MIGRATION ÉPIQUE
ANGULAR 5→18
Migration Majeure
Menée avec succès et sans interruption de service.

PROLOGUELE MANIFESTE DE L'INGÉNIEUR

PHILOSOPHIE & RIGUEUR

* DOCTRINE DE COMBAT *

// NOTRE MANIFESTE :

“Un bug trouvé en test est une victoire. Un bug trouvé en production est une leçon. On préfère les victoires.”

Rida El Fagrouch, en style manga, stoppe d'une main une interface pleine de bugs qui vole en éclats, protégé par un bouclier de tests.

INGÉNIEUR RIDA EL FAGROUCH

CH. 01LES ORIGINES

LE PARCOURS D'UN MAÎTRE FRONTEND

[CASE 1.1]
LE SCIENTIFIQUE (2015–2019)
LA RIGUEUR DE LA PHYSIQUE
Licence en Physique-Chimie, Mécanique & Énergie à Rabat. Rida dompte les équations et développe un esprit analytique redoutable.
* REFLEXION *
[CASE 1.2]
LE RÉSEAU 42 (2021–2026)
DE 1337 À 42 PARIS
Rida intègre le réseau 42 via l'École 1337. Apprentissage peer-to-peer sans professeurs, nuits blanches face au terminal. En 2026, il transfère à 42 Paris pour poursuivre son parcours au cœur de l'écosystème.
* CODING BURST *
[CASE 1.3]
PREMIÈRE MISSION (2023)
ATIKIA & L'IA
Rida contribue au développement de l'application Atikia, la première application proptech marocaine propulsée par l'intelligence artificielle.
* CLIC ! *
[CASE 1.4]
LE SENIOR (2024–PRÉSENT)
GEAR9 FRONTLINE
Chez Gear9, il dirige l'architecture frontend de plateformes majeures pour de grands comptes marocains.

CH. 02LES ARCS LÉGENDAIRES

PROJETS MAJEURS & SCHÉMAS D'ARCHITECTURE

ARC I : AFRICA DEVELOPMENT CLUB 2026 (ATTIJARI)

[MISSION CRITIQUE]

LA PLATEFORME MULTILINGUE B2B

ÉCHELLE CONTINENTALE

// Le défi

Bâtir une plateforme B2B multilingue hautement sécurisée pour des milliers de professionnels, avec intégration complexe de paiement CMI.

// Le combat

Responsabilité complète du frontend Next.js, flux d'authentification blindés, notifications temps réel et intégration reCAPTCHA robuste.

// La victoire

Livraison d'une plateforme robuste, validée par une stratégie de tests unitaires/intégration Jest et React Testing Library.

// Décision clé d'architecture

Choix de Zustand et React Query pour un state management asynchrone ultra-fluide.

// Schéma d'architecture encré

Next.js Frontend (Zustand)

React Query Cache Svc

API Gateway & Paiement CMI

* INTEGRÉ ! *

Next.js
TypeScript
Zustand
React Query
Jest
Tailwind CSS
React Hook Form
React Testing Library

ARC II : LA GRANDE MIGRATION (LA MAROCAINE VIE)

[MIGRATION CRITIQUE]

ANGULAR 5 VERS 18

MODULARITÉ MAXIMALE

// Le défi

Une plateforme d'assurance digitale stratégique complètement bloquée sur une version obsolète d'Angular 5.

// Le combat

Refonte complète et migration vers Angular 18, découpage modulaire par fonctionnalités et intégration de simulateurs financiers.

// La victoire

Une base de code moderne, performante, sécurisée et parée pour l'avenir de l'assurance digitale.

// Décision clé d'architecture

Migration progressive par modules isolés (Lazy Loading) pour garantir un déploiement continu.

// Schéma d'architecture encré

Angular 18 Core

Module Assurances

Simulateurs Financiers

API REST Assureur

* MIGRE ! *

Angular 18
TypeScript
RxJS
Tailwind CSS

ARC III : LA FORTERESSE DES ACCÈS (MARJANE GROUP)

[SÉCURITÉ MAXIMALE]

DASHBOARD E-COMMERCE & SSO

SSO KEYCLOAK & RBAC

// Le défi

Sécuriser un tableau de bord de gestion de stocks e-commerce complexe utilisé par des dizaines de rôles différents.

// Le combat

Intégration SSO avec Keycloak, contrôle d'accès basé sur les rôles (RBAC), et pipeline temps réel de notifications de stock.

// La victoire

Garantie d'accès ultra-sécurisé. Chaque utilisateur accède précisément aux données requises pour son rôle.

// Décision clé d'architecture

Implémentation d'un middleware Keycloak strict validant en continu les tokens JWT côté client.

// Schéma d'architecture encré

React Frontend Client

Keycloak Auth Server (SSO)

Stock Gateway API (RBAC)

* SÉCURISÉ ! *

React
TypeScript
Keycloak
Zustand
Tailwind CSS
Jest
React Query
React Hook Form

ARC IV : L'IA DE L'IMMOBILIER (ATIKIA)

[INNOVATION IA]

RECHERCHE IMMOBILIÈRE AUGMENTÉE

MOBILE & WEB

// Le défi

Réinventer la recherche immobilière au Maroc en exploitant la puissance de l'IA générative.

// Le combat

Intégration d'IA générative, géolocalisation interactive en temps réel, chat WebSocket et backend PostgreSQL conteneurisé.

// La victoire

La première application immobilière marocaine propulsée par l'IA, publiée sur le Google Play Store.

// Décision clé d'architecture

Utilisation de tRPC pour un typage de bout en bout strict entre Express et React Native.

// Schéma d'architecture encré

React Native App (tRPC)

Express.js Engine

OpenAI API & PgSQL

* PROPULSÉ ! *

React Native
TypeScript
Express.js
tRPC
Docker

// LES MINI-ARCS

Wafa Assurance Africa
Plateforme digitale pour Wafa Assurance, filiale d'Attijariwafa Bank et leader maghrébin de l'assurance (épargne, retraite, prévoyance, dommages). Contribution frontend : construction de l'UI et d'une bibliothèque de composants multilingues pour plusieurs marchés africains.
Next.js / TypeScript / Zustand / Tailwind CSS / Jest / React Query / React Hook Form
Xii School
App mobile iOS/Android pour parents, élèves et enseignants. OAuth, push notifications et builds automatisés Expo.
React Native / TypeScript / Expo / Firebase / Redux Toolkit
Voir le projet →
Teal
Définition de l'architecture frontend globale, standards de composants, SEO technique et Core Web Vitals.
Next.js / TypeScript / Zustand / Jest / React Testing Library / Tailwind CSS / React Query / React Hook Form
Voir le projet →
Cap Mission (Freelance)
Mission freelance — plateforme web officielle avec Angular et Strapi CMS, espace de suivi parent complet et sécurisé.
Angular / CSS / Strapi CMS
Voir le projet →
JMM Metal (Freelance)
Site vitrine métier pour une entreprise de métallurgie en France — SEO, Search Console et emails transactionnels.
Next.js / Prismic CMS / TypeScript / Resend / Tailwind CSS / SEO
Voir le projet →
Vertika Dashboard (Freelance)
Dashboard pour une entreprise française de location d'échafaudages — auth, API Nest et données Postgres.
Next.js / NestJS / TypeScript / Prisma / PostgreSQL / Keycloak / Tailwind CSS / Docker

CH. 03LES GRANDS DÉFIS

INCIDENTS & RÉSISTANCE EN PRODUCTION

[LOG COMBAT 01]
BATTLE : LA MIGRATION IMPOSSIBLE
LA MAROCAINE VIE — ANGULAR 5 À 18
1. La crise
Une plateforme d'assurance critique bloquée sur Angular 5, incapable de supporter les standards de sécurité modernes et les nouveaux outils de simulation financière.
2. La riposte
Rida conçoit une stratégie de migration progressive par modules isolés (Lazy Loading) et met en place des tests automatisés rigoureux pour sécuriser chaque étape.
3. La leçon & résultat
La migration est menée à bien sans aucune interruption de service. Une architecture modulaire moderne et prête pour l'avenir.
STATUT MISSION
RÉSOLU / DEPLOYÉ
* VICTOIRE ! *
[LOG COMBAT 02]
BATTLE : LA FORTERESSE DES PAIEMENTS
SÉCURISATION DU AFRICA DEVELOPMENT CLUB
1. La crise
Intégrer les flux de paiement critiques CMI et la protection antirobots reCAPTCHA sur une plateforme multilingue accueillant des milliers de professionnels exigeants.
2. La riposte
Rida prend le lead technique, blinde les routes d'authentification, optimise les pipelines de notification temps réel et valide les payloads de paiement.
3. La leçon & résultat
Aucune fraude constatée, un taux de conversion au top et une confiance maximale des partenaires institutionnels.
STATUT MISSION
SÉCURISÉ / AUDITÉ
* SÉCURISÉ ! *

CH. 04LES CHRONIQUES

EXPÉRIENCE PROFESSIONNELLE & SAGA LOG

JANV. 2024 — AUJOURD'HUI
INGÉNIEUR LOGICIEL SENIOR
GEAR9 (CASABLANCA, REMOTE)
Agence de transformation digitale de premier plan au Maroc.
- Direction de l'architecture frontend de plateformes B2B et d'applications d'assurance d'envergure nationale.
- Définition des standards de code, revues de code systématiques et mise en place d'une stratégie de tests rigoureuse.
- Accompagnement et mentorat des équipes de développement pour assurer une livraison fluide du design jusqu'au CI/CD.
03
PROTAGONISTE ACTIF
Rida dirige actuellement l'excellence frontend chez Gear9, assurant des architectures robustes et performantes pour de grands comptes.
02
★ SIDE QUEST — FREELANCE ARC ★
LES MISSIONS FREELANCE
MULTI-CLIENT · WEB & PRODUIT
2025 — 2026
Arc parallèle : interventions freelance pour livrer des produits web de bout en bout — du design system jusqu'à la mise en production.
- JUIL. — SEPT. 2025MISSION 01
  Cap Mission
  [Développeur web full-stack]
  Refonte de la plateforme web officielle du centre éducatif. Espace de suivi parent avec Angular et Strapi CMS, performances et UX.
- AOUT — SEPT. 2026MISSION 02
  JMM Metal
  [Développeur frontend freelance]
  Site vitrine pour une entreprise de métallurgie en France — Next.js, Prismic CMS, TypeScript, Resend, Tailwind CSS, SEO et Google Search Console.
- JUIN — OCT. 2026MISSION 03
  Vertika Dashboard
  [Développeur full-stack freelance]
  Dashboard pour une société française de location d'échafaudages — Next.js, NestJS, TypeScript, Prisma, PostgreSQL, Keycloak et Tailwind CSS.
CONTRACT CLEAR !Chaque mission est un épisode autonome : scope serré, stack moderne, livraison soignée.
JANV. — JUIN 2023
DÉVELOPPEUR MOBILE FULL-STACK
ATIKIA (STARTUP PROPTECH)
- Création de la première application immobilière marocaine propulsée par l'intelligence artificielle.
- Intégration d'un chat temps réel via WebSockets et géolocalisation interactive sur carte.
- Mise en place d'un backend Express.js robuste avec base PostgreSQL conteneurisée via Docker.
01
FONDATION TECHNIQUE
Premières armes dans l'écosystème startup, mêlant intelligence artificielle, réactivité mobile et bases de données robustes.

TÉLÉCHARGER MON CV COMPLET →

CH. 05TECHNIQUES SECRÈTES

FICHE DE PERSONNAGE & ARSENAL DE COMBAT

FICHE DE PERSONNAGE

CLASSE :	SENIOR FRONTEND
EXPÉRIENCE :	3+ ANS
PROJETS MAJEURS :	8 LIVRÉS
SECTEURS CONQUIS :	5 SECTEURS
LANGUES :	ARABE, FRANÇAIS, ANGLAIS
SPÉCIALITÉ :	NEXT.JS / REACT / ANGULAR / REACT-NATIVE

Illustration de Rida El Fagrouch en pleine activation de ses techniques secrètes de combat

“Une interface fluide combinée à une rigueur de test absolue : c'est ainsi que l'on gagne la bataille de l'expérience utilisateur.”

* ACTIVATION DES TECHNIQUES *

TECHNIQUES SECRÈTES DE COMBAT

ARCHITECTURE FRONTENDRANG S

Systèmes de composants évolutifs et architecture modulaire. Exemple: Teal, Wafa Assurance, La Marocaine Vie, Jmm Metal.

LEADERSHIP TECHNIQUERANG S

Définir les standards de code, piloter les choix techniques et livrer de bout en bout. Exemple: Gear9.

REVUE DE CODE & MENTORATRANG A

Revues de code constructives et systématiques réduisant les bugs en production de 40%.

SÉCURITÉ & AUTHENTIFICATIONRANG S

Intégration SSO (Keycloak), contrôle d'accès basé sur les rôles (RBAC), OAuth et paiements sécurisés. Exemple: Marjane, Attijari.

DÉVELOPPEMENT AUGMENTÉ PAR L'IARANG S

Claude Code, Cursor, Copilot et serveurs MCP pour accélérer le développement et fiabiliser les revues de code.

GUILDE & ALLIÉS

Ingénieurs Mentorés

Contribs Open-Source

BIENTÔT

Articles Techniques

// L'ARSENAL TECHNIQUE

TypeScript
React
Next.js
Angular
React Native
Node.js
Keycloak
Jest
React Testing Library
Docker
PostgreSQL
Zustand
Tailwind CSS
CSS
React Query
React Hook Form
Redux Toolkit
RTK Query
Strapi CMS
Prismic CMS

[ÉPILOGUE]

ÉCRIVONS LE PROCHAIN ARC ENSEMBLE !

Vous cherchez un ingénieur senior pour diriger votre frontend, du design jusqu'à la mise en production ? Parlons-en.

CLIQUEZ POUR ENVOYER UNE TRANSMISSION :elfagrouchrida21@gmail.com

GITHUB LINKEDIN TÉLÉCHARGER LE CV

À SUIVRE...

RIDA EL FAGROUCH

SommaireIndex

LA RIGUEUR DE LA PHYSIQUE

DE 1337 À 42 PARIS

ATIKIA & L'IA