Overview

The frontend of the Dominican Republic's 311 system — a single monorepo shipping two applications: the public Citizen Portal and the CRM that runs behind it. On the portal, any citizen can file and follow complaints, claims, suggestions, reports of administrative corruption, Pro Consumidor cases and Línea 700 cases involving children and adolescents, through multi-step forms whose fields and rules change with the service selected, built on React Hook Form and validated with Zod schemas kept separate and reusable. Every case those forms create lands in the CRM, where authorized staff across many institutions triage, assign and follow it — with backend filters, pagination, role-based access resolved centrally instead of by hiding components, statistics charted with Recharts and reports exported to PDF and CSV. My work has been frontend engineering across both sides: building core features and owning architecture and performance decisions. The hard part is not the screens but keeping state consistent — after a case is reassigned between institutions or users, TanStack Query v5 invalidates and refetches so listings, detail views, statistics and reports all reflect it immediately. It runs on Next.js 14, React 18, TypeScript, Tailwind CSS and shadcn/ui, with Axios against two deliberately separate REST APIs: a public one for the portal and a Backoffice-only one for the CRM, authenticated with JWTs kept in HttpOnly cookies. Accessibility and performance drove much of the work — responsive interfaces, a UserWay integration, and filter state persisted to the URL with Nuqs.

Note: The repository is private, since it belongs to the government of the Dominican Republic. Both applications live in the same monorepo; the CRM is internal, so crm.311.gob.do only opens its sign-in screen — case management is reachable exclusively by authorized institutional users.