Challenge Overview
Welcome to Topcoder Data Stream User Interface contest. This contest is to create a user interface to view the data created on the Topcoder platform that will be streaming on Kafka.
ATTENTION: The submission phase duration of this contest is 48 hours.
Contest Details
Topcoder has started using Apache Kafka to log events that occur on the topcoder platform - stuff like when a contest gets created, when a member posts a discussion to a forum etc. There are multiple topics on the stream and each topic gets certain amount of data throughout the day.
We would like you to create a user interface using Twitter Bootstrap (latest version) and Angular or Reactjs. You will use expressjs for the server along with ws socket library. The requirements of the user interface are:
-
Allow user to view the topics available on the Kafka stream. Since new topics could be added while the app is active, make sure that a simple page refresh fetches the latest topics.
-
User will select a topic and request to view all data present on this topic. We expect you to provide a dropdown based selection and a button to trigger the data view.
-
User will then see all the data present on the selected topic. We don’t expect to see data from the beginning of time but instead data that becomes available once the app started subscribing.
-
The data will be presented in a table format with the top level fields in the event as the columns. Thus, the columns will be topic, originator, payload, timestamp, mime-type etc.
-
It should be possible to apply a filter on each column - the filter will be an input field that will allow the user to enter any value. Filter can be applied on multiple columns at the same time
-
The data will be LIVE - as and when new data is passed into the stream, the data will be shown on the user interface. This is where ws socket library comes into play - use sockets to show the data in real time.
-
In the same page where the user is viewing the data, the user should also be able to enter data that will be passed into the kafka stream for the selected topic. In other words, allow the user to act as a producer connected to the Kafka stream. The entered data will thus also become visible in the data stream.
Points To Note
-
Your solution should be easy to deploy to heroku without any additional modifications. Note that you are not required to deploy and share the url - only ensure that we can deploy
-
You can use a locally deployed Kafka stream for your development. However, note that since we will deploy to heroku, we will be using a HTTPS based endpoint for the kafka stream. Your solution should support this.
-
Also provide unit test cases (server only)
-
We want to have few parameters configurable like - Kafka broker Ids, Kafka Username & password
-
Kindly use Nodejs version 8