We develop a new effective and scalable solution for management of Topcoder communities, dedicated to specific clients / projects / technologies. Think about existing Cognitive, iOS, and Predix communities. We aim to create a new ReactJS front-end for such mini-sites. 

Challenge Scope

The focus of this challenge is to create the prototype of community header component, which will provide navigation around community content. Development will be done in the Community App repository, using as the base the commit 9257ac9024f2ffb63ec87fe57f3519cad053feee, or a newer one in the develop branch. Your changes must not introduce any lint errors, and provide a reasonable unit test coverage of the written code (look into existing tests for examples how to test various types of modules). You should properly use ReactJS, Redux, and support server-side rendering of the header.

Warning: All code related to challenge listings was recently ported from another repository, and does not yet follow our standards for Redux and unit-testing. Don't take it as an example!

Header Layout Requirements

Default header layout should be similar to the header of Predix community: a logo at the left side, a simple horizontal list of references to various community pages at the right (navigation menu). The actual logo and items of navigation menu should be fetched from API (more details below). The idea is that you add your header example to the /community/:communityId/header route of the repository. When this route is accessed, the frontend should send a request to the API, with communityId as the parameter. The API should respond with meta information about the specified community. The meta-information object should include:
- URL of the logo to be used in the header
- An array of items to render in nav menu (each item contains URL of the corresponding page, and its name to show in the menu)
- Optional URL of CSS stylesheet to load into the page in addition to the default CSS file loaded by Community App (to override default header style, if necessary).

Header Mock API Requirements

The backend API endpoint to return meta-information about community, as explained above, should be mocked for now. Feel free to add corresponding endpoint to the same ExpressJS server, which is used to serve Community App frontend. Mock data should include example of data for few communities, so that we can verify / demostrate, that our solution works in the way described above.

Header Theming

Default style of community header should be a part of the main Community App stylesheet. Hovewer, we want to be able to modify / override the default style for certain communities, if necessary. We want to use react-css-themr for this purpose, and load community-specific styles as separate files. Setting up and demostrating such functionality is in the scope of this challenge.

Final Submission Guidelines

Git patch with your solution, brief verification guide, and a demo video.