WorkAboutProcessOpen my CVContact
WorkAboutProcessOpen my CVContact

Case study · 03

Community Service

A single operational workflow connecting submission, approval, and execution.

Role
Product Designer & Full-Stack Developer
Year
2025
Platform
Role-based web system

The problem

Coordinating transportation across multiple organizations without a unified workflow.

Read the full context

Beneficiary transportation requires information and decisions to move between a charitable association, the syndicate, and a transportation company. The association must prepare beneficiary details, assistance needs, locations, timing, and supporting documents. The syndicate then needs to review the request, record a decision, and assign a suitable company, while the company must allocate operational resources and report progress. Without a shared request record, responsibilities, status updates, and operational information can become difficult to coordinate.

The idea

The platform keeps every transport request in one shared lifecycle while presenting each organization with only the tools, decisions, and operational data relevant to its role.

  • Workflow Design
  • Role-Based UX
  • React & TypeScript
  • Node.js & Express
  • PostgreSQL
  • REST API
  • Permissions
  • Deployment
  1. 01

    Association Workspace

    Associations manage beneficiaries and prepare transport requests with schedules, locations, supervisors, assistance needs, selected beneficiaries, and supporting documents.

  2. 02

    Syndicate Review

    A centralized request view supports review, permitted corrections, documented rejection, approval, and assignment to an eligible transport company.

  3. 03

    Transport Operations

    The company accepts assignments, selects a branch, vehicle, and qualified driver, then advances the trip through ready, started, and completed states.

  4. 04

    Shared Visibility

    Messages, notifications, calendars, reports, and status history keep responsibilities and the next required action visible across organizations.

Design decisions

Product decisions shaped around each organization’s operational responsibilities.

01

Why?Each organization gets its own navigation, tools and permissions.

Role-specific workspaces give associations, the syndicate, and transport companies distinct navigation, tools, and protected permissions. Arabic and English support, RTL layouts, responsive behavior, and light and dark modes keep these workspaces usable across different environments.

02

Why?One request record, from draft to completion, keeps decisions, edits and documents together.

A single beneficiary-centered request record moves through draft, review, approval, assignment, execution, and completion. Request creation includes assistance needs and supporting documents, while a review step and centralized detail view keep decisions, edits, attachments, and status history connected.

03

Why?Only ready vehicles and qualified drivers can be assigned, so bookings never conflict.

Resource assignment is restricted by operational readiness: vehicles are filtered by branch, status, and required capacity, while drivers are filtered by availability and licence validity. Dashboards, status tabs, search, calendars, messages, and notifications provide the visibility needed to act without creating conflicting reservations.

How it's built

From the screen to the database.

  1. React + TypeScriptRole-specific operational workspaces
  2. Express REST APIWorkflow rules and protected actions
  3. PostgreSQLRequests, beneficiaries, resources, and status history

IntegrationsRole-Based Access ControlProduction Demo InitializationRender Deployment

Engineering evidence

  • Association, syndicate, and transport-company actions are separated through role-based workspaces and permissions.
  • One request record preserves decisions, attachments, assignments, execution states, and history throughout the lifecycle.
  • Vehicle and driver options are filtered by branch, capacity, readiness, availability, and licence validity.
  • Production demo-account initialization was hardened so reviewers can access stable seeded roles.

Validation

  • The deployed demo exercises the association, syndicate, and transport-company journeys with separate accounts.
  • Request-state transitions and resource eligibility are validated through the connected frontend and API workflow.
  • Responsive Arabic and English interfaces were reviewed across the role-specific workspaces.

Outcome

A complete product that turns cross-organization coordination into a trackable process.

Read the full context

The application can manage the complete transportation request lifecycle, from beneficiary registration and request creation through review, assignment, execution, and completion. Each organization works through a focused workspace while the request, its status, communication, and history remain connected. The project demonstrates the ability to design and build a multi-role product that combines user experience, operational rules, data management, and full-stack development.

Constraints

  • The workflow spans three organizations with different responsibilities and permission boundaries.
  • Resource assignments must avoid capacity, availability, and scheduling conflicts.
  • The public demo uses non-sensitive demonstration data rather than real beneficiary records.