Component Hierarchy with Wireframes

[xnanodax]

Component Hierarchy

• All routes listed in the routes wiki page is also listed in the component hierarchy
• Each component, if necessary, has route, state, and other components it renders example
• Necessary components are wrapped in a container
• Correctly formatted
  • Bullet point hierarchy
  • Component names are displayed with inline coding text (backticks)

Wireframes

• Every component listed in the component hierarchy wiki page has at least one wireframe
• Every MVPs listed on the MVP wiki page has at least one wireframe
• Every route listed on the route wiki page has at least one wireframe
• Contains Containers
• Contains Lists
• Contains ListItems
• Correctly formatted
  • Wireframe images display on the page
  • Every wireframe has a header title

Comments:

[xnanodax]

In general:

• I would double check on the name of your components so it follows React naming conventions and follows the single responsibility principle.
  Example:

• For the SpotsSearch predictive search, i would break components down from container -> index -> index items. I see container and one component nested under that does not follow this convention.
• I would change SpotsListItem to SpotsIndexItem since the SpotsIndex is rendering these items.

Other Notable examples:
For the Search Results
What do you mean by predictive search?

For Spots Search
There are more components than just the search bar. I would break it down from SearchContainer -> SearchForm

[cscov]

Thanks for catching the naming conventions.
I tried to break search down a bit more, and by predictive search I meant that when you start typing in the search bar, it starts to dynamically filter search results based on what you type. Hopefully my new wireframe helps to illustrate this better. Ready for review!

[cscov]

updated after our conversation yesterday

[xnanodax]

I would add a route for the nav bar and session path.

Missing component hierarchy and views for

1. trips/:id
2. trips/:id/edit