Challenge Overview
Connect v3 – React components
We are starting a large redesign of the Topcoder Connect – our primary customer facing application. In this challenge we want to start building basic components for Project Plans – a new feature to be added to Connect.
Designs are complete and available as a marvel app. Design assets are available here.
Major requirements for all components in this challenge are:
• Support for both desktop and mobile screens
• Use semantic HTML and CSS and be consistent with css styles, spacing, shadows
• Well isolated code – must use CSS modules
We don’t want to develop complete pages in thic challenge – only the components that will be reused later for the actual pages. Each component should just be included in a demo page for verification in this challenge and as a usage demo for future users.
Use connect-app dev branch as base code and create all the components in src/components/v3 directory.
Here is a list of components in scope:
Project Progress component
Generic menu component (will be used as main navigation and as tab control in the project stage card)
Timeline – should be implemented as a container component – rendering timeline calendar view and status only – content will be rendered by child components
Timeline child components – simple status (ex “completed milestone with no content), status with content cards (ex “completed milestone with content”), status with progress bar, status with progress bar and action bar (ex “Final designs” with action buttons in the bottom
Posts card and post feed components – draft.js must be used as post composer, see RichTextArea component in the current connect app for sample usage.
Submission selection component (checkpoint and final review selection)
Alert component
Make sure to implement all states for the listed components as shown in the designs.
Submit a short deployment/verification guide
Submit a short demo video
We are starting a large redesign of the Topcoder Connect – our primary customer facing application. In this challenge we want to start building basic components for Project Plans – a new feature to be added to Connect.
Designs are complete and available as a marvel app. Design assets are available here.
Major requirements for all components in this challenge are:
• Support for both desktop and mobile screens
• Use semantic HTML and CSS and be consistent with css styles, spacing, shadows
• Well isolated code – must use CSS modules
We don’t want to develop complete pages in thic challenge – only the components that will be reused later for the actual pages. Each component should just be included in a demo page for verification in this challenge and as a usage demo for future users.
Use connect-app dev branch as base code and create all the components in src/components/v3 directory.
Here is a list of components in scope:
Project Progress component
Generic menu component (will be used as main navigation and as tab control in the project stage card)
Timeline – should be implemented as a container component – rendering timeline calendar view and status only – content will be rendered by child components
Timeline child components – simple status (ex “completed milestone with no content), status with content cards (ex “completed milestone with content”), status with progress bar, status with progress bar and action bar (ex “Final designs” with action buttons in the bottom
Posts card and post feed components – draft.js must be used as post composer, see RichTextArea component in the current connect app for sample usage.
Submission selection component (checkpoint and final review selection)
Alert component
Make sure to implement all states for the listed components as shown in the designs.
Final Submission Guidelines
Submit the source codeSubmit a short deployment/verification guide
Submit a short demo video