Web Routing & Navigation

These flow diagrams show exactly what happens when users navigate through the Hububb application, based on their authentication status and onboarding completion. They help understand the user experience from a business perspective, showing the decision points and automatic redirects that guide users to the right place.

Unauthenticated User Flow

flowchart TD
    A[User visits any URL] --> B{Is user authenticated?}
    B -->|No| C[User sees landing page or auth pages]
    
    C --> D{What page did they visit?}
    D -->|/ or /landing-page| E[Show public landing page]
    D -->|/auth/sign-in| F[Show sign-in form]
    D -->|/auth/sign-up| G[Show sign-up form]
    D -->|/auth/forgot-password| H[Show password reset form]
    D -->|Any protected route| I[Redirect to /auth/sign-in]
    
    E --> J{User takes action}
    F --> K{User signs in}
    G --> L{User signs up}
    H --> M{User resets password}
    
    J -->|Clicks Sign In| F
    J -->|Clicks Sign Up| G
    J -->|Clicks Forgot Password| H
    
    K -->|Success| N[User becomes authenticated]
    L -->|Success| N
    M -->|Success| F
    
    K -->|Failure| F
    L -->|Failure| G
    M -->|Failure| H
    
    N --> O[Check user role and onboarding status]

Authenticated User Flow

flowchart TD
    A[User is authenticated] --> B{What is user's role?}
    B -->|Not Landlord| C[Sign out user]
    C --> D[Show access denied message]
    D --> E[Redirect to /auth/sign-in]
    
    B -->|Landlord| F{Is onboarding completed?}
    F -->|No| G[Redirect to /onboarding]
    F -->|Yes| H[Redirect to /host]
    
    G --> I[User completes onboarding steps]
    I --> J[Onboarding marked as complete]
    J --> K[Redirect to /host]
    
    H --> L[User accesses host dashboard]
    L --> M{User navigates to different pages}
    
    M -->|Stays in /host/*| N[Allow access to host features]
    M -->|Tries to access /onboarding| O[Redirect back to /host]
    M -->|Tries to access public pages| P[Redirect back to /host]
    
    N --> Q[User can access all host features]
    Q --> R{User takes actions}
    
    R -->|Manages properties| S[Property management features]
    R -->|Views calendar| T[Calendar features]
    R -->|Manages services| U[Service management features]
    R -->|Views channels| V[Channel management features]
    R -->|Signs out| W[Return to unauthenticated flow]

Detailed User Journey Examples

New User Sign-Up Journey

flowchart TD
    A[New user visits landing page] --> B[Clicks Sign Up]
    B --> C[Fills out sign-up form]
    C --> D[Account created with landlord role]
    D --> E[User automatically signed in]
    E --> F[System checks onboarding status]
    F --> G[Onboarding not completed]
    G --> H[Redirect to /onboarding]
    H --> I[User completes onboarding steps]
    I --> J[Onboarding marked complete]
    J --> K[Redirect to /host dashboard]
    K --> L[User can now manage properties]

1

Visit landing page and sign up

New user visits the landing page and clicks Sign Up.

2

Complete sign-up form

User fills out the sign-up form and account is created with landlord role.

3

Automatic sign-in and onboarding check

User is automatically signed in. System checks onboarding status — onboarding is not completed.

4

Onboarding

User is redirected to /onboarding and completes onboarding steps.

5

Access host dashboard

Onboarding is marked complete and user is redirected to /host dashboard to manage properties.

---

Returning User Sign-In Journey

flowchart TD
    A[Returning user visits app] --> B[Redirected to /auth/sign-in]
    B --> C[Enters credentials]
    C --> D[Authentication successful]
    D --> E[System checks user role]
    E --> F[User has landlord role]
    F --> G[System checks onboarding status]
    G --> H{Onboarding completed?}
    H -->|Yes| I[Redirect to /host dashboard]
    H -->|No| J[Redirect to /onboarding]
    I --> K[User accesses all host features]
    J --> L[User completes remaining onboarding]
    L --> M[Redirect to /host dashboard]

1

Redirect to sign-in

Returning user visits the app and is redirected to /auth/sign-in.

2

Sign in

User enters credentials and authentication succeeds.

3

Role and onboarding check

System checks the user's role (landlord) and onboarding status.

4

Redirect based on onboarding

If onboarding is completed -> redirect to /host dashboard. If not completed -> redirect to /onboarding to finish onboarding.

5

Access host features

After onboarding is complete (or if already completed), user accesses host features on /host dashboard.

---

User Navigation Within App

1

Navigation choices

User in host dashboard clicks navigation: Properties, Calendar, Services, Channels, or Profile.

2

Access respective pages

• Properties -> manage property listings

• Calendar -> view/manage calendar

• Services -> purchase/manage services

• Channels -> manage channel connections

• Profile -> update profile settings

3

Actions and exits

User takes actions on those pages. They can continue using features, sign out (return to landing page), or close the browser (session remains active).