Topcoder Challenge | Topcoder Community

Challenge Overview

Challenge Objectives

Create a UI in Reactjs that depicts the events taking place on the Topcoder Platform
Integrate the UI with an existing backend that will provide the events for display

Project Background

Corona project is about creating an interactive dashboard for public use that showcases the footprint of Topcoder and activities that take place on the platform across the globe
There are two apps in this project. First app, called corona-listener will read incoming messages in kafka and proceed to get additional data associated with the message and save then in Redis. Second app, called corona-viewer will read the data in Redis. The UI that you will be building will be for the corona-viewer app. It already reads the data in redis and has a web page and web socket server that you can make use of.

Technology Stack

There are two apps involved in the project:

Corona-Listener

Corona-Viewer

Nodejs version 10
Redis
Reactjs version version 16.8 (latest). Note that it is not necessary to use React hooks.

Code access

The code for corona-listener can be accessed here and the code for corona-viewer can be accessed here.

Individual requirements

Create UI in Reactjs (Major Requirement)

We have created the UI in javascript without any framework and you can find it here. This is just a prototype though and not hosted by corona.
You need to replicate this UI in Reactjs.
Update the existing corona-viewer app with the Reactjs UI. It currently contains an Angular UI that you need to remove and replace it with your Reactjs based UI
More details about the UI follow in another document shared in the contest forum

Integrate the UI with the backend (Major Requirement)

Integrate the UI with Corona Viewer app
Corona Viewer already hosts a web page and a web socket server. Remove the Angular app and use the newly created Reactjs based UI instead. Your new UI should be hosted by corona viewer itself, with the viewer hosting the build files.
Ensure that there is a development only start script for the UI and the viewer, that allows us to make changes without the need to build the UI each time.
More details about the integration follow in the document shared in the contest forum

Deployment guide and validation document

Update the Deployment guide for corona viewer app as needed. No validation document expected, it’s nice-to-have.

Important Notes

Don’t use a router library. There is only one page for the UI.
Don’t use a state management module too.
Using react hooks is optional.
Use airbnb’s react styling guide for the UI.
Backend is already using standard as the linter. Don’t make changes to the backend, unless it is needed for working with the UI.
The backend will hosting the build version of the UI too and not just the dev version
Note that the backend of corona-viewer app is already reading from redis. You don’t have to make any changes to this. Follow the existing angular UI and figure out how to integrate your reactjs app with it

Zip and submit corona viewer app. This should contain the code for the front end along with the deployment guide.