Component Hierarchy with Wireframes

ImaginaryNumblr Component Hierarchy

Functional Component Hierarchy

• Root
  • App
    • NavBar
    • MainPage
    • Footer

Splash Page

• NavBar
• MainPage
  • Section 1
  • Section 2-5
  • Section 6
• Footer

Note: Splash page will be using the fullpage.js library. Sections are divided up into how what users will see as they scroll through the front page without being logged in. Each scroll fills the browser with the full view of each section.

Note: Session buttons will only show up on sections 2-6.

Note: Log In / Sign Up forms will replace the inside of content inside when 'Log In' or 'Sign Up' is clicked.

Navigation Bar

• NavBar
  • Components:
    • SessionButtonsContainer + SessionsButtons
      • State: Session
    • SearchBar
      • State: User Inputs
        Note: All other components are rendered inside of MainPage

Session Form

• Session Form Container
  • Session Form

Blog Form

• Blog Form Container
  • Blog Form Index

Explore / User Dash

• Blog Index Container
  • Blog Index
    • Blog Index Item