Saltar al contenido principal

Onboarding

Los usuarios nuevos pasan por un flujo de onboarding obligatorio antes de poder usar la app: elegir intereses y luego seguir al menos 5 cuentas.

Cada checkbox indica si esa pieza está implementada de punta a punta (frontend + backend).

  • Paso de intereses — elegir temas (Música, Deportes, Gaming, Moda, …); se almacenan como slugs estables
  • Paso de seguir — hay que seguir al menos 5 cuentas para continuar (el botón Finalizar permanece bloqueado hasta entonces)
  • Sugerencias basadas en intereses en el paso de seguir (primero cuentas con intereses en común, complementadas con sugerencias más amplias para que nunca esté vacío)
  • Cuadro de búsqueda para encontrar y seguir cualquier cuenta durante el onboarding
  • Bloqueo persistente — un usuario que no completó el proceso es redirigido a /onboarding en cada inicio de sesión (según el flag isOnboardingCompleted del servidor), incluso después de cerrar sesión y volver a iniciarla
  • Verificación del lado del servidor — completeOnboarding rechaza finalizar con menos de 5 seguidos
  • Opción de cerrar sesión disponible dentro de la vista de onboarding
  • Sin destello del feed — el inicio de sesión envía a los usuarios que no terminaron directamente a /onboarding; el feed protegido nunca se renderiza primero

Cómo funciona​

  1. Después de registrarse (o de iniciar sesión sin haber terminado), el usuario llega a /onboarding.
  2. Paso 1 — Intereses: selecciona temas. Los valores almacenados son slugs independientes del idioma (music, sports, …), de modo que la coincidencia funciona entre distintos locales.
  3. Paso 2 — Seguir: la app llama a interestSuggestions con los intereses elegidos y muestra cuentas para seguir, además de un cuadro de búsqueda. El usuario debe seguir a ≥5.
  4. Al finalizar, completeOnboarding(interests) establece isOnboardingCompleted = true (y almacena los intereses mediante la semántica de updateInterests), y la app entra al feed.

Bloqueo​

La redirección se aplica en ProtectedRoute.tsx: cuando user.isOnboardingCompleted === false y la ruta no es /onboarding, no renderiza nada y redirige. Como el flag vive en el servidor y se devuelve en el payload de login/registro, cerrar sesión y volver a iniciarla vuelve a activar el bloqueo para una cuenta que no ha terminado.

Archivos clave​

  • Backend: graphql/resolvers/user-social.resolver.js (completeOnboarding), graphql/resolvers/user-search-discovery.resolver.js (interestSuggestions), data-access-services/user/user.access-service.js (getUsersByInterests).
  • Frontend: page-components/OnboardingPage.tsx, app/onboarding/page.tsx, bloqueo en components/ProtectedRoute.tsx, redirección de login en components/Login.tsx.

Relacionado​

Los intereses se pueden editar después — ver Configuración → Intereses y el documento de Descubrimiento para sugerencias basadas en intereses.