Giter Club home page Giter Club logo

stationf_test's Introduction

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

stationf_test's People

Contributors

fran6brg avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.