TCO - [REPOST] - Topcoder Connect React Component Code Challenge - Team Management

Challenge Overview
Topcoder is in the process of developing a new version of the Connect platform, which connects customers with project managers, copilots and competitors to run projects through the Topcoder services.

We are happy to bring challenges to our community to help us building one of the main tools our teams and community members will be using soon!

For this challenge, we’re looking forward to create clean and easily React components for the Team Management panel.

Project Overview
The new version of Topcoder Connect aims to provide an easy experience for customers and project/challenge managers through a very clean and modern UI.

The goal of this challenge is to develop ReactJS components and functional behavior for the team management panel. You are provided with a clean HTML/SCSS prototype which you must wisely use convert into React components that follow the guidelines of the product. You will be working directly off the code (link provided below) and create your own local instance with the new components.
 

Components Requirements (to deliver)

1. Add Member Component
- Create the add member component and behaviors as this sample.
- Consider the following rules for the respective user roles:
-- Customer role: Customers can only add additional customer role members.
-- Copilot role: Copilots can add other copilots or customers role members.
-- Topcoder Manager or Manager: Managers can add customer, copilot or other managers.

2. Join Project Team Component
- This component should only be visible in the following cases, for a user logged in with specific role:
-- Customer: never.

-- Copilot:
--- If logged in user has copilot role (user.roles in redux state).
--- If there are no copilots already assigned to this project (project.member where role is 'copilot').
--- Clicking on JOIN button should add current user as a primary copilot for this project. NOTE: this is how copilots can claim projects. There might be a race condition where 2 copilots are viewing the same project before either has claimed it. The 2nd one to attempt to claim will face an error message 'already claimed'. Error to be displayed under the action like this sample.

-- Managers (see sample):
--- If logged in user has Topcoder Manager role (user.roles in redux state).
--- if current user is not already part of the project team.
--- Clicking on JOIN button should add current user as a Topcoder Manager for this project. (Note you can have more than one manager on a project).

3. Remove Team Member Component
- Only team owner (role:customer + isPrimary:true) & managers can remove members (as sample1 and sample2).
- Owners : can only remove members with customer role.
- Managers: can remove members with customer, copilot or manager roles.

4. Leave a Project Team Component
- Only customers (not owner - isPrimary: false) & managers can remove themselves from a project team (as sample).
 

Implementation Considerations

- RE-USE existing components as much as possible (button, userAvatar, dropdown, textfield, tabs, etc).
- There are different user roles making use of different features the components have to offer, depending on who is logged in respectively. Prepare the components to behave properly according to user roles (enabling/disabling role-matching features). Right now we use a pattern for this; there should be a container for the component that identifies the type of user (userRoles array), this container configures the views of the components (enabling/disabling features) depending on the user role. You can see a sample at: Projects.jsx (container) and ProjectsView.jsx (final view).
- userRoles array values should be (defined in constants.js#Line62):
-- Topcoder User
-- Topcoder Manager
-- Manager (behaves the same as Topcoder Manager),
-- Topcoder Copilot & administrator
- Everyone should have 'Topcoder User' role. Additionally they could have one of Topcoder Manager, Manager, Topcoder Copilot or administrator roles.
- User roles are found in redux state as user.roles.

General Requirements

- Do not include any extra third-party libraries.
- Source code and design text must be written in US-English.
- Don't overly nest your code; we'll need to abstract the final DOM into multiple components; try to stay into smaller logical pieces.
- We use autoprefixer, so don't worry about all browser-specific rules.
- When creating the component page and repo, try to break them into the separate items - make sure that header, a row, and the footer are different self-sufficient styled elements (do not overly nest the SCSS).
- Do not use external icon repositories; we're including the icons as React.js components. It is important for us to minimize external dependencies for resources (SCSS libraries, icon fonts [not good at all], icon libraries, etc.).
- Do not redeclare/style buttons and form elements that exist in the /styles/_forms.scss and the library as whole. If you need to define a button style (or extend an existing one) - think how this could happen in the /styles/_forms.scss (or relevant _*.scss) file. In the end we want to add extrapolate the styles you create int 2 places:
-- Component-specific styles (used only once).
-- Global styles (/styles/*.scss) used from all components.
 

React and Javascript Requirements

- ES6 syntax is preferred, as Babel has been setup to handle transpiling the syntax to the current JavaScript standard.
- Use .jsx extension for React components; using PascalCase for filenames. E.g., Navigation.jsx.
- Build the components using similar React components to the existing web app. There is a sample in the repo at src/components/ExampleComponent (available in zip provided)
- Ensure that there are no lint errors.
- Write bundled jsx and scss files for each component at the same src corresponding location. For instance, for a component called “Navigation” it would be:
-- Navigation.jsx
-- Navigation.scss

Browser Requirements

- IE 11+
- Latest Chrome on Mac and Windows
- Latest Safari on Mac and Windows
- Latest Firefox on Mac and Windows

Resources

- Team Management HTML Page (HTML/SCSS files of the Components)
- Topcoder Connect 2.0 App (latest version of the app)
- Topcoder UI Kit Guidelines (Topcoder design and development UI guidelines)

Deliverables

- Provide all your files within a zip container.

Technologies

- HTML
- SCSS
- ReactJs

Final Submission Guidelines