|
1 | 1 | ## React Coding Challenge |
2 | 2 |
|
3 | | -This code challenge tests your skills in react js, testing and modular design. The purpose of the application is to correctly render a stream of messages coming from an api. Different messages will be coded different colors and require slightly different rendering. The rules are described in detail below. |
| 3 | +This code challenge tests your skills in react.js, testing and modular design. |
| 4 | +The purpose of the application is to correctly render a stream of messages coming from an api. Different messages will be coded different colors and require slightly different rendering. The rules are described in detail below. |
4 | 5 |
|
5 | | -This challenge already includes an API response. It is not required or expected for you to make any changes to this interaction. The 3 priorities that we provide you are: |
| 6 | +This challenge already includes an API response. It is not required or expected for you to make any changes to this interaction. |
| 7 | + |
| 8 | +The 3 priorities that we provide you are: |
6 | 9 | * 1 = error |
7 | 10 | * 2 = warning |
8 | 11 | * 3 = info |
9 | 12 |
|
10 | 13 | ### Acceptance Criteria |
11 | 14 |
|
12 | | -1. Messages should be rendered in a grid-like structure determined by you. The newest messages should appear at the top of the grid. |
| 15 | +1. Messages should be rendered in a table-like structure. The newest messages should appear at the top of their respective columns. |
| 16 | + |
| 17 | +Note: The example design below. |
| 18 | + |
| 19 | + |
| 20 | + |
| 21 | + |
13 | 22 | 2. The messages should be color coded depending on the priority of the message. The appropriate color per priority is: |
| 23 | + |
14 | 24 | * error: #F56236 |
15 | 25 | * warning: #FCE788 |
16 | 26 | * info: #88FCA3 |
17 | | -3. Each time a message with the priority level of error is received, a snackbar containing the error message should also appear at the top of the application. The error should disappear in 2 seconds or when another error message takes its place. |
18 | | -4. A user should be able to clear the grid of all messages at any point. |
19 | | -5. A user should be able to start and stop incoming messages. By default the messages should be running and displaying on the grid. |
20 | | -6. Use material-ui components and JSS styles. |
21 | | -7. Test your application to the degree that you feel comfortable with. No specific testing frameworks are required. |
| 27 | + |
| 28 | +3. Each time a message with the priority level of error is received, a snackbar containing the error message should also appear at the top of the application. The error should disappear in 2 seconds, when another error message takes its place, or when the user clears it via the provided button located in the error message. |
| 29 | +4. A user should be able to clear all messages at any point. |
| 30 | +5. A user should be able to clear a specific message in a specific column |
| 31 | +6. A user should be able to start and stop incoming messages. By default the messages should be running and displaying on the grid. The start/stop button should update depending on the state of the feed. |
| 32 | +7. A user should see a count of specific messages in each column |
| 33 | +8. Use material-ui components and JSS styles. |
| 34 | +9. Test your application to the degree that you feel comfortable with. No specific testing frameworks are required. |
| 35 | + |
| 36 | +*** Applicants are provided this challenge with no expectation on deadline. Please take the time you need to complete the challenge to the best of your ability. *** |
0 commit comments