Component Hierarchy with Wireframes

Jump to bottom

Andy Wynkoop edited this page Apr 3, 2018 · 9 revisions

Facebook Component Hierarchy with Wireframes

Component Hierarchy

Root
- App
  - NavBar
  - LoginPage
  - MainPage
  - Profile

NavBar

NavBar
- Components:
  - LoginFormContainer + LoginForm
  - NavSearch
  - NavLinks

Note: Navbar appears on all pages. Other components are rendered inside of either MainPage or profile

LoginPage

LoginPage
- LoginDetail
- RecentSessionContainer + RecentSession (save on localStorage?)
- SignUpFormContainer + SignUpForm
- route: '/'

If user is logged in, the index page will show the MainPage (news feed) instead.

Alt .

MainPage

MainPage
- NewPostFormContainer + NewPostForm
- PostListFeedContainer + PostListFeed
  - PostListItemContainer + PostListItem
    - PostContent
    - PostButtonsContainer + PostButtons
    - PostActivityContainer + PostActivity

Alt .

ProfilePage

+ProfilePage

CoverPhoto
ProfileNav
- ProfilePicture
NewPostFormContainer + NewPostForm
PostListFeedContainer + PostListFeed
- PostListItemContainer + PostListItem
  - PostContent
  - PostButtonsContainer + PostButtons
  - PostActivityContainer + PostActivity
ProfileBio - I think profile bio will receive descriptive properties as props - fetched with the user request
Photos (NYI)
FriendsContainer + Friends

Alt . Alt .

Note: Page will render the some of the same components as MainPage, but will only fetch data for the current page's user