React developer

Summary: Create a ReactJS UI component to synchronize and display an order book using websocket updates.

Task Description: Your task is to implement an isolated UI component that represents an order book, displaying bids and asks by traders on an exchange. Utilize websocket updates to construct and update the order book (bids and asks array) in an optimized manner, avoiding memory leaks. Implement logic to handle network connection loss, automatically resubscribe, and manage lost packages based on incorrect sequence numbers. You don’t have to fully finish the assignment; spend at most one week on it.

Example Order Book UI:

Resources:

1. Order book synchronization via websockets: Orderbook Synchronization
2. Subscribing to websockets: Subscribing to Websockets
3. Order book response data structure (OrderbookData): OrderbookData Structure
4. Centrifuge-js SDK for websocket connection: Centrifuge-js SDK
5. JWT for subscribing to public websocket channels:
   • Testnet: wss://api.testnet.rabbitx.io/ws: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIwIiwiZXhwIjo1MjYyNjUyMDEwfQ.x_245iYDEvTTbraw1gt4jmFRFfgMJb-GJ-hsU9HuDik
   • Production: wss://api.prod.rabbitx.io/ws: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiI0MDAwMDAwMDAwIiwiZXhwIjo2NTQ4NDg3NTY5fQ.o_qBZltZdDHBH3zHPQkcRhVBQCtejIuyq8V1yj5kYq8

Requirements:

1. Use ReactJS for building the UI component.
2. Integrate the Centrifuge-js SDK for websocket connections.

Technical Specifications:

1. Develop a ReactJS UI component to represent the order book, including bids and asks.
2. Establish a websocket connection using the Centrifuge-js SDK and subscribe to order book updates.
3. Process the incoming websocket data to construct and maintain an optimized bids and asks array, ensuring efficient memory management (Orderbook Synchronization).
4. Merge existing bids and asks with incoming websocket updates, keeping the order book up-to-date.
5. Implement logic to handle network connection disruptions, including automatic reconnection and resubscription.
6. Account for lost packages by verifying the correctness of sequence numbers in the websocket updates.

Deliverables:

1. A ReactJS application containing the order book UI component.
2. Source code with clear and concise comments explaining the implementation.
3. A brief document outlining the approach taken, challenges faced, and possible improvements.

Evaluation Criteria: Your submission will be evaluated based on the following:

1. Functionality: The UI component should accurately display and update the order book using websocket data.
2. Code Quality: The source code should be clean, well-organized, and properly commented.
3. Optimization: The application should handle memory efficiently and avoid memory leaks.
4. Robustness: The solution should account for network disruptions and lost packages.

1. Closures concepts. (Learn)
2. How to implement events in JS (Learn)
3. Types of Functions (Learn)
4. Strict Mode (Learn)
5. Types of Promises (Learn)

1. Define Props and State
2. Class based Component and Functional components
3. Higher-order functions and their implementation
4. How to optimize the React.js application like which hooks are good for optimization.
5. controlled and uncontrolled components.
6. Hooks in detail like- useEffect, useMemo, useContaxt, useRef (Learn)
7. How to manage state using redux Explain the flow.
8. Why react.js is best over another frontend library explain its advantages. (Learn)

1. There is a gap in my resume so questions about the gap and previous non-tech job experience.
2. What do you like to do in your free time?
3. How do you spend weekends?
4. Apart from tech and work what do you like to do?
5. Hobbies and interests.