The public entry point to the Dominican Republic's 311 system, where any citizen can file and follow up on complaints, claims, suggestions, reports of administrative corruption, Pro Consumidor cases and Línea 700 cases involving children and adolescents. I worked on the frontend, built with Next.js 14, React 18 and TypeScript, using Tailwind CSS and shadcn/ui to keep one reusable component library across every module. The heart of it is dynamic multi-step forms — general data, complainant details, case details, the institution involved, evidence and confirmation — whose fields and rules change with the service selected; they run on React Hook Form and are validated with Zod schemas kept separate and reusable so the rules stay typed and shareable. The portal consumes the 311 public REST API through Axios behind an abstraction layer that keeps components decoupled from endpoints, and uses TanStack Query v5 for server state: caching, invalidation, refetching, and loading and error handling. Being a public government service, accessibility and performance drove much of the work — responsive and accessible interfaces, a UserWay integration, state synced to the URL with Nuqs, and SSR or CSR chosen per section.
Note: The repository of this project is private, since it belongs to the government of the Dominican Republic. The administrative side — permissions and full case management — lives in a separate Backoffice and is not part of the Citizen Portal.
Technologies
NextJS
React
TypeScript
Tailwind
shadcn/ui
React Hook Form
Zod
TanStack Query
Axios