Project Corona | Time Slider

Challenge Objectives

• Replace the mode of communication between the listener and viewer app from redis to kafka

• Provide a slider feature to allow the user to slide the timeline.

 

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 them in Redis. Second app, called corona-viewer will read the data in Redis and display it in a map in a meaningful way

 

Technology Stack

There are two apps involved in the project:

Corona-Listener

• Nodejs version 10

• Kafka

• Redis (Which will be removed as part of this contest)

 

Corona-Viewer

• Nodejs version 10

• Redis (which will be removed as part of this contest)

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

 

Code access

There are two apps relevant for this contest. Listener app and the Viewer App. Use the develop branch and clone the app to use as the base code for this contest.

 

Individual requirements

Replace Redis with Kafka (Major Requirement)

• Right now, the Listener and Viewer apps communicate with each other through Redis. Listener, listens to Kafka, processes incoming messages and passes on the data to Redis. Viewer reads from Redis and shows the data on the UI.

• Replace Redis with Kafka in this scenario - both in the Listener and Viewer apps.

• Basically, in Listener update this function to not pass data to redis, but to pass it to Kafka instead. The topic that you will post to is “corona.saturate.create”. Use the postEvent method of the bus api wrapper to post an event to Kafka. Do not post it directly to kafka and use the wrapper module. Reference.

• Update the Viewer app’s backend as well to listen to Kafka on the “corona.saturate.create” topic and to display the data on the UI as received from Kafka.

Provide a Player bar on the UI (Major Requirement)

• Before you make changes to the app, run it once - both the listener and viewer. Alternatively, you can check out our hosted instance. Here, observe how the events are displayed on the UI, one after another. Each event is shown for a second (time is configurable) before the next event is shown in its place.

• Now, assume what you are seeing is a movie. The events being shown is the movie “playing”. If you move the thumb on the seek bar left or right, (the control that shows the current time at which the movie is playing - in other words, the “slider”), the events are all shown in a fast forwarded fashion and when the user leaves the seek bar control, the events start playing out from the selected time. This is what you have to implement. More details follow.

• Provide a “Player” or a slider feature, with the start date of the slider being 7 days back from the current date (Time would be at 00:00). End date of the slider will be dynamic - it will be today’s date, with the time always being current time. This means that if the seek bar is at the end of the slider, new data from Kafka will continue to be shown on the UI as they arrive and the slider will always stay at the end.

• The design of the slider is left to you. We only need to see the start date and end time along with the seek bar and the thumb / slider to move along the seek bar. You don’t have to provide any Play or Rewind / Fast Forward buttons. At all times, the “movie” is playing and moving the slider front or back will rewind or forward it correspondingly.

• Remember to show the events displaying rapidly as the user moves the slider forward or backward to give the “rewind” or “fast forward” effect. If the user is not controlling the slider, then display the events at the time position of the slider and the slider moves forward each second (configurable) and new events are displayed. Each event has a time value, indicating the time at which the event should be shown. This now means that multiple events can be displayed on the UI if their event time is the same. Continue to show the event dot after the event card has been hidden. Clicking on the dot should show the event card, as it does currently.

 

Deployment guide and validation document

Update the deployment guide of both Listener and Viewer as needed.

 

Important Notes

• Follow existing conventions used in the app.

• Ensure there are no lint errors. Note that UI in Viewer app has a linter of its own and backend of Viewer app has a different linter.

• There are existing configurations related to redis in both apps. Remove them. They are no longer needed.

• The sidebar in the UI of the viewer will continue to exist. Your “slider” position can be anywhere on the map and must be always visible.

• Since there is no design for the slider, reviewers will take into account how much the slider matches with the current theme. The slider should not look out of place.

Final Submission Guidelines

Zip the source code of both the apps and upload to Topcoder.