Web Application · 2025
Healthcare
Management
App
A role-based healthcare application designed to connect patients, medical professionals, and administrators through a clear and structured appointment workflow.
Role
Frontend Development
Type
Web Application
Stack
React · Tailwind · Zod
Focus
Role-based UX
01 — The Challenge
One application.
Three distinct roles.
Patients, healthcare professionals, and administrators need access to the same system, but each role requires different information, permissions, and workflows.
The challenge was to keep those experiences clearly separated while maintaining a consistent interface and predictable navigation across the application.
02 — The Solution
A different experience for every role.
The application uses role-aware navigation and protected routes to provide each user with the tools and information relevant to their responsibilities.
Appointments
Find professionals, schedule appointments, and manage personal bookings.
Schedule
Access professional workflows and manage appointment information through a dedicated interface.
Management
Manage users, roles, and application-level operations from a protected administrative area.
03 — Role-Based Experience
Access follows
responsibility.
Authentication alone is not enough. The application also needs to understand who the user is and which areas of the product they are allowed to access.
Personal experience
Patients are directed to their own area, where they can access appointment-related functionality without entering professional or administrative routes.
/paciente
Professional workflow
Healthcare professionals work within a dedicated area designed around their appointment and patient-facing responsibilities.
/prof
Protected management
Administrative functionality is isolated behind additional authorization checks to protect privileged operations.
/admin
Protected Routes
Route guards prevent users from navigating into areas that do not belong to their authenticated role.
Structured Validation
React Hook Form and Zod provide predictable form state and validation rules across user-facing workflows.
Separating navigation by role keeps the interface focused while making authorization rules explicit within the application structure.
04 — Key Features
Clear workflows for
different users.
Appointment Management
Patients can browse available professionals and manage their appointments through a dedicated experience.
Professional Filtering
Appointment information can be filtered according to the professional associated with each booking.
Role-Based Navigation
Users are directed to the appropriate interface according to their role and permissions.
Form Validation
Forms use structured validation and clear feedback to prevent invalid or incomplete submissions.
Project Focus
Different roles.
One consistent experience.
This project explores how authentication, authorization, routing, validation, and interface design can work together to create a structured multi-role application.