Component Hierarchy with Wireframes - npartovi/Destructables GitHub Wiki

Functional Component Hierarchy

• Root
  • App
    • NavBar
    • MainContent
    • Footer

NavBar

• NavBarContainer + NavBar
  • SearchBarContainer
  • SessionButtonsContainer
    • SessionButtons
  • Link to create article Button
  • UserIcon component - when loggedin
    • UserImg + UserName
    • logout button

Main Content

• MainArticleContainer
  • ArticlIndexList
    • ArticleIndexItem

Create Article Form

• ArticleFormContainer
  • MainImage component
  • StepContainer
    • AddImage component
    • AddText component
  • AddStep button
  • Publish button

Article Show Component

• ArticleShowContainer
  • ArticleShowImage component
  • ArticleShowText component
  • ArticleInformation component
    • datecreated, likeCount, publisherName
• CommentShowComponent
• CommentFormComponent
  • newComment component

Footer

• Footer Component
  • static footer with github/linkedin links

WireFrames