Topcoder Challenge | Topcoder Community

Challenge Overview

Welcome to the Attendee Admin - Web App UI Prototype Part 2 challenge!

Note: This challenge has shorter appeals/appeals response/final review phases. Make sure you don’t miss any deadline.

In the previous challenge, we created a set of pages for our event management application that will be used from the admins using ReactJS.

In this challenge, we need you to create the rest of the pages based on the provided storyboard.

Feel free to ask on the challenge forum in case of any doubt/question.

Desktop
Tablet. We don’t have a specific design for tablet. Follow the best practices to make the app responsive. You are free to use Bootstrap.

All screens from 14 to 25 from the MarvelApp (33-*.png to 44-*.png from the file names) are in scope of this challenge.
You can download those screens from the link provided on the challenge forum.
All charts/graphs need to be implemented. Please confirm the chart library in the challenge forum.
This should work as date range picker in 35-events-reports.png.
Clicking a row in 36-events-engagement.png should show the same modal as in 44-new session - engagement result.png
Clicking “Add question” in 38-events-engagement-faq.png should add another row of QUESTION/ANSWER.
In 37-events-engagement-wall.png the user should be able to attach an image or a file. Clicking enter should post the new comment/post. Speech-to-text is out of scope.
For new sessions, the table in the `Attendees` tab will be empty.
For new sessions, each chart/graph in the `Reports` tab will show `Data not yet available`.
For new sessions, the engagement tab will also be empty. Just show empty tabs (Event engagement, wall, faq, feedback).

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.

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 create all styling.
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.

All JavaScript must not have a copyright by a third party.
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.

The winner will be asked to create a Merge Request.