Challenge Overview
Topcoder puts a lot of efforts into a massive update and enhancement of our beloved community platform. In this challenge you will update Topcoder member's Dashboard to add there community notifications, and change the way the banners are displayed. We aim to get the result to production by August 1-st; to ensure this deadline, the development will be done in the legacy Topcoder App repo (work out of the latest commit in dev branch, which is 989654c5157ca4b4acad06e8cd4289dc4608020b at the moment of writing these specs). You should follow the rules of that repo (do not introduce lint errors, do not break tests, etc.), at the same time mind that we are going to port your code to a newer codebase later, thus try to keep it as separate from other code, as possible.
First, check this design (A) it shows what we want to do with TCO17, Watson, and Congnitive Community banners. The main element area, where the bluish picture of a guy with headphones is used, is not a bunner, but an area for notification content.
Second, check this design (B) it shows the actual notification we want to be ready to roll out on August 1-st. You see, quite many staff is going on there: (1) the notification is collapsible (default) to a brief block with text string, and optionally LIVE marker / extendable to the full view; (2) In the full view there should be a way to add a code to play video (ideally, we should be able to put there any video code, not only YouTube), and if video is live, we want be able to overlay LIVE marker over it. This design also assumes that there can be several such notification blocks placed one under another. And, surely, we want to be able easily reuse them for different events.
Now, we want to implement solution which gets the best from designs (A) and (B).
From (A) you get the look and layout of banners:
- They should layout in column on mobile;
- They should layout in horizontal arrangement on desktop (ignore the last example, where three banners are aligned in a column at the right side of the block);
- If we add more banners (or remove some), we'll want to layout them in few rows on desktop. Your code should allow to do it in simple way, specifying how much banners is in each row (it is fine for now, if we have to edit the code to achieve it, but please put some comments into the code, what should be changed to tune it);
- When clicked these banners should redirect to the same places, where current banners redirect users;
- No need to keep SRM announcement string on TCO17 banner;
- You remove from the dashboard current banners, located under challenge card area.
From (B) you get the notification block and use it instead of that bluish picture placeholder, and black stripe with notification text.
- In desktop view it should look and behave the same as in the design (B);
- In mobile, when there is a video added, we should display it in two "lines" (well, if it does not make sense once you try, feel free to discuss in forum);
- Collapse / expansion of the notification should work;
- Should be possible to add several different notifications (they will be placed one under another, and we should be able to collapse / expand them independently);
- For the notification block we want to expose their configuration in a form of JSON file, to allow anybody with no knowledge of HTML / SCSS to easily and rapidly modify notifications. I believe, that JSON file should allow to provide an array of objects (each descibing corresponding notification block), the things we want to configure are:
1) the message to show when the block is collapsed (separately the header and the details);
2) the message to show when the block is expanded (separately the header and the details, if not given, should default to (1));
3) the background image for expanded block;
4) the redirection URL for Learn More button in the expanded block (and the text at that button). If these are not given, we should not show the button.
5) the code for video
6) whether to show LIVE tags in collapsed notification and on video in expanded one (these should be two independent options).
Also, once again, we really aim to get it ready before August 1-st, thus we have no time for reposts / expansions of this challenge. Although I believe, this work can be all done in time, should we have to sacrifice something: (1) we can tolerate if the mobile view wan't work ideally; (2) we can tolerate if it is not that flexible in adding / removing banners. The part about notifications, though, is highly desired to work the way described above.
First, check this design (A) it shows what we want to do with TCO17, Watson, and Congnitive Community banners. The main element area, where the bluish picture of a guy with headphones is used, is not a bunner, but an area for notification content.
Second, check this design (B) it shows the actual notification we want to be ready to roll out on August 1-st. You see, quite many staff is going on there: (1) the notification is collapsible (default) to a brief block with text string, and optionally LIVE marker / extendable to the full view; (2) In the full view there should be a way to add a code to play video (ideally, we should be able to put there any video code, not only YouTube), and if video is live, we want be able to overlay LIVE marker over it. This design also assumes that there can be several such notification blocks placed one under another. And, surely, we want to be able easily reuse them for different events.
Now, we want to implement solution which gets the best from designs (A) and (B).
From (A) you get the look and layout of banners:
- They should layout in column on mobile;
- They should layout in horizontal arrangement on desktop (ignore the last example, where three banners are aligned in a column at the right side of the block);
- If we add more banners (or remove some), we'll want to layout them in few rows on desktop. Your code should allow to do it in simple way, specifying how much banners is in each row (it is fine for now, if we have to edit the code to achieve it, but please put some comments into the code, what should be changed to tune it);
- When clicked these banners should redirect to the same places, where current banners redirect users;
- No need to keep SRM announcement string on TCO17 banner;
- You remove from the dashboard current banners, located under challenge card area.
From (B) you get the notification block and use it instead of that bluish picture placeholder, and black stripe with notification text.
- In desktop view it should look and behave the same as in the design (B);
- In mobile, when there is a video added, we should display it in two "lines" (well, if it does not make sense once you try, feel free to discuss in forum);
- Collapse / expansion of the notification should work;
- Should be possible to add several different notifications (they will be placed one under another, and we should be able to collapse / expand them independently);
- For the notification block we want to expose their configuration in a form of JSON file, to allow anybody with no knowledge of HTML / SCSS to easily and rapidly modify notifications. I believe, that JSON file should allow to provide an array of objects (each descibing corresponding notification block), the things we want to configure are:
1) the message to show when the block is collapsed (separately the header and the details);
2) the message to show when the block is expanded (separately the header and the details, if not given, should default to (1));
3) the background image for expanded block;
4) the redirection URL for Learn More button in the expanded block (and the text at that button). If these are not given, we should not show the button.
5) the code for video
6) whether to show LIVE tags in collapsed notification and on video in expanded one (these should be two independent options).
Important
As you see, our specifications here are somewhat open-ended. I believe, the specs do describe quite well, what we want to achieve, but if you see that some technical details do not have much sense, or can be implemented in a better way, do not hesitate to discuss in the challenge forum.Also, once again, we really aim to get it ready before August 1-st, thus we have no time for reposts / expansions of this challenge. Although I believe, this work can be all done in time, should we have to sacrifice something: (1) we can tolerate if the mobile view wan't work ideally; (2) we can tolerate if it is not that flexible in adding / removing banners. The part about notifications, though, is highly desired to work the way described above.