This is my solution to the coding challenge. This App is a stock tracker that allows the user to subscribe to stocks and see their real-time prices. The user can also unsubscribe from stocks and add new stocks to his watch list. The app also has a dark mode and a light mode to improve the user experience. The app is responsive and can be used on mobile devices as well.
Please make sure to have Node 18 up installed.
Nothing changes, you can run yarn
or npm install
to install dependencies.
After that, you can run:
# npm
npm run dev
# or yarn
yarn dev
After running the above command, you can see the client application running in your browser by going to http://localhost:8080.
The useWebSocket
hook returns an object containing the following properties and methods:
stocks
: An array ofStock
objects. It represents the current state of stocks being tracked or monitored.webSocketState
: Represents the current state of the WebSocket connection. It's of the typeWebSocketState
, indicating states like Open, Closed, or Connecting.value
: A string value, presumably used for tracking input or filter values in the context where the hook is used.isDuplicate
: A boolean indicating whether a stock (based on thevalue
state) already exists in thestocks
array.isReload
: A boolean indicating if a reload is required, typically true when the WebSocket is disconnected or closed.
subscribe(isin: string)
: A method to subscribe to a specific stock identified by its ISIN. It internally callsmanageSubscription
withSubscriptionType.Subscribe
.unsubscribe(isin: string)
: A method to unsubscribe from a specific stock identified by its ISIN. It internally callsmanageSubscription
withSubscriptionType.Unsubscribe
.setValue(value: string)
: A method to set thevalue
state, presumably used to track user input or filter criteria.reconnect()
: A method to attempt reconnection to the WebSocket if it's closed. It also resubscribes to all stocks in the watch list.
The returned object from useWebSocket
provides the necessary interface to interact with a WebSocket for real-time stock data updates. Components using this hook can display stock data, handle user subscriptions to specific stocks, and react to changes in WebSocket connection state.
const {
stocks,
webSocketState,
subscribe,
unsubscribe,
setValue,
value,
isDuplicate,
reconnect,
isReload,
} = useWebSocket();
// Example usage in a component
- Light and dark mode
- Pagination
- Improve documentation of the components with Storybook
- Add end-to-end tests with Cypress to test all the user stories.
- Add a caching strategy to the app, so that the user can see even when they reload the page.
- Only subscribe to the stocks that are visible to the user.
- Add transitions when the user adds or removes a stock.
- Improve test coverage.
- Improve typescript types.
-
What happens in case the WebSocket disconnects? How would you go further to keep the live data available or inform the user? Please discuss the challenges.
I implemented a reconnection strategy in the app, through a alert message that is displayed to the user when the connection is lost. The user can click on the button in the alert message to reconnect to the WebSocket. When the user clicks on the button, the app tries to reconnect to the WebSocket. If the reconnection is successful, the alert message is hidden and the user can continue using the app and the subscription to the stocks is restored. If the reconnection fails, the alert message is displayed again. The user can click on the button again to try to reconnect to the WebSocket. Another way to handle this case is to automatically try to reconnect to the WebSocket using a exponential backoff strategy. This way the user doesn't have to click on the button to reconnect to the WebSocket. The app will try to reconnect automatically and if the reconnection is successful, the user can continue using the app and the subscription to the stocks is restored.
-
What happens if a user adds an instrument multiple times to their list? Please discuss possible challenges and mitigations.
I implemented a check in the app, so that the user can't add the same stock twice. If the user tries to add a stock that is already in his watch list, he will see a notification that he already has this stock in his watch list. Another way to handle this case is to allow the user to add the same stock multiple times, but display a notification that he already has this stock in his watch list and display the number of times he added it. This way the user can see how many times he added the same stock and decide if he wants to keep it or remove it.
-
What potential performance issues might you face when this app scales with multiple subscriptions? How would you improve the speed and user experience?
I implemented a pagination strategy in the app, so that the user can see only the 5 latest stocks at a time. This way we can avoid rendering a lot of data and also avoid unnecessary updates and re-renders. One improvement that I would like to make here is to only subscribe to the stocks that are visible to the user. In my current implementation I subscribe to all of the stocks that the user adds to his watch list, even if they are not visible to him. This can be improved by subscribing to the stocks only when the user navigates to the page with the stock list.
- Added eslint and prettier to the project.
- Added husky and lint-staged to the project to run eslint and prettier on commit.
- editorconfig added to the project to keep the same code style across different editors.