Mobile Devices WebApp is developed for the technical assessment of Precept Health, NZ, which develops and sells Medical Device Integration and Clinical Applications for hospital use.
- Vue.js 3.2.37
- Vuex 4.0.0
- Lang: Javascript
- CSS: Bootstrap v5.0
All the development is tested on both Firefox and Google Chrome
npm install
npm run serve
npm run build
The goals of this project were as such,
- User authentication
- View Mobile models
- Add new model
- Update existing model information
- Successfully delete a model.
Which were successfully delivered by my Web application.
Functional components were used in this project because In Vue 2, functional components had two primary use cases:
- As a performance optimization, because they initialized much faster than stateful components
- To return multiple root nodes
However, in Vue 3, the performance of stateful components has improved to the point that the difference is negligible. In addition, stateful components now also include the ability to return multiple root nodes.
As a result, the only remaining use case for functional components is simple components, such as a component to create a dynamic heading.
The src folder has following folders in order,
- api
Here resides the file main-api.js where my main URL of the api exists. Every other components and store accesses this file to fetch data.
- components
Components has two vue files, Modal.vue and Nav.vue. Modal.vue component are used in views to access Modal for editing data and Nav.vue is used in App.vue globally to access Nav bar which is stylized with Bootstrap v5.0
- router
In this project vue-router 4.0.3 is used. Vue being a single page application it's router handles all the vue files to access and behave as a single page application even though each page is in different paths.
- store
Vuex 4.0.0 as state management is used here. Basic authentication of user is handled from here.
- views
It consists all the pages that web application routes to. Mobile devices list along with all the CRUD operation is handled from here.
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.