2026 / Project case study

TounsiAds

Tunisian-Dialect Campaign & Voice Studio

A React and Node MVP that turns a local business brief into an editable advertising campaign, then generates playable Tunisian-dialect voiceovers through server-side Gemini TTS.

My role: Product designer & full-stack developer
Scope: Working MVP · Local persistence

Explore the system

Generated campaign overview — concept, audience, tone, duration, and editable creative direction

7 project views

01 /At a glance

The project in a minute.

01 / The problem

Why it exists

Turn a local business brief into editable advertising concepts and playable Tunisian-dialect voiceovers.

02 / My contribution

What I built

Built the React campaign workspace and server-side Gemini TTS route, with editable drafts, local persistence, and WAV downloads.

03 / Delivery scope

What’s included

Working MVP · Local persistence

Explore the implementation

Type: Full-Stack AI MVP
Role: Product + Engineering
Audio: Gemini TTS → WAV
Data: Local Campaign Drafts

Read the full project context

TounsiAds is a full-stack MVP for building local advertising campaigns. Users can draft and edit concepts and scenes, manage brand and template settings, use browser speech input, and generate or download WAV voiceovers. The Gemini key remains on an Express server route, while drafts and workspace preferences are persisted locally for the prototype.

AI campaign product MVP

02 /Product experience

What the product does.

01Campaign Creation2 capabilities

Dynamic Drafts

Business, offer, audience, tone, duration, and call-to-action inputs create an editable campaign structure.

Editable Workspace

Concept, audience, tone, individual scenes, and final transcript remain editable after generation.

02Workspace2 capabilities

Templates & Brand Kit

Starter prompts, reusable brand details, workspace settings, help, and campaign history in one product.

Speech Input

Browser speech-to-text can capture a brief in supported browsers, alongside typed prompts and attachments.

03Voice Generation2 capabilities

Tunisian Voiceover

Selectable Gemini voices and delivery directions generate playable audio through a protected server route.

WAV Download

Raw model audio is converted into a standard WAV file for native playback and export.

03 /System design

How the pieces connect.

TounsiAds campaign script editor with scene and transcript controls — System workflow
Campaign-to-voice workflow
Editable campaign content stays in the browser while protected server-side services turn approved copy into playable audio.

TounsiAds voice studio with delivery and generated-audio controls — System workflow
Campaign-to-voice workflow
Editable campaign content stays in the browser while protected server-side services turn approved copy into playable audio.

01Browser Workspace + Server-Side TTS

React manages campaign editing and local history. Vite proxies audio requests to an Express API, where the Gemini credential remains server-side. The response is converted to WAV and returned for browser playback or download.

Browser: Campaign editing, persistence, speech input, playback, and downloads.
Express API: Validates the request and protects provider credentials.
Gemini TTS: Generates raw audio from text, voice, and delivery direction.

04 /In action

A closer look at the build.

Actual project screens and documented visuals. Open any image for the full view.

Generated campaign overview — concept, audience, tone, duration, and editable creative direction

Scene-by-scene editor — editable Tunisian copy, visual direction, timing, and final transcript

Voice studio — speaker selection, delivery direction, playback, and WAV download workflow

Campaign templates — reusable starting points for offers, launches, events, and local services

Brand kit workspace — reusable business identity and campaign voice settings

Campaign creation workspace — local history, prompt controls, attachments, and Tunisian voice direction

Responsive campaign studio — the same brief-to-draft workflow adapted for mobile

05 /Engineering choices

The decisions behind the build.

Credential Boundary

Keeping the model key out of the React bundle while preserving a simple local full-stack development flow.

Editable AI Output

Treating generated content as a draft that users can inspect and refine, rather than an opaque final result.

Dialect Variability

Supporting Arabic, Tunisian Latin/Arabizi, and mixed French wording while making pronunciation limitations visible.

06 /The toolkit

Each tool has a job.

Open a technology to see its role in this project.

Frontend

React 19

Editable campaign workspace

Vite 6

Frontend tooling and production build

Web Speech API

Optional browser speech-to-text input

LocalStorage

Campaign history and workspace preferences

Server

Node.js

Runtime for the TTS service

Express

Server-side POST /api/tts route

dotenv

API key kept outside the browser bundle

AI & Audio

Gemini TTS

Prompt-directed voice generation

Google GenAI SDK

Server-side model client

PCM → WAV

Browser-playable and downloadable output

07 /Delivery notes

The documented scope.

Brief to Playable Audio

One connected MVP flow turns a local campaign idea into editable copy and a downloadable voiceover.

Safer AI Integration

Provider credentials stay on the Node server rather than being exposed through Vite environment variables.

Human-in-the-Loop Workflow

Every generated concept, scene, and transcript remains editable before voice generation.

Explore further

Want to go deeper?

Explore the available resources or talk with me about the design and engineering behind this project.

Let’s talk

TounsiAds

Tunisian-Dialect Campaign & Voice Studio

A React and Node MVP that turns a local business brief into an editable advertising campaign, then generates playable Tunisian-dialect voiceovers through server-side Gemini TTS.

My role

Product designer & full-stack developer

Scope

Working MVP · Local persistence