HostelWorld app by Pablo Trabajos
It is composed of a main instance and a component. There is no need for event bus or Vuex since there is no child-to-child communication.
Axios: for API fetch Vue-material: for the material components
- On the Axios side: check for the result of the promise with a then-catch structure.
- On the filters: the filters check for null values to avoid TypeErrors.
- On the template: v-if is used to display some placeholder text whever some data has not been loaded (yet).
I have implemented two filters:
- normalize: it takes the overall rating and normalize from 0..100 to 0..10. It checks if the value is present and returns a placeholder text if the value is missing.
- convert: converts currencies. I made it in a way that can take an extra argument to pick the output currency. It is not very useful in this case because all conversions are VEF-EUR, it is there just to show how it could be extended if there were more curriencies to convert to. It checks if the value is present.
I have used Vue Material components. The blue star indicates a featured property.
I have added two basic tests for determining if the component is brought up and the output when the list is missing.
I have prepared the code as progressive web app with a manifest.json. I have made some changes to improve Lighthouse score:
- Forced HTTPS on font load.
- Made fonts use font-display: swap.
Build using
npm run build
For best performnace serve with:
serve -s dist
npm install
npm run serve
npm run build
npm run test:unit
npm run lint