Component Hierarchy with Wireframes

Jump to bottom

Shawn Salat edited this page Jun 5, 2018 · 25 revisions

Functional Component Hierarchy

Root - wrap with Provider and hashRouter
- App
  - Header - needs container for searchbar and navbar
    - Searchbar
    - Navbar
  - Main Content
    - Feed - needs container
      - New Post Bar - needs container
        
        New Post Bar Buttons
      - Avatars
      - Posts
        
        Post header
        
        Post Media
        
        Post description
        
        Post bottom nav - needs container for dispatching like, reblog and commentes
        
        notes - needs container for getting all notes on a post (could use include and send in with ajax req for post)
        
        comment
        
        reblog
        
        like
    - Sidebar
      - Sidebar Footer

NavBar

NavBar / SearchBar
- Components:
  - Logo
  - Search Bar
  - Nav buttons
    - Home
    - messages
    - follows
    - activity
    - profile/settings
    - new post

Main Feed

App
- Search / Nav
  - Search
  - Main Nav
- Main Content
  - Profile Photos
    - on Hover: Profile Popover
  - Create Post Nav
    - text
    - photo
    - quote
    - link
    - chat
    - audio
    - video
  - New Post Modal (Popup when from post nav)
    - post modal header
    - post form
    - post tags
    - form buttons
  - Main Content/Feed
    - avatar
    - post container
      - post header
      - post media
      - post author link
      - post description
      - post bottom nav
- Sidebar
  - user list
  - other content
- sidebar footer

Sign in/ Sign up

Sign in Sign/up
- Search bar
- Login Modal
- Footer

Quick Compose Modal

Quick Compose Nav
- Quick Compose Nav Items

Create Post Modal

*Main Content

Main Content
- Modal goes over post nav, pushing down main content

Media Modal