The interface behind the campaign.

The problem

Campaigns are only one part of the work.

Advertising teams work across campaign creation, incoming leads, reporting, funding, and billing. LeadsMart connects Facebook and TikTok campaign workflows with the operational screens around them. A useful interface needs to help people move between those tasks and understand the state of their work.

Advertisers and internal operations teams do not need identical screens or actions. The product also serves English and Arabic readers. Navigation, permissions, and language direction therefore belong to the everyday product experience, alongside the dashboards and forms.

My responsibility

My part: turning product flows into working UI.

I rebuilt the ads-manager frontend from Figma designs using React, TypeScript, and reusable components. My work includes lead dashboards, campaign creation and management, analytics, billing, and wallet workflows. I integrated APIs and worked with backend engineers as part of the product team.

I implemented permission-gated routes and navigation, along with English/Arabic interfaces and right-to-left layouts. I also built a React Native and Expo companion app, using shared TypeScript modules where applicable. The mobile work is described here as built; this case study does not claim that the app has been publicly launched.

Implementation & tradeoffs

Separate product data from interface state.

The frontend uses TanStack Query for API data and Zustand for client state. Those tools give the two kinds of state distinct places to live: fetched product records and their request lifecycle on one side, local interface state on the other. This separation requires care around mutations so the displayed product data stays consistent after an action.

Reusable components and lazy-loaded routes support the different screens in the ads manager. Shared UI can make related workflows more consistent, but a reusable component still needs to accommodate the actual task. The English/Arabic treatment includes navigation and layout direction, rather than replacing strings alone.

The mobile companion carries related workflows into React Native and Expo. Shared TypeScript modules provide common logic, while the app still needs platform-specific interface implementation. Frontend permission checks control presentation; backend authorization remains necessary for protected data and actions.

Scope & limits

A connected set of operational workflows.

The visible work spans campaign management, lead analytics, trends, and the ads-manager dashboard. The walkthrough provides a credential-free view of those screens. Account information and private totals remain masked in the existing captures, so the demonstration can focus on the interface and its structure.

The evidence establishes delivered functionality across web, bilingual interfaces, and a companion app. It does not establish a measured conversion increase, revenue impact, or application-speed improvement. Product screenshots may show account-level figures; those figures should not be read as my performance metrics. The external platform link is secondary because viewing it may require sign-in.