Challenge Overview
Application Overview:
Topcoder Connect is client facing application of Topcoder. Customer use Topcoder connect to input requirements of their projects, then managers and copilots take it from there. You can see Topcoder Connect in action here:
https://connect.topcoder-dev.com
We are starting a large redesign of the Topcoder Connect, which is a React application using Topcoder apis for backend. In this challenge we will be building timeline component as the part of redesign – a new feature to be added to Connect.
Requirements Overview:
Only frontend is in the scope of this challenge. Also, existing connect-app is very simple to run with no dependency on any other project, so UI developers please feel free to participate.
In this challenge instead of building complete pages, we will build React components for timeline independent of the existing app, which will be later used to build actual pages. Parent timeline component was already built in previous challenge and we need build more of the child components to cover all the cases. Each scenario of timeline component should be included in a demo page for verification in this challenge as a usage demo.
Important: We also need a demo page depicting the entire lifecycle of a project using milestones. You can use mock data to demonstrate that. The components doesn’t need to work on same data, instead it should just demonstrate the lifecycle a challenge with the hardcoded data in each component. E.g. milestone covering requirement specification to announcement of winner and acceptance of design.
You can see this design as a reference: https://marvelapp.com/8a94680/screen/41373095
But, it doesn’t demonstrate the interactions.
Designs for the timeline are mentioned below:
Shows where timeline component will be used (This timeline component is already done):
https://marvelapp.com/8a94680/screen/41372266 (Desktop)
https://marvelapp.com/8a94680/screen/41372922 (Tablet)
https://marvelapp.com/8a94680/screen/41372923 (Mobile)
Detailed design of timeline component. For closely matching styles, you can use marvel handoff by accessing it at bottom left corner of the design:
https://marvelapp.com/8a94680/screen/41373095
https://marvelapp.com/8a94680/screen/42493987
https://marvelapp.com/8a94680/screen/41372958
https://marvelapp.com/8a94680/screen/41372919
https://marvelapp.com/8a94680/screen/41372924
https://marvelapp.com/8a94680/screen/41372925
https://marvelapp.com/8a94680/screen/41372926
https://marvelapp.com/8a94680/screen/41372952
(We need components covering the screens above)
Design assets:
https://drive.google.com/drive/folders/1gvBeRnH4l-oX6_bZBbV4Gomz1wDfkxXO
Use feature/v3Components in connect repo as base code and create all the components in src/components/v3 directory. Some components are already be present as result of previous challenge. Please see README-NEW.md file for instructions on how these new components can be seen. We need to build the components which are incomplete or not already present.
Existing Main timeline component
This component is already developed and can be accessed at:
http://localhost:3000/V3ComponentTimelineDemo
or
http://local.topcoder-dev.com:3000/V3ComponentTimelineDemo
Notice it is already responsive, so please follow similar pattern for rest of the development.
Reference:
https://marvelapp.com/8a94680/screen/41372266 (Desktop)
https://marvelapp.com/8a94680/screen/41372922 (Tablet)
https://marvelapp.com/8a94680/screen/41372923 (Mobile)
This blue checked icon shows past events / milestones:
This unchecked blue icon show current event / milestone:
This unchecked gray icon shows upcoming milestones:
Detailed Requirements:
Timeline component features / child components (to be developed as part of this challenge):
-
Component Context (as highlighted below). We should be able to provide a heading and description (as html because can have hyperlinks) for the timeline component.
b) Simple milestone without detail
c) Simple milestone with detail (already developed, see demo)
d) Milestone with milestone items which can be of type urls, files, design links, text area.
(Note: all the milestones should be able to accept description as html because can have hyperlinks)
b) c) and d) as shown below (event in below stone is actually milestone):
See possible milestone types in next section.
d) Multiple links
e) Milestone with progressbar (partially developed, see demo)
Progressbar is developed, but we also need to have a state with Ready for review button, which is not present in existing component.
g) Design checkpoint selection component (already developed, see demo)
See this link for detailed design with all the states https://marvelapp.com/8a94680/screen/41372918
Demo for this component is already present here: http://local.topcoder-dev.com:3000/V3ComponentSubmissionSelectionDemo
This component can be reused while creating demo scenarios for checkpoint selection milestone.
h) Final design winner selection component (partially developed, see demo, require update)
See this link for detailed design with all the states: https://marvelapp.com/8a94680/screen/41372960
Demo for this component is already present here: http://local.topcoder-dev.com:3000/V3ComponentWinnerSelectionDemo
This component is not complete with all states, see the design. Please update this component to have all the states as in above design. Also, notice other prizes for +100 dollars.
First one in this design (see marvel link shared above) is the initial state. Selecting top placements and on clicking Complete review button, state should change as shown in Final design.
This component can be reused while creating demo scenarios for Final Design milestones.
i) Add design link button (already developed see demo).
As shown in below screen which uses design checkpoint selection component, there is also an option to add a design link. Please reuse this wherever required.
Demo here: http://local.topcoder-dev.com:3000/V3ComponentTimelineDemo
Clicking on this add a design link button should allow user to add design as shown below. Please reuse this add a design link feature wherever required:
j) Request extension component
As shown in above design, on click Request Extension button milestone extension request will be created as shown below (please create this as a independent component so that it can be used in other places also if required):
k) Complete milestone
As shown in below design, create this as a independent component so that it can be used inside the milestones wherever required. But, include it in at least one place in the demo showing the challenge lifecycle as mentioned in the requirement overview section:
l) Milestone request admin
When milestone is request as shown in j) request will go to admin’s timeline as shown in below design. Create this as a independent component so that it can be used inside the milestones wherever required. But, include it in at least one place in the demo showing the challenge lifecycle as mentioned in the requirement overview section:
l) Final designs type Design Acceptance as shown below:
Clicking Request Fixes button should generate a new milestone/event like final fix request as shown in next section 2) k) and Accept Design button in above screen should show a confirmation popup as shown below. If possible, you should try to reuse the existing modal component for this https://github.com/appirio-tech/connect-app/blob/dev/src/components/Modal/Modal.jsx
Note: In above heading in modal competition is typo -> completion.
k) Final Fix request:
User should be able to add and delete requests by clicking buttons on right of each textarea. These textarea should expand on pressing enter or when content grows. We also need buttons to Cancel and Submit request. Clicking on Cancel button should remove all the added textbox and set to default state as shown below:
Clicking on Submit request button should change state as shown below:
Design reference: https://marvelapp.com/8a94680/screen/41372926
m) Specification milestones
As shown below specification related to timeline will be a single milestone with multiple states like when specification is added to its completion. The buttons here should work as expected and data can be mocked via json.
Design reference: https://marvelapp.com/8a94680/screen/41372925 (Notice only first part of this design for the specification requirements above edit links)
n) Edit links
The 2nd part of the shared design in previous requirement is for adding and editing links and also editing milestones.
Add / Edit link component will be created as individual component which can be used inside a milestone. It can have few states as shown below:
These links can be of different types for different purpose. Please make the component configurable to handle cases like above. Also notice blue text 23/64 on top right of above designs, shows no of characters already entered/remaining in the textbox. Max 64 as above (should be configurable).
See also this design, edit icon appears on editable milestones on hover:
https://marvelapp.com/8a94680/screen/42493987
o) Edit milestones
Some of the milestones which are not complete can be edited as shown below, dependending on the type of milestone:
p) Download links
Code Base:
https://github.com/appirio-tech/connect-app
Please fork above repo to start your work and use feature/v3Components branch. Winner needs to send a merge request to above repo (Please do not send merge request until the winner is declared). Use latest version of node 8 to run the app.
To run app, just do npm install and npm start. Access the app at http://localhost:3000
If you face any issue, please add 127.0.0.1 local.topcoder-dev.com to /etc/hosts file on unix or to C:\Windows\System32\Drivers\etc\hosts on windows, then access the app at http://local.topcoder-dev.com:3000 [See login section in README.md]
Once you can access the app, you can sign up with a new account (which will be created in topcoder dev api) to login.
You can access all the v3 components developed in last challenge, which you can consider as a base here at http://local.topcoder-dev.com:3000/V3ComponentDemo
Please don’t miss to see README-NEW.md
Please feel free to ask any question in the forum.
Supported Devices:
The following devices are in scope of this challenge:
-
Desktop (Your changes should not break existing UI)
-
Tablet (For whatever designs available)
-
Mobile (For whatever designs available)
Code Guidelines:
HTML / HTML5
- Provide comments on the page elements to give clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all HTML code so future developers can follow the code.
- All HTML code naming should not have any conflicts or errors.
- Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent)
- Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- No inline CSS styles- all styles must be placed in an external stylesheet.
- Validate your code, reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.
SASS
- Provide comments on the SASS code. We need comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- Do not duplicate any code to create different versions for desktop and for tablet/mobile. All changes need to be done using SCSS.
- All CSS naming should not have any conflicts.
- Reuse the existing mixins for breakpoints etc.
- As possible use CSS style when create all styling whenever possible, avoid image usage.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page. Only use table tags for tables of data/information and not for page layout.
Javascript
- All JavaScript must not have a copyright by a third party.
- You are encouraged to use the scripts from the provided files, your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
Best Practices
You should follow the best practices established in the repository:
- Properly split code into reusable, self-contained React components, conveniently grouped inside folder structure;
- Do not violate ESLint rules for JS code, nor StyleLint rules for SCSS;
- Use SCSS variables and mixins from the global stylesheets (/src/styles/*.scss). Especially, when it relates to colors, fonts, etc;
- Do not break existing unit tests.
Browser Requirements
- Chrome (last 2 versions)
- Firefox (last 2 versions)
- Latest Edge
- IE11+
Final Submission Guidelines
Please submit your source code with a document on how to verify your implementation.
Also, submit a git patch for the latest commit in the feature/v3Components branch, so that it's easier for reviewer to find out changes done by you.
The winner must create a pull request against our feature/v3Components branch.