Selected work

Case study 04 / Citizen services · Product workflows

Zarvand.

Making municipal services understandable through connected account, billing, and citizen-request workflows.

Frontend Developer

ReactTypeScriptViteReact RouterREST APIsSass

Overview

The context behind the code.

Zarvand is a citizen-services interface for municipal information and everyday administrative tasks. The public frontend demonstrates account access, bill and debt views, service requests, notifications, and profile management in a Persian-language product.

The problem

The problem

A citizen needs to move between personal information, outstanding bills, and support requests without losing the context of their account. Those screens depend on consistent session behavior, clear request states, and a coherent connection to backend APIs.

Architecture

Architecture

The React and TypeScript frontend groups API functions by domain and keeps environment configuration separate from the interface. A deterministic demonstration service can supply those API boundaries from local storage, allowing the documented user flows to run without a connected backend.

SYSTEM OVERVIEW
Citizen interface01
Domain API layer02
Service boundary03
Account workflows04
Conceptual view · Read the case study for implementation context

The public repository runs in a demonstration mode with local data and simulated payments.

My contribution

My contribution

I worked on Zarvand as a frontend developer. The public demonstration contains the interface's domain API modules, session handling, and billing flows.

Engineering challenges

Engineering challenges

A bill's status, the account dashboard, and the transaction view need to tell the same story after an interaction. The demonstration layer also needs to preserve believable state across refreshes while keeping its data source replaceable at the existing API boundary.

Engineering reflections

Engineering reflections

Separating data access from presentation makes a product workflow easy to demonstrate and inspect; in the demo, simulated payments stand in for the real payment provider.

Technology

The tools behind the work.

  • React
  • TypeScript
  • Vite
  • React Router
  • REST APIs
  • Sass
Next case studyTireban