discovering vue 3 in a MEVN stack by building a simple room reservation app
project status is WIP
- back: Node.js, Express.js ... see ./package.json
- front: Vue.js, sweetAlert.js ... see ./client/package.json
- test: postman
- deploy: heroku
- 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 ?
- deployed version: https://reservation-stationf.herokuapp.com/
- or clone this repo locally, then:
npm run dev
in another shell tab
cd ./client && npm run serve
seed rooms / clear reservations
node seed/seed.js
(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
- deploy sub dir stackoverflow thread
-
environnement variables
-
eslint set up
Created by @Fraberg