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 setup an editor for landing / marketing pages of communities. Development will be done in Community App repository, using as the base the commit 0dc601b9791fb11b75fdce068908a3349e5648b5, or a newer one in develop branch. Your changes must not introduce any lint errors. Unit-testing will be considered as a plus, but may be below the global threshold, or omitted if the main focus of the challenge turns out to be time-consuming. In this case, please, don't decrease the global coverage thresholds in jest configuration (/config/jest/default.json), configure jest to expect lower test coverage in the added code.

Editor

We want to adopt React Draft WYSIWYG editor of landing / marketing pages of TC communities. Within this challenge you have to create a page which serves the editor and allows to edit a sample page(s) served from another route. You should use editor's API to add some functionality (additional controls in the editor's toolbar, proper rendering of related staff inside the editor, and proper storing/loading of relevant data):
1. A way to add button-like links (more details below);
2. A way to add two / three columns layout of content, with possibility to merge two of three columns together in the case of three columns;
3. A way to add background image to content blocks. In case of multi-column layout it will be nice to have a way to add background images either to separate columns, either a single image spanning through all columns;
4. A way to align images inserted into text in a way that text floats around the image on the left or on the right.
It is hard to tell beforehand, how difficult is it going to be to implement these requirements. We definitely ready to accept reasonable styling and functional issues. Our aim is at least to proove the concept and demonstrate that this functionality can be implemented with this editor with reasonable efforts, and to get a solid base code, which can be further enhanced and polished in subsequent challenge(s). Ideally, with functionality added to the editor, you should be able to demonstrate composition of these page elements (exact styling is not that important now, we are looking more into layout, etc).

Mock APIs

Intended usage of the editor is to save composed pages into backend database, and to be able to load them back into editor for editing, or serve them to the frontend for visitors. Also, I believe, you will need a few extra endpoints in the backed to upload / manage images from the editor. Community App already has ExpressJS server, which serves ReactJS frontend. For purposes of this challenge please add necessary endpoints (groupped into a separate ExpressJS router) to that server, and mock necessary functionality. You can use MongoDB or keep data in memory. The APIs you create aren't intended for production use, they just should be reasonable enough to demostrate the functionality outlined above, and to serve as a document of necessary features for people who will implement the actual backend later.

Styling

We want flexible control over the styling of the pages we compose. Sure, WYSIWYG editor provides many ways to control content look (like changing text color / font, paragraph adjustment, etc.), but we still will have some styling coming from (S)CSS stylesheets associated with specific Topcoder communities. We would like to have default style of any TC community, along with a way to override / correct that default style using React CSS Themr. For the purpose of this challenge, let's demostrate that we can use such approach to button-like links inserted into the page. In the document referenced above you see such buttons implemented as blue bubble with white text, which changes to white bubble / blue text when hovered. Let's use this as default style. You task is to demonstrate, how can we use React CSS Themr to change button styling, say to use red bubble, both inside the editor and when the composed page is served to a visitor. The intended use is that in future, when we load an editor for specific community, we'll ask the backend, whether that community has a custom style associated with it. If yes, we should be able to load that styling to use both in editor and pages rendered for visitors, otherwise we'll use default styles for both. So, these styles will be per-community thing.

Final Submission Guidelines

Provide git patch for the Community App, a document with verification instructions (feel free to include any insights about feasibility of our ideas, that you'll learn while working on this challenge), and demonstration video.