#Short description
For this project Vuejs with TypeScript in class-style Vue components was used. I haven't used TypeScript much in Vue Projects, so this was a good opportunity for me. I ran into one problem, which I couldn't solve yet. I wanted to create a model for the search input field, so the value of input changes according to the selected suggestion item. But it didn't work out. Also I would improve the type-definitions, especially for the Vuex store, if I had more time.
For the API calls I had used the axios library, because its most common and does what we needed here. The results for the suggestions where made of three different calls to the API. So I used the Promis.all method, which gathers all 3 promises which returns a singel promis, with an array of the input promises. This returned promise will fulfill when all of the input's promises have fulfilled. Also axios provides to create an instance, which we can be used for all calles we do. Thus we can set the config once and use it for all calls, fe. the api-url or to define the media parameter as music.
For the styling I installed TailwindCss, which I only used for private projects (yet). I like working with this CSS framework, and I wanted to practice more with it.
The structure of the project is pretty straight forward. I divided the view in two parts, search and the result component. Where the suggestion is part of the search. I handled the API calls with the Vuex store. That gave me the flexibility to trigger the search and access the data from everywhere in the project. The benefit, the search and result component stay independent. I put the trigger of the loading indicator also as state in the Vuex store for the same reasons. Its not ideally solved, as improvement the API Calls and the loading indicator should be separated in different Vuex modules.
If I had more time I would also improve the UX handling. Especially the suggestionbox, as well as the loading indicator. It is not ideally triggered. Both calls, for the result list and the suggestion list will be triggered at the same time. But the loading indicator will be hidden, as soon as the first of those two calls are finished. The error handling also still needs work. Right now the user gets no information, when an error appeared.
npm install
npm run serve
npm run build
npm run lint