CROWD FOR GOOD - YERC - EPIIC Frontend Reactjs Microtasks phase#3

Welcome to the CROWD FOR GOOD - YERC - EPIIC Frontend Reactjs Microtasks Phase#3. Topcoder and YERC (Yellowstone Ecological Research Center) are working together to create a new platform to monitor, understand, and improve the health of our planet’s ecosystems called EPIIC (Ecosystem Prognosis Impacts Information Cooperative). This collaboration is part of the “Crowd for Good” initiative (Topcoder's non-profit program) and we are inviting all Topcoder Developers to join and take part in this project to create a better future for our environment.

Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. Let us know if you have any questions in the challenge forum!

Grand Prizes

- 3 Yellowstone Guided Tour Packages (travel not included)
- 5 Yellowstone Virtual Ecological Workshops 

These prizes will be awarded at the conclusion of the project to the Topcoder members who have accumulated the most wins in the series.

Challenge Prizes

This challenge is a part of "Crowd for Good” program and don't have cash prizes, instead, we have the following prizes for members that participate in the challenge:

• YERC Topcoder Points that can be collected in this challenge series to get the GRAND PRIZES once the project complete
• YERC swag (hats and maps) for the top 2 winners
• Topcoder TCO20 Points
• Every member whose submission used in the EPIIC platform will get credited on the final platform product in a credits page
• Every member whose submission used in the EPIIC platform will get a certificate of participation from YERC and Topcoder

Background:

This platform, called EPIIC (Ecosystem Prognosis, Impacts, and Information Cooperative), will be an open-source, collaborative effort built on scalable, cloud-based services, to be used by people around the world to help ecosystems around the world in need of protection and restoration.

For this initiative to succeed, it will require lots of data in a timely manner, a robust cloud-based infrastructure, and enthusiastic users of the data who will participate in modeling complex ecological systems
More information about this project background can be found from the following link: https://www.topcoder.com/community/member-programs/crowd-for-good/yerc/info

Requirements:

In this challenge, you can pick up issues listed on Gitlab and accomplish them during 12 hours to get the prizes which are mentioned in the issues titles.

• Select an issue labeled as tcx_OpenForPickup to work!
• Self-assign yourself to the issue, add tcx_Assigned and remove the tcx_OpenForPickup (if you don't have enough permissions to do this, ask in the issue ticket itself).
• Follow the instructions in the ticket, work from the latest commit in the develop branch (create a new branch from latest develop branch and name with issue-ID-YOURHANDLE).
• Once ready, create a merge request, and label the original issue ticket with the tcx_ReadyForReview label.
• From this moment you may pick-up the next issue and start working on it, but if any problems are detected with your previous pull request, fixing them will be the top priority.
• Don't hold an issue ticket for too long if you can't fix it in 12 hours. If an issue demands more time to be fixed, comment in the ticket and provide a Merge Request with the work in progress. Otherwise, de-assign yourself from the ticket and label it back with the tcx_OpenForPickup label. If the Merge Request which shows the work in progress is not provided, the extension would not be granted and the issue would be unassigned.
• If you have any questions regarding a ticket, comment in the ticket itself and don’t use the challenge forums. Use the challenge forum only for generic questions.
• If you think that some issue has insufficient points, please, ask for a raise before assigning the issue to yourself. Most likely points couldn’t be increased if not confirmed before assigning.

#14 : [75pts] Dashboard - Visualizations - When click in "..." button, need to show a flyout menu
https://gitlab.com/topcoder-consulting/yerc/epiic/-/issues/14 

#15 : [15pts] Dashboard - Add/Edit Visualizations - Fix dropdown showing scroll bar in popup.
https://gitlab.com/topcoder-consulting/yerc/epiic/-/issues/15

#16 : [30pts] Dashboard - Add/Edit Visualizations - Update popup to match with provided design
https://gitlab.com/topcoder-consulting/yerc/epiic/-/issues/16 

#17 : [30pts] Fix font family and style to match with provided design
https://gitlab.com/topcoder-consulting/yerc/epiic/-/issues/17 

#18 : [20pts] Homepage - Our Team - Fix layout from select profile and arrow size
https://gitlab.com/topcoder-consulting/yerc/epiic/-/issues/18 

#19 : [15pts] Dashboard - Visualizations - Update charts colors to match with provided design
https://gitlab.com/topcoder-consulting/yerc/epiic/-/issues/19 

#20 : [20pts] Datasets Details - Update tab layout to match with provided design
https://gitlab.com/topcoder-consulting/yerc/epiic/-/issues/20 

#21 : [15pts] Datasets Details - Add missing icons to Used Device
https://gitlab.com/topcoder-consulting/yerc/epiic/-/issues/21 

#22 : [75pts] Dataset Details - Implement Data Preview
https://gitlab.com/topcoder-consulting/yerc/epiic/-/issues/22 

#23 : [15pts] Dataset Details - Implement Log History
https://gitlab.com/topcoder-consulting/yerc/epiic/-/issues/23 

#24 : [30pts] Dataset Details - Implement Dataset Performance
https://gitlab.com/topcoder-consulting/yerc/epiic/-/issues/24 

#25 : [75pts] My Profile - Account Info
https://gitlab.com/topcoder-consulting/yerc/epiic/-/issues/25 

#26 : [50pts] My Profile - Donation Info
https://gitlab.com/topcoder-consulting/yerc/epiic/-/issues/26 

#27 : [150pts] Forum - All Questions
https://gitlab.com/topcoder-consulting/yerc/epiic/-/issues/27 

#28 : [50pts] Forum - Thread
https://gitlab.com/topcoder-consulting/yerc/epiic/-/issues/28

#29 : [20pts] Forum - Added New Question
https://gitlab.com/topcoder-consulting/yerc/epiic/-/issues/29 

#30 : [30pts] APIs Status
https://gitlab.com/topcoder-consulting/yerc/epiic/-/issues/30 

Assets/Design

• Marvelapp with Handoff (IMPORTANT: Only pages related above are in scope)
• Source: Please check the forum.

Important:

• You can use the latest ReactJs
• Target devices:
  • Desktop
  • Tablet - We don’t have a specific design for tablets. Follow the best practices to make the app responsive.
  • Mobile - We don’t have a specific design for mobile. Follow the best practices to make the app responsive. 
• Components must be re-usable. The component should be derived based on the configuration.  Configuration file to contain the required configurations required to render the page. So DON’T just copy-paste code block, always reuse and change just what is needed)
• Use Linter, Jest, and other best practice libraries to maintain your code quality.
• Your submission must follow Best Practices, please take a look at React Docs.
• Put clear comment/documentation for all components
• Create a README.txt file that explains how to deploy your submission, structure, and commands
• Create clear documentation to set up your submission locally

Specific HTML/CSS/JavaScript Requirements:

HTML/HTML5:

• Provide comments on the page elements to give a 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 on your reason for any validation errors. Use the validators listed on the scorecard.

CSS3

• Provide comments on the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
• Please use clean INDENTATION for all CSS so developers can follow the code.
• All CSS naming should not have any conflicts.
• As possible use CSS3 style when creating all styling.
• Use CSS to space out objects, not clear/transparent images (GIFs or PNGs), and use proper structural CSS to layout your page. Only use table tags for tables of data/information and not for page layout.

Javascript

• All JavaScript used must not have any copyrights to any third party. You are encouraged to use your own scripts, or scripts that are free, publicly available, and do not have copyright statements or author recognition requirements anywhere in the code.
• It is fine to use GPL/MIT/Open Source code. 
• You are encouraged to use your own scripts, or scripts that are free, publicly available, and do not have copyright statements or author recognition requirements anywhere in the code.

Images

• Images should be properly compressed while still having good visual quality.
• Please use best practice repetition usage of background based images.
• Please use sprites when using icons for your submission.
• Make sure your submission look sharp for Retina and Standard devices
• Wherever it makes sense, you can use icon fonts instead of images.

Web Browsers Requirements

• Microsoft Edge
• Firefox latest version
• Safari latest version
• Chrome latest version

Final Submission Guidelines

Create a Merge Request against the develop branch. Note, to create a MR you will need to create a new branch with issue id and your handle. Ex. issue-100-yourhandle.