This is my solution to the Frontend Engineering candidate assessment. Per the spec, I focused more on code quality and data manipulation.
I Used the file schema.json
to create an interactive page.
This solution:
- Displays the data from the file grouped into sections as a side navigation menu.
- Displays the details of a property on the page when a menu item is clicked
- Expands a group item menu and displays all properties in that group when clicked
- Navigate to the details in the main section for that property when a sub-element is clicked
same as the original repo:
- git clone this repository
npm install
npm start
I considered using Context or render props to pass a value representing the "active group" to dynamically render content from only the active group but decided on this simpler solution only utilizing a single hook on the sidenav component. I believe this solution meets the criteria as outlined.
update: I realized I should probably make an AJAX call instead of requiring in the schema.json so I changed the App component into a container to do that. After this, dyanimic rendering was fairly trivial to wire up so I removed the hook and passed down the method to do that as well.