Ruta: /teacher/profile · Atajo: g f · Sidebar: Mi Perfil
Editor de perfil del profesor con layout configurable de 4 columnas, drag-and-drop para
reordenar secciones, score de completitud, estado Super Tutor y analytics integradas.
- Titulo “Mi Perfil”
- Toggle “Editar Layout” (alterna entre modo vista y edicion)
- Link “Ver perfil publico” (abre
/:slug)
1. Score de completitud:
- Indicador circular SVG con porcentaje animado
- Color: verde (>= 80%), warning (50-80%), rojo (< 50%)
- Checklist de 7 items: nombre, foto, bio (>50 chars), video, especialidades (>= 3), certificaciones (>= 1), idiomas (>= 2)
2. Badge Super Tutor:
- Badge dorado con estrella si es elegible
- 4 criterios: perfil >= 80%, completion rate >= 95% (90 dias), >= 10 clases, >= 3 alumnos activos
3. Analytics de perfil:
- Toggle 7d / 30d
- 4 metricas: vistas, vistas de video, intentos de booking, tasa de conversion
- Sparkline (area chart) de tendencia de vistas
- Mini bar chart de funnel
| Seccion |
Contenido |
| Hero |
Avatar (96px, upload/delete), nombre, headline, anos experiencia, timezone, URL publica, bio (max 5000). Auto-guardado debounced (2s) para el campo bio via hook useAutoSave |
| Video |
URL YouTube/Vimeo, iframe preview |
| Especialidades |
Tags con nombre + descripcion, add inline |
| Idiomas |
Badges idioma + nivel CEFR, add con selects |
| Certificaciones |
Cards con nombre, materia, emisor, badge verificacion |
| Educacion |
Cards con titulo, universidad, especializacion, tipo |
| Experiencia |
Cards con puesto, empresa, fechas |
| Hobbies |
Chips inline, add/delete |
| FAQ |
Preguntas frecuentes. Hasta 20 pares pregunta/respuesta. Inline add form con campo pregunta (max 500) + respuesta (max 2000). Icono HelpCircle. Datos en columna faq JSONB de teachers. Auto-guardado debounced (2s) al editar cualquier pregunta o respuesta — el hook useAutoSave muestra indicador “Guardando…” / “Guardado” junto al titulo de la seccion |
| Links sociales |
LinkedIn, Instagram, YouTube, X/Twitter, sitio web. Iconos SVG de marca, modos vista y edicion |
| Seccion |
Preview |
| Booking |
Settings rapidos de trial (tipo, duracion, buffer, notice, dias). Links a widgets/settings |
| Storefront |
Toggles de visibilidad por servicio (public/unlisted/private). Link a servicios |
| Reviews |
Rating medio, total, tasa de respuesta, distribucion |
Card informativa que muestra la URL personal del profesor con ?ref=direct:
- URL copiable:
pinteach.app/t/{slug}?ref=direct (el origen de la app, window.location.origin)
- Boton “Copiar enlace” con feedback “Copiado”
- Texto explicativo: los alumnos que lleguen por este enlace son del profesor, sin comision
- Aparece antes de las secciones del perfil
- Secciones arrastrables con
dnd-kit (PointerSensor, 5px activation)
- Toolbar flotante por seccion: drag handle, icono, nombre, picker de columnas (1-4), toggle visibilidad
- Overlay azul durante drag
- Secciones ocultas colapsan a placeholder con borde discontinuo
- Al soltar:
PUT /api/teacher/profile/layout guarda orden + visibilidad + columnas
- Overlay con icono de camara
- Max 1.5MB, data URI almacenado en DB
- Botones guardar/cancelar/eliminar
- Certificaciones y educacion tienen badge de verificacion
- Boton “Request Verification” si no verificado
- Badge verde “Verified” si verificado
| Feature |
Descripcion |
Estado |
Implementado |
| Auto-guardado de borradores |
Las secciones Bio y FAQ usan el hook useAutoSave para guardar automaticamente con debounce de 2s. Indicador visual “Guardando…” / “Guardado” junto al titulo |
✅ |
Batch 3 |
| Layout responsive por breakpoint |
La configuracion de columnas es global. No se puede tener 4 columnas en desktop y 1 en movil con orden diferente (el responsive es automatico) |
Aplazado |
|
| Bug |
Descripcion |
Estado |
Corregido |
| Avatar almacenado como data URI |
La foto se guarda como data URI en avatarUrl de la DB. Con muchos profesores, infla la tabla teachers. Fix: subir a storage externo (S3/R2) y guardar solo la URL |
Aplazado |
Requiere S3/R2 storage migration |
| Hobbies como array de strings |
Los hobbies se gestionaban via bulk update del campo about, lo cual era fragil. FIXED: HobbiesSection component with dedicated add/remove UI, badge pills with delete button, Enter key support. API: PATCH /teacher/profile/about with hobbies: string[] |
✅ |
Batch 4 |
| Mejora |
Descripcion |
Dificultad |
Estado |
Implementado |
| Storage externo para avatares |
Migrar de data URI a Cloudflare R2 o S3. Guardar URL en DB. Reduce tamano de tabla y mejora performance de queries |
Medio |
Aplazado |
|
| Auto-guardado |
Bio y FAQ tienen auto-guardado debounced con hook useAutoSave |
Medio |
✅ |
Batch 3 |
| Preview del perfil publico inline |
Vista previa embebida del perfil publico dentro del editor, actualizada en tiempo real mientras se edita |
Medio |
Implementado ✅ |
|
| Archivo |
Proposito |
apps/app/src/routes/teacher/profile.lazy.tsx |
Pagina completa (1850+ lineas) |
apps/api/src/services/teacher/profile-service.ts |
CRUD de perfil |
apps/api/src/services/teacher/profile-analytics-service.ts |
Analytics de perfil |
apps/api/src/routes/teacher/profile.ts |
Rutas HTTP |
packages/shared/src/schemas/teacher-profile.ts |
Schemas layout + perfil |
| Endpoint |
Metodo |
Proposito |
/teacher/profile |
GET |
Perfil completo |
/teacher/profile/about |
PATCH |
Actualizar bio, nombre, hobbies |
/teacher/profile/photo |
POST/DELETE |
Upload/eliminar avatar |
/teacher/profile/video |
PATCH |
Actualizar URL video |
/teacher/profile/layout |
PUT |
Guardar layout (orden, cols, visibilidad) |
/teacher/profile/super-tutor |
GET |
Estado y criterios Super Tutor |
/teacher/profile/analytics |
GET |
Metricas de perfil (7d/30d) |
/teacher/profile/subjects |
POST/PATCH/DELETE |
CRUD especialidades |
/teacher/profile/languages |
POST/PATCH/DELETE |
CRUD idiomas |
/teacher/profile/certifications |
POST/PATCH/DELETE |
CRUD certificaciones |
/teacher/profile/education |
POST/PATCH/DELETE |
CRUD educacion |
/teacher/profile/experience |
POST/PATCH/DELETE |
CRUD experiencia |
/teacher/profile/analytics/views-trend |
GET |
Datos de tendencia de vistas para sparkline |
/teacher/profile/certifications/:id/request-verification |
POST |
Solicitar verificacion de certificacion |
/teacher/profile/education/:id/request-verification |
POST |
Solicitar verificacion de titulo |
/teacher/profile/social-links |
PATCH |
Actualizar links sociales (LinkedIn, Instagram, YouTube, X, sitio web) |
/teacher/profile/faq |
PATCH |
Reemplazar array de FAQ (max 20 items). Body: { faq: [{ question, answer }] } |
