This project was bootstrapped with Create React App.
The challenge is to create two different routes inside the application “/table” and “/user” where:
"/table":
- You should be able to create a table and present the data coming from the backend in realtime. Each new data that arrives must be inserted into the table.
- The candidate must create a search input on the same page that will filter this information within the table.
An example that you can use for guidance:
"/user":
- The candidate must create a card presenting the information of the connected user into the server.
An example that you can use for guidance:
-
use this repo as a boilerplate of your project
-
Use Material-ui v5 for construct your components.
-
On the day of the interview you should have the project running on your local machine for a presentation.
- The backend is already built.
- You can use it as a data source, the client will be connected to the socket in real time.
- You will receive in an interval of 0 and 10 seconds a new response with the financial data and you should use this information to build the table.
JSON schema for market data:
{
"account_name": "Personal Loan Account",
"amount": "890.86",
"credit_card_cvv": "248",
"credit_card_issuer": "maestro",
"credit_card_number": "6370-9605-9936-9733",
"currency_name": "Pataca",
"transaction_description": "payment transaction at Greenfelder",
"transaction_type": "withdrawal"
}
JSON schema for client connected:
{
"client_id": "irZP2T8dsRl1kpCnAAAB",
"first_name": "Otilia",
"job": "Forward Accounts Strategist",
"job_descriptor": "Regional"
}
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.
Launches the realtime server for provide data.
Open http://localhost:3003 to get json response.
Launches the test runner in the interactive watch mode.