component hierarchy with wireframes - edmundho/TRACER GitHub Wiki

Functional Component Hierarchy

  • Root
    • App
      • NavBar
      • MainPage
      • Footer

Main Page

  • Containers
    • RoutesIndexContainer (friend activity feed)/ProfileIndexContainer (own feed)
      • RoutesIndexItem component
        • State: routes[:id], users[:id]
    • StatsSidebarContainer
      • StatsSidebar component
        • State: users[:id].routes
  • Route: /dashboard

NavBar

  • NavBar
    • Components
      • SessionButtonsContainer
        • SessionButtons
        • State: session

New Activity Hover

  • Activities/routes dropdown

User Menu Hover

  • User Menu Dropdown

Log In Page

  • loginContainer
    • login component
  • Route: /login
  • State: errors.login

Sign Up Page

  • signupContainer
    • signup component
  • Route: /signup
  • State: errors.signup

Splash Page

  • Route: /
  • State: ui

Past Routes

  • RoutesContainer

    • RoutesIndex

      • Route: /routes
      • RoutesIndexItem
      • State: routes[:id], users[:id]

    • RouteShowContainer

      • RouteShow
      • Route: /routes/:id
      • State: routes[:id], comments[:id], photos[:id], users[:id]

New Activity/Route

  • RouteForm
  • Route: /routes/new
  • State: errors.routeForm

  • RouteBuilder component
    • Route: /routebuilder
    • State: ui

⚠️ **GitHub.com Fallback** ⚠️