DabaDigital — Agence digitale & plateforme de gestion

Le projet

DabaDigital est la plateforme digitale d'une agence spécialisée dans la création de produits web, d'expériences numériques et de solutions techniques sur mesure.

Le projet combine deux dimensions principales :

• une expérience publique destinée aux prospects ;
• un espace d'administration destiné à l'équipe.

Le site public présente l'agence, ses services, ses projets, son équipe et permet aux visiteurs de soumettre une demande de projet.

Le challenge

Le principal challenge était d'éviter le modèle classique du site d'agence composé uniquement de pages statiques.

L'objectif était de créer une plateforme capable de :

• présenter la marque ;
• mettre en avant les projets ;
• gérer les services ;
• présenter l'équipe ;
• recevoir les demandes clients ;
• gérer le contenu sans modifier le code ;
• proposer une expérience de contact plus intelligente.

La plateforme devait également conserver une identité visuelle forte, moderne et technologique.

Direction artistique

L'identité visuelle repose sur une esthétique sombre, futuriste et minimaliste.

La Hero section utilise le message :

Build. Launch. Grow.

La composition combine typographie massive, formes 3D abstraites, lumière bleue et profondeur.

L'interface conserve beaucoup d'espace négatif afin de créer une impression premium et technique.

Homepage

La page d'accueil est construite comme un parcours de découverte.

Elle met en avant :

• la proposition de valeur ;
• les projets sélectionnés ;
• les services ;
• la présentation de DabaDigital ;
• l'équipe ;
• un appel à l'action final ;
• le formulaire de demande de projet.

L'objectif est d'accompagner progressivement le visiteur depuis la découverte de l'agence jusqu'à la prise de contact.

Portfolio

La section portfolio présente les projets réalisés par DabaDigital.

Chaque projet peut être associé à différentes informations et technologies.

Le contenu publié est géré depuis l'administration et lu directement depuis Supabase.

Cela permet d'ajouter ou modifier les projets sans reconstruire manuellement la page.

Services

Le site présente différents domaines d'intervention de l'agence, notamment :

• websites & web apps ;
• e-commerce ;
• AI integration ;
• mobile apps.

La présentation reste volontairement concise afin de favoriser la lisibilité et laisser les projets démontrer concrètement les compétences de l'agence.

Équipe

Une section dédiée présente les personnes derrière DabaDigital.

L'objectif n'est pas uniquement d'afficher des profils, mais de montrer qu'il existe une équipe réelle derrière les projets présentés.

Chaque membre peut être accompagné de son rôle, d'une présentation et d'un lien vers son portfolio.

Formulaire de projet

Le visiteur peut envoyer une demande de projet depuis la section Contact.

Le formulaire permet de préciser des éléments comme :

• type de projet ;
• budget ;
• deadline ;
• technologies ;
• description ;
• informations de contact.

L'objectif est de transformer une prise de contact générique en brief plus structuré.

Assistant vocal

Une des fonctionnalités les plus différenciantes du projet est l'assistant vocal.

Le visiteur peut décrire son projet oralement au lieu de remplir chaque champ manuellement.

Le système analyse la description et peut extraire automatiquement des informations comme :

• type de projet ;
• budget ;
• deadline ;
• technologies ;
• description.

Les champs restent entièrement modifiables avant l'envoi.

Protection des modifications manuelles

Le système applique une règle importante :

les modifications manuelles de l'utilisateur sont prioritaires.

Si l'utilisateur modifie un champ, l'assistant vocal ne peut plus l'écraser automatiquement.

Une suggestion peut être proposée séparément, mais la décision finale reste toujours sous le contrôle de l'utilisateur.

Gestion de la confiance

Les valeurs extraites par la voix utilisent également un niveau de confiance.

Lorsqu'une valeur est suffisamment fiable, elle peut être insérée dans le formulaire.

Lorsqu'elle est incertaine, elle est proposée comme suggestion plutôt que remplie automatiquement.

Cette logique évite qu'une mauvaise transcription modifie silencieusement le brief du client.

Multilingue

La plateforme prend en charge :

• français ;
• anglais ;
• arabe.

La version arabe utilise un véritable layout RTL.

Le système vocal prévoit également la gestion de contenus multilingues et de conversations mélangeant notamment français et Darija.

Dashboard administrateur

L'espace /admin permet de gérer le contenu du site.

Il couvre notamment :

• projets ;
• catégories de projets ;
• services ;
• réseaux sociaux ;
• informations de contact ;
• messages clients.

Les contenus peuvent être édités en français, anglais et arabe.

Authentification et publication

L'administration utilise Supabase Authentication.

Les routes sont protégées et l'accès administrateur est contrôlé par une allowlist explicite.

Le contenu possède également des statuts draft / published afin de permettre la préparation d'un élément avant sa mise en ligne.

Client inbox

Le formulaire public est connecté directement à une boîte de réception privée dans l'administration.

Les messages clients sont donc centralisés au même endroit que le reste du contenu.

Cela transforme le site en outil opérationnel et pas uniquement en vitrine.

Architecture frontend

Le frontend est construit avec Angular 20 en standalone components.

L'architecture utilise notamment :

• Angular Signals ;
• Reactive Forms ;
• RxJS ;
• HttpClient ;
• Tailwind CSS ;
• lazy loading.

Les routes sont chargées individuellement afin de réduire le JavaScript initial.

Accessibilité

L'accessibilité est intégrée dans le design de l'expérience.

Le projet prévoit notamment :

• parcours clavier complet ;
• focus visible ;
• boutons accessibles ;
• aria-live pour les changements de l'assistant ;
• support RTL ;
• contraste ciblant WCAG 2.2 AA ;
• prise en charge de prefers-reduced-motion.

Graceful degradation

L'assistant vocal est conçu comme une amélioration et non comme une dépendance.

Si le microphone, le réseau ou le service vocal ne fonctionne pas, le formulaire manuel reste entièrement disponible.

Le principe est simple :

une panne de la voix ne doit jamais empêcher l'envoi d'une demande.

Tests

La stratégie de tests combine :

• tests unitaires ;
• tests composants ;
• tests end-to-end avec Playwright.

Les règles de fusion entre les données vocales et les modifications manuelles font partie des zones les plus testées.

Le parcours complet parler → remplir → corriger → envoyer peut également être simulé automatiquement.

Stack technique

• Angular 20
• TypeScript
• Angular Signals
• Reactive Forms
• RxJS
• Tailwind CSS
• Supabase
• Supabase Authentication
• Playwright
• Vitest
• OpenAI Realtime
• WebRTC

Résultat

DabaDigital est devenu plus qu'un simple site d'agence.

La plateforme combine identité de marque, portfolio, acquisition client, gestion de contenu et intelligence artificielle dans un même produit.

Le visiteur peut découvrir le travail de l'agence puis transformer son idée en demande structurée, tandis que l'équipe gère les projets, services et messages depuis un back-office unique.