Type out Socket.io in frontend

[Dammshine]

Is your feature request related to a problem? Please describe.
The socket.io library used in DevelopmentMode is not being typed out, and violate single responsibility principle require us to refactor every socket related business logic out of that component.

Describe the solution you'd like
We want to have a clear typed definition for the socket in our frontend code, includes

• For sending out any request, it to have an API defined in our clientSockcet.ts class to do that
• For receiving any request, I want every ServerToClient request to be a generic object that contains shared type property allow it to further deduce the type, and handle accordingly.
• We want to lift up all the state in DevelopmentMode to state management tool
• We want to create a common directory and put type definition for frontend/backend side by side

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.