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.com/profesores/{slug}?ref=direct
- 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/web/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 }] } |
