29 lines
1.4 KiB
Markdown
29 lines
1.4 KiB
Markdown
|
# Front-end Streaming Data Grid
|
||
|
|
||
|
## Task Description
|
||
|
|
||
|
Your task is to create a front-end application that can receive streaming data from a back-end server and present it in a 3 by 3 grid. The back-end server will continuously send data updates, and your front-end should dynamically update the grid to reflect the latest data.
|
||
|
|
||
|
## Requirements
|
||
|
|
||
|
- The front-end should establish a connection with the back-end server to receive the streaming data.
|
||
|
- The streaming data should be displayed in a 3 by 3 grid, with each cell representing an item in in the 'items' array (see the back-end for the full schema)
|
||
|
- Each cell in the grid should display the relevant data received from the back-end server.
|
||
|
- The color of the cell should depend on the 'type' value in the item.
|
||
|
- The grid should update in real-time as new data is received from the back-end server.
|
||
|
- The front-end should handle any errors or connection issues gracefully and provide appropriate error messages to the user.
|
||
|
- Make it look similar to the example image:
|
||
|
|
||
|
|
||
|
![image](./Screenshot.png)
|
||
|
|
||
|
## Technologies
|
||
|
|
||
|
You are free to choose any front-end framework or library of your choice to implement this task. However, keep in mind that the chosen technology should support real-time data updates and provide a smooth user experience.
|
||
|
|
||
|
## Submission
|
||
|
|
||
|
Please submit your solution as a GitHub repository or a zip file containing all the necessary code and instructions to run the application.
|
||
|
|
||
|
Good luck!
|