/stationf_test

discovering (and enjoying) vue 3

Primary LanguageVue

Room reservation

discovering vue 3 in a MEVN stack by building a simple room reservation app

Table of contents

General info

project status is WIP

Stack

  • back: Node.js, Express.js ... see ./package.json
  • front: Vue.js, sweetAlert.js ... see ./client/package.json
  • test: postman
  • deploy: heroku

Todo

  • set up boilerplate: node express mongo, vue
  • create rooms and reservations routes
  • secure secrets variables
  • deploy to heroku once
  • basic front end
    • 1 form to trigger API calls that query mongodb
    • 1 container to list available rooms
  • code the logic (filter room by datetime/capacity/equipments and book them)
  • switch to composition API
  • extract component logic into composition functions (usefull ?)
  • split code between components
  • design front end
  • add some bootstrap-like library (have to wait 2021 Q1 for vuetify*/quasar*/bootstrap-vue* x Vue 3)
  • (ongoing) use Suspense x Skeleton
  • responsive design, (easy but long do so...)
  • understand/find how to restrict access to server from anything other than the client * **
  • lint codebase
  • Algolia / VeeValidate / Nuxt.js ?

Setup

npm run dev

in another shell tab

cd ./client && npm run serve

seed rooms / clear reservations

node seed/seed.js

Nice ressources

(click to toggle)

  • mongodb

  • node

  • express

  • vue

    • vue doc https://vuejs.org/
    • vue3 doc https://v3.vuejs.org/
    • vue cli https://cli.vuejs.org/
    • nice vue 3 tips and tricks, on vs code extensions, error-handling
    • full Stack Vue.js, Express & MongoDB Traversy Media playlist
    • composition API yt video
    • shared state management with Composition API
      • the idea
      • some good example with provide/inject + code lifecycle hooks:
      • beforeMount - Right before mounting of the DOM begins
      • mounted - Called when the instance has been mounted (browser updated).
      • beforeUpdate - Called when reactive data has changed, before the DOM is re-rendered.
      • updated - Called when reactive data has changed, and the DOM has been re-rendered.
      • beforeDestroy - Called right before the Vue instance is destroyed.
      • destroyed - Called after the Vue instance has been destroyed.
    • other hooks:
      • activated - Used for , when a component inside is toggled on.
      • deactivated - Used for , when a component inside is toggled off.
      • errorCaptured - Called when an error from any descendent component is captured.

  • composition API way to do API calls:

    • beforeCreate and created are not needed when using the Composition API. This is because beforeCreate() is called right before setup() and created() is called right after setup(). Thus, we simply put code inside setup() that would normally be in these hooks, such as API calls.
    • (beforeCreate - Called immediately after instance is initialized, before options are processed.)
    • (created - Called after the instance has been created.)

  • heroku setting a buildpack on an application heroku doc

  • git

  • environnement variables

  • eslint set up

  • vue chrome extension

Contact

Created by @Fraberg