Back to selected work

01 / Public project

Expand / AmnAds

An affiliate marketing platform combining a bilingual public website with private dashboards used by staff, clients, brand teams, and other platform users. The work involved building reusable frontend systems for multiple roles, workflows, and permission levels.

View live website
Figure 01 — Public project evidenceLive website capture
Expand / AmnAds public website screenshot

Public website capture from a broader affiliate marketing platform. Private dashboard screens and internal workflows are not displayed.

Status
Public
Domain
Affiliate Marketing · Frontend Engineering · RBAC
Project focus
Affiliate marketing platform with public web experiences and role-based operational dashboards

01 / Brief

Problem and responsibility

The challenge

The platform needed to serve several types of users within the same product while keeping their permissions, data visibility, navigation, and workflows clearly separated. The frontend also had to support complex operational interfaces, API-driven data, Arabic and English content, and responsive behavior across both public and authenticated experiences.

My role

Frontend Engineer responsible for developing the public website and contributing to the private platform dashboards. I built reusable interfaces, role-aware application flows, API-connected features, state-management logic, and responsive layouts across multiple frontend applications.

02 / Contribution

What I worked on

The main areas I contributed to across the product and its supporting systems.

  1. 01

    Built and maintained public-facing pages and authenticated dashboard interfaces using React, Next.js, and TypeScript.

  2. 02

    Implemented role-based frontend experiences for staff, clients, brand teams, and other platform users with different permissions, navigation, actions, and data visibility.

  3. 03

    Developed reusable components for forms, tables, filters, dashboard layouts, and recurring platform workflows using Material UI and Tailwind CSS.

  4. 04

    Managed server and application state using React Query and Redux while integrating frontend workflows with backend APIs.

  5. 05

    Supported bilingual Arabic and English experiences, including RTL-aware layouts and responsive behavior across desktop and mobile interfaces.

  6. 06

    Worked within a complex affiliate-marketing product where campaigns, users, teams, and internal operations were represented through different dashboard experiences.

03 / System Context

How the work fits together

Representative system flowDirection of operation
  1. 01Public website
  2. 02Authentication
  3. 03Role-based access
  4. 04Operational dashboards
  5. 05API-driven workflows

Simplified to show how the public website connects to authenticated, role-based platform experiences without exposing private product screens.

  • A1Public layer: bilingual marketing pages communicating the platform, services, and value proposition.
  • A2Application layer: authenticated dashboards serving staff, clients, brand teams, and other platform roles.
  • A3Access layer: protected routes, role-based navigation, permission-aware actions, and restricted data visibility.
  • A4Interface layer: reusable forms, tables, filters, layouts, and shared components used across multiple product areas.
  • A5State layer: React Query for server-state synchronization and Redux for shared application state.
  • A6Integration layer: API-connected workflows handling platform data, user actions, and dashboard operations.

04 / Evidence

Outcome and engineering evidence

  • 01Delivered frontend work across both the public company presence and the private operational product.
  • 02Supported a multi-role platform rather than a single-purpose marketing website.
  • 03Demonstrates experience building permission-aware dashboards, reusable frontend architecture, and API-driven business workflows.
  • 04Shows the ability to work on complex commercial software while respecting confidentiality around private screens and proprietary operations.

Technical environment

Tools used across the project.

ReactNext.jsTypeScriptMaterial UITailwind CSSReact QueryReduxReact HooksREST APIsRole-Based AccessRTL / Arabic