Skip to content

Latest commit

 

History

History
37 lines (31 loc) · 2.58 KB

tools.md

File metadata and controls

37 lines (31 loc) · 2.58 KB
Raw

tools and technologies for the 'Can I Park Here?' PWA

for the project we've decided to push for a PWA (progressive web app)[1], which will serve as a proof of concept web-application. if all goes well, we can transfer the system to Flutter[2] based frameworks for the final implementation. Buliding a PWA needs some essential tools along with HTML, CSS, JS etc. A list is provided for which we are doing research on as what we might use for the implementation.

(N.B: the list is subject to change a lot depending on the requirements)

  • Front End tools:

    • VueJS [3] as the potential front end framework. A lot of useful tools are integrated with VueJS that smoothes out the PWA development.
    • Vue CLI[4] as the toolchain for fast VueJS based front end development.
    • Chrome Devtools, which is esentially a debugger from Chrome web-browser. Since we'll be testing the app in Chrome, Devtools is important to chross check the UI details real time.
    • Lighthouse[5] as the audit system for the front end performance for the PWA. It is an open source, automated tool for improving the quality of web pages
    • Material Design[6], as the design philosophy for the UI. It is not strictly a tool but rather a visual language that synthesizes the timeless principles of good design with the innovation of technology and science.
    • Vuetify[7], as the implentation of Material Design for VueJS. Basically a semantic component framework for Vue which aims to provide clean, semantic, reusable components.

  • Back end tools:

    • Node JS[8], as the Javascript Backend.
    • NPM[9], a package manager for javascript. It provides a lot of packages for both the front end and back end, easing out the development workflow.
    • Workbox[10], a set of libraries and Node modules that make it easy to cache assets and take full advantage of features used to build PWAs.
    • Firebase[11], a service in the cloud that helps automate back-end developer tasks like database creation and handling, authentication, messaging system.

  • APIs

    • Google Maps Platform API[12], the de factor API for map integration and customization for the requirements for the PWA.

[1] https://web.dev/progressive-web-apps
[2] https://flutter.dev
[3] https://vuejs.org
[4] https://cli.vuejs.org
[5] https://developers.google.com/web/tools/lighthouse
[6] https://material.io/design
[7] https://github.com/vuetifyjs/vuetify#introduction
[8] https://nodejs.org/en
[9] https://www.npmjs.com
[10] https://developers.google.com/web/tools/workbox
[11] https://firebase.google.com
[12] https://developers.google.com/maps