DabaDigital — Digital Agency Platform

The project

DabaDigital is the digital platform behind a technology-focused agency building web products, digital experiences and custom software solutions.

The project combines two main experiences:

• a public agency website;
• an internal administration workspace.

The public side introduces the agency, services, selected work and team while guiding potential clients toward submitting a project request.

The challenge

The goal was to move beyond the traditional static agency website.

The platform needed to:

• communicate the brand;
• showcase projects;
• present services;
• introduce the team;
• capture project enquiries;
• manage website content without code changes;
• provide a smarter project-discovery experience.

At the same time, the website needed to maintain a strong and recognizable visual identity.

Visual direction

The design follows a dark, futuristic and minimal aesthetic.

The homepage opens with the statement:

Build. Launch. Grow.

Large typography, abstract 3D geometry, blue lighting and dark environments create a technology-driven visual language.

Generous negative space keeps the experience premium rather than visually overloaded.

Homepage

The homepage acts as a guided introduction to the agency.

It includes:

• core positioning;
• featured projects;
• services;
• an agency introduction;
• team profiles;
• final call to action;
• project enquiry form.

The journey progressively moves the visitor from discovery toward conversion.

Portfolio

The portfolio showcases selected DabaDigital projects.

Projects and their associated content are managed through the administration workspace and published from Supabase.

This allows the team to update the portfolio without changing application code.

Services

The agency presents capabilities including:

• websites and web applications;
• e-commerce;
• AI integration;
• mobile applications.

The service descriptions remain intentionally concise so the projects themselves provide evidence of the team's capabilities.

Team

A dedicated section introduces the people behind DabaDigital.

Each profile can include role information, a short introduction and a portfolio link.

This adds a human layer to the otherwise highly technical visual identity.

Project request flow

Visitors can submit a project request directly from the website.

The form can collect structured information such as:

• project type;
• budget;
• deadline;
• technologies;
• description;
• contact details.

The goal is to receive more useful briefs than a generic “contact us” message.

AI voice assistant

One of the project's key differentiators is the voice-assisted intake experience.

Visitors can describe their project verbally instead of manually completing every field.

The assistant can extract information such as:

• project type;
• budget;
• deadline;
• technologies;
• project description.

The visitor always reviews the result before submission.

Manual edits always win

The form uses provenance-aware field state.

When a visitor manually edits a value, voice-generated operations are no longer allowed to overwrite it automatically.

New AI values can instead appear as suggestions.

This ensures that automation never removes user control.

Confidence-aware suggestions

Voice extraction also uses confidence thresholds.

High-confidence information can be applied directly.

Low-confidence values appear as suggestions the visitor can accept or dismiss.

This avoids silently inserting uncertain information into a project request.

Multilingual experience

The platform supports:

• French;
• English;
• Arabic.

Arabic uses a proper RTL layout.

The voice workflow is also designed around multilingual use, including French and Moroccan Darija code-switching.

Administration dashboard

The /admin workspace manages:

• projects;
• project categories;
• services;
• social media;
• contact details;
• client messages.

Editors can manage content in English, French and Arabic.

Authentication and publishing

The dashboard uses Supabase email/password authentication.

Admin access is protected by explicit authorization rules.

Content supports draft and published states, allowing the team to prepare changes before exposing them publicly.

Client inbox

The public contact form submits directly to a private administrative inbox.

This brings client enquiries into the same operational environment used to manage the website.

Frontend architecture

The frontend is built with Angular 20 using standalone components.

Key architectural choices include:

• Angular Signals;
• Reactive Forms;
• RxJS;
• HttpClient;
• Tailwind CSS;
• lazy-loaded routes.

This keeps the project modular and testable.

Accessibility

Accessibility is part of the product design.

The project includes considerations such as:

• full keyboard navigation;
• visible focus states;
• accessible button states;
• live announcements for voice updates;
• RTL support;
• WCAG 2.2 AA contrast targets;
• reduced-motion support.

Graceful degradation

The voice assistant is treated as an enhancement rather than a requirement.

If microphone access, network connectivity or the voice service fails, the manual form remains fully usable.

A voice failure must never block a project submission.

Testing

The testing strategy combines:

• unit tests;
• component tests;
• Playwright end-to-end tests.

Particular attention is given to the rules that merge AI-generated values with manual user edits.

The full speak → fill → correct → submit journey can also be tested without relying on a live provider.

Technology

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

Outcome

DabaDigital evolved into more than a conventional agency website.

The platform combines branding, portfolio management, lead generation, content management and AI-assisted project discovery.

Visitors can move from exploring the agency's work to describing a project in a structured way, while the team manages content and enquiries from one administration workspace.