Plataforma de reparaciones del hogar

PWA tipo Uber con flujos separados para clientes y proveedores sobre el mismo producto.

Rol: Frontend completo
Tecnologías: ReactTypeScriptRedux ToolkitWebSocketsTailwind CSS

Pantallas de la plataforma de reparaciones del hogar

Contexto y problema

Un mismo producto con dos usuarios muy distintos: el cliente que pide una reparación y el proveedor que la atiende. Cada uno necesita su propio flujo sin duplicar la aplicación.

Mi rol y alcance

Construí el frontend de los dos flujos: solicitud de servicio, seguimiento de estado, perfiles y calificaciones.

Cómo funciona

Cada tipo de usuario tiene su propia navegación: el cliente usa una barra inferior clásica y el proveedor una barra flotante.

App del cliente

Inicio. Muestra la solicitud activa y un acceso directo para crear un servicio.
Crear servicio. Tipo de servicio, dirección guardada y descripción del problema. Si no hay direcciones, ofrece agregar una ahí mismo.
Perfil. Información personal, métodos de pago, direcciones, configuración, privacidad y ayuda.

Inicio del cliente con la solicitud activa y el botón Crear servicio

Formulario Crear servicio con tipo, dirección y descripción del problema

App del proveedor

Disponibilidad. El proveedor mantiene presionado un botón para ponerse activo o inactivo, y un cronómetro muestra cuánto tiempo lleva activo.
Estadísticas. Ingresos, servicios completados y activos, y promedio por servicio, con filtro por periodo y una gráfica de ingresos.
Calificaciones. Promedio, distribución por estrellas y comentarios recientes de clientes.

Inicio del proveedor con su estado activo, cronómetro y botón para cambiar estado — Los nombres de clientes y del proveedor están ocultos.

Estadísticas del proveedor con ingresos, servicios y gráfica del periodo — Los nombres de clientes y del proveedor están ocultos.

Decisiones técnicas

Flujos separados por tipo de usuario sobre una misma base de código, cada uno con su navegación y sus pantallas.
Seguimiento del estado de cada solicitud, visible tanto para el cliente como para el proveedor.
Estado con Redux Toolkit, API REST con Axios y autenticación JWT con rutas protegidas.
Interfaz responsiva y mobile-first con Tailwind CSS.

Resultado

Una PWA con dos experiencias completas, la del cliente y la del proveedor, construidas sobre el mismo producto y lista para su fase previa al lanzamiento.