Portail hydro-météorologique

ABH-SM

Le réseau météo, nappes et oueds de l'agence du bassin hydraulique du Souss-Massa — refait de zéro pour le web, et porté sur les écrans muraux de l'agence.

Client: Agence du bassin hydraulique du Souss-Massa · projet réalisé chez Green Solutions Maroc (Yobeen)
Mon rôle: Seul développeur frontend — refonte complète, puis l'application TV
Plateformes: WebTVBureau

Avant → après

Tableau de bord — même station, avant et après — Après · refait par moi — Tableau de bord — même station, avant et après

Tableau de bord — même station, avant et après — Avant — Tableau de bord — même station, avant et après

Carte des stations en direct — avant et après — Après · refait par moi — Carte des stations en direct — avant et après

Carte des stations en direct — avant et après — Avant — Carte des stations en direct — avant et après

Le problème

L'agence utilisait un portail de télémesure développé par un collègue : écrans chargés, graphiques incohérents, pas de mode sombre, pas d'arabe, et des pages lentes à afficher les données — pour une équipe qui suit des dizaines de stations météo, piézométriques, pluviométriques et hydrologiques.

Ce que j'ai fait

01Refait le portail de zéro : carte des stations en direct, tableaux de bord, graphiques multi-mesures, tableaux, rapports et administration.
02Français, anglais et arabe complets — la version arabe est entièrement en miroir, graphiques compris.
03Thèmes clair et sombre, exports PDF / Word / Excel, tableaux virtualisés pour les gros volumes, connexion par QR code.
04Construit sur une base que j'ai ensuite réutilisée pour refaire ABH-DON.
05Développé la version TV pour les écrans muraux de l'agence — Android TV (Capacitor) et bureau (Tauri), avec alertes de crue vocales.

Écrans

Neuf mesures sur un seul graphique, chacune avec son axe et ses pics

Toute l'application en arabe, de droite à gauche

Application TV — carte des stations en direct sur écran mural

Application TV — carte des prévisions météo

Application TV — niveaux et débits des oueds en temps réel

Le résultat

Refait pour remplacer l'ancienne application, sur la nouvelle API v3 de l'agence.
L'application TV a convaincu mon manager de me confier les autres projets frontend de l'entreprise.
Sa base est devenue le point de départ de la refonte d'ABH-DON.

Technologies

React 19
TypeScript
Vite
Redux Toolkit
Tailwind CSS
shadcn/ui · Base UI
ECharts
OpenLayers
i18next (FR/EN/AR)
Capacitor
Tauri
REST API integration

Projet suivantABH-DON

Vous recrutez ?

Un lead frontend qui livre aussi le mobile, la TV et le lien avec le backend. CDI, mission ou à distance.

Me contacter Profil LinkedIn

Vous avez une entreprise ?

Site web, boutique en ligne, outils internes, application mobile — je prends toute la partie tech en charge. Pas besoin de mots techniques.

Écrire sur WhatsApp Lancer un projet

ABH-SM

Le réseau météo, nappes et oueds de l'agence du bassin hydraulique du Souss-Massa — refait de zéro pour le web, et porté sur les écrans muraux de l'agence.

Client

Agence du bassin hydraulique du Souss-Massa · projet réalisé chez Green Solutions Maroc (Yobeen)

Mon rôle

Seul développeur frontend — refonte complète, puis l'application TV

Plateformes

WebTVBureau

Le problème

Ce que j'ai fait

01Refait le portail de zéro : carte des stations en direct, tableaux de bord, graphiques multi-mesures, tableaux, rapports et administration.

02Français, anglais et arabe complets — la version arabe est entièrement en miroir, graphiques compris.

03Thèmes clair et sombre, exports PDF / Word / Excel, tableaux virtualisés pour les gros volumes, connexion par QR code.

04Construit sur une base que j'ai ensuite réutilisée pour refaire ABH-DON.

05Développé la version TV pour les écrans muraux de l'agence — Android TV (Capacitor) et bureau (Tauri), avec alertes de crue vocales.

Écrans