Skip to main content

Onboarding

New users go through a required onboarding flow before they can use the app: pick interests, then follow at least 5 accounts.

Each checkbox marks whether that piece is implemented end to end (frontend + backend).

  • Interests step — pick topics (Música, Deportes, Gaming, Moda, …); stored as stable slugs
  • Follow step — must follow at least 5 accounts to continue (the Finish button is locked until then)
  • Interest-matched suggestions in the follow step (shared-interest accounts first, topped up with broader suggestions so it's never empty)
  • Search box to find and follow any account during onboarding
  • Persistent gate — an incomplete user is redirected to /onboarding on every login (based on the server-side isOnboardingCompleted flag), even after logging out and back in
  • Server-side enforcement — completeOnboarding rejects finishing with fewer than 5 follows
  • Log-out option available inside the onboarding view
  • No feed flash — login sends unfinished users straight to /onboarding; the protected feed never renders first

How it works​

  1. After registering (or logging in without having finished), the user lands on /onboarding.
  2. Step 1 — Interests: they select topics. The values stored are language-independent slugs (music, sports, …), so matching works across locales.
  3. Step 2 — Follow: the app calls interestSuggestions with the chosen interests and shows accounts to follow, plus a search box. The user must follow ≥5.
  4. On finish, completeOnboarding(interests) sets isOnboardingCompleted = true (and stores the interests via updateInterests semantics), and the app enters the feed.

Gate​

The redirect is enforced in ProtectedRoute.tsx: when user.isOnboardingCompleted === false and the path isn't /onboarding, it renders nothing and redirects. Because the flag lives on the server and is returned in the login/register payload, logging out and back in re-triggers the gate for an unfinished account.

Key files​

  • 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, gate in components/ProtectedRoute.tsx, login redirect in components/Login.tsx.

Interests are editable later — see Settings → Interests and the Discovery doc for interest-based suggestions.