PSM – Permiso de Salida de Menor

A production-grade government platform built for the Consejo Nacional de Competitividad (CNC) of the Dominican Republic. PSM (Permiso de Salida de Menor) fully digitizes the process by which parents and guardians request and authorize travel permits for minors leaving the country — replacing an in-person, paper-based procedure with a secure, accessible, multi-role online flow.

Table of Contents

• Overview
  • The Challenge
  • Screenshots
  • Links
• My Process
  • My Role
  • Built With
  • What I Learned
• The Team

Overview

The Challenge

Requesting an exit permit for a minor is a legally sensitive process involving multiple parties: an applicant, one or more authorizing parents/guardians, certification, notarization, and payment. The platform had to model this end-to-end while meeting the bar of a national government service — security, accessibility (WCAG 2.1 AA), and reliability.

Key product capabilities:

• Multi-step request wizard with email/OTP verification, applicant, authorizer, minor, and trip data, plus a review-and-edit summary — powered by dynamic conditional validation.
• Citizen dashboard for tracking requests and downloading issued permits across the full status lifecycle (draft → in review → authorizer approval → certification → payment → completed).
• Authorizer flow where parents/guardians review and digitally sign requests via video identification (VID).
• Cuenta Única SSO — OAuth 2.0 integration with the Dominican government's unified identity provider.
• Bilingual (ES/EN) and accessibility-first UI.

Screenshots

Links

• Live Site URL: PSM Platform

My Process

My Role

I served as the de-facto frontend tech lead, owning the frontend architecture end-to-end and guiding the frontend team. Beyond architecture, I personally led several core areas:

• Frontend architecture & foundation — root layout, global providers, routing structure, state strategy (server state via TanStack Query with persistence; form/UI state via Zustand), and the component conventions the team built on.
• Authentication & sessions — implemented the Cuenta Única (OAuth 2.0) login flow, secure httpOnly cookie sessions, and the logout/callback handling.
• SSR & delivery — set up the TanStack Start server-rendered app plus Docker multi-stage builds and GitHub Actions CI/CD pipelines for building and publishing images.
• Reliability — health-check endpoints (app + Cuenta Única availability), production-safe logging, and console/debugger stripping in production builds.
• UI & layout — shared layout, footer, typography/prose styling, breadcrumbs, and accessible Radix-based components.

Built With

• Semantic, accessible HTML (WCAG 2.1 AA)
• Mobile-first, component-driven workflow
• React 19 + TypeScript (strict)
• Vite build tooling
• TanStack Start (SSR), Router, Query & Table
• Zustand for client state
• React Hook Form + Zod for forms & validation
• Tailwind CSS + Radix UI primitives
• i18next for internationalization (ES/EN)
• Docker, GitHub Actions & Sentry for delivery and monitoring

What I Learned

Leading the frontend of a national government service sharpened how I balance architecture decisions with team enablement — building patterns robust enough for a legally sensitive, multi-role workflow while keeping them approachable for the team to extend. I deepened my experience with server-side rendering in the TanStack ecosystem, OAuth 2.0 integration with a government identity provider, and shipping a secure, accessible product under real institutional constraints.

The Team

This was a team effort. Special thanks to the frontend team I worked alongside — Victor Jesús Rosario Vásquez and Samuel de la Cruz — to Gabriel Evangelista Baez, the project's tech lead (backend-focused), who entrusted me with leading the frontend, and to Emanuel Carela Peña, our delivery manager.