Case study 04 / Citizen services · Product workflows
Zarvand.
Making municipal services understandable through connected account, billing, and citizen-request workflows.
Frontend Developer
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.
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