FE Challenge Pedro Neves

[psnev89]

As there is a product at Unbabel that uses micro frontends, I decided to go for a npm workspaces approach, decoupling possible shared/common modules. In this case, I only decoupled the API part, but could also be made for base UI components.
Also, the app is running a late vue 2 version, meaning that allows the use of the composition API, which I used.

Things I highlight:

• useTranscriptionsStore composable that manages transcriptions' module state.
• useTranscriptionsService composable that handles app and API "connection". Works as a translation layer, If anything on the API changes, we'll only need to change it here.
• TranscriptionReadModel class. This is a pattern that I personally like. It works like a helper for the View Model, with only readonly properties. It allows us to "lock" specific component prop types while also being the single source of truth for all the transcription's properties display.

As I don't have much free time, I tried to be pragmatic. Some improvements that could be made:

• Add more tests (it was taking me too long and the mocks weren't friendly so I dropped them);
• Use VueX instead of a store composable;
• Prettify the README;
• Add TypeScript. This would help a lot in building a consistent API and app.