Implement serialisers for APIs

[divinsmathew]

Let's have a serializer function for each APIs.

Currently, whatever we are getting from the backend API, we are directly using it in the application from the response. This creates a tight coupling of data architecture between frontend and backend which makes it hard to maintain if there are any changes in the backend.

A serializer is simply a function that will take in the raw response received from the backend and return a well-formatted object with only the data required in the application. This will isolate the bulky data manipulation code from the component. Also, If a serializer is implemented, when there is a change in the backend API (e.g. change in API response field), we only need to change it in the serializer instead of everywhere in the React app.

Also, one side-effect of not having a serializer is that we see snake case in our React components which is not really nice.