Implementation

We document the steps involved in implementing the project, so as to facilitate the maintenance and enhancement of the project in the future.

This application is limited in the functionalities it initially provides, but it is still not trivial. Taking advantage of the open source code available in GitHub and following the examples there, we can get the necessary code skeleton in place. We can learn the bare minimum to get things done without being daunted by all the intrinsic details. When we hit bugs or encounter unexpected issues, Google was our friend. Chances are that someone else may have seen the exact same problems before.

Initial skeleton

There is an open-source web application that resembles our application with both frontend (Vue.js) and backend (Node.js) implementations. This tutorial is most helpful:

Vue.js + Node.js + Express + MySQL example: Build a full-stack CRUD Application

We have a document on how to set up your local development environment and duplicate the setup in the tutorial for testing.

Beef up the frontend

This Vue-based application resembles our application by providing a navigation with user signin/signup and a sample dashboard with detail pages.

https://savvyapps.com/blog/definitive-guide-building-web-app-vuejs-firebase

Integrate with Google signin

We prototyped a Firebase implementation of Google signin, but in the frontend only. We use a Vue plugin to display the Google Signin button.

https://rmartide.github.io/vue-google-login/

On the server, Google has the sample code for authenticate a user using the supplied token:

https://developers.google.com/identity/sign-in/web/backend-auth

Most API calls are allowed for users who are logged in. For this, we follow the instructions at this tutorial.

Node.js Express + Vue.js: JWT Authentication & Authorization example

Database tables setup

The key reference document is:

https://sequelize.org/v4/manual/tutorial/associations.html

A list of key tables:

  • Users: all the users;
  • Roles: admin, teacher and student;
  • Assignments: teachers can create assignments and add students to each assignment;
  • ( many-to-many relationship between Users and Assignments )
  • Lotteries: every lottery entry submitted by each student;
  • POAS: each person as Person Of American Significance;
  • ( one-to-many relationship from each user’s assignment to lottery entries )
  • ( one-to-many relationship from POAS to Lotteries )

Form validation

We ended up using minimal verification. We simply check if required fields are filled out and if entered information meet minimum and maximum character limits.

Dynamic form in Vue

Students have the option to enter 3-5 POAS choices (the min and max is set by teacher). As we can not predict in advance which student will want to submit what number of choices, we made our form dynamic so students can easily add or delete POAS choices.

Alert messages

https://vuejsexamples.com/simple-alert-for-vue-js/

A few useful packages

  • Progress status bar: https://github.com/bastidest/vue-step-progress
  • Remove whitespaces from a string
  • https://codeburst.io/bootstrapvue-more-table-customizations-fc34c306a476

To-dos