Tech Stack Overview

The following is an overview of the Tech Stack for this application:

Vue front end

• Design - Vue-Bootstrap is main component frameworks used to design the front end of ConnectEd.
• Vue Router- To handle transitions between pages Vue Router was used, which is the official router for Vue.js. In ConnectEd, the routes were defined in the client/src/index.js file. Here is an example:
  

{
    path: "/search",
    name: "search",
    component: () =>
      import(/* webpackChunkName: "search" */ "../views/Search.vue")
}

This defines the route to the Search page i.e. if this url is visited on the browser then the Search.vue file should be rendered on this page where the user can search for projects.

• Vuex- It's a state management pattern that serves as a centralized store in an application. ConnectEd uses Vuex to store logged in user data. Data stored in Vuex is available to all components leading to easy development. Here is an example of how to access a Vuex state in a component:

form.append("userid", this.$store.state.user.id);

This is in the PostProjects.vue file. The statement assigns the id of the user (fetched from the store) to userid, and appends it to the form.

As well, we can call Vuex action to login or logout a user. For example:

logOut(){
      this.$store.dispatch('loggedOut')
    }

This is in the NavBar.vue file. It calls the loggedOut action from the store to log the user out by clearing the logged in information of the user, and setting the utorid cookie to null.

Serving the Front End

While the front end is written in Vue, when the code is in production, the express server compiles all Vue code into HTML, CSS, and Javascript and serves these compiled files to the browser.

Express Backend

CONNECTeD uses Express, which is a Node.js library, to run the server and create an API the frontend communicates with. Connected defines three controllers to organize API routes: ProfilesController.js, ProjectsController.js and RedirectController.js.

• ProfilesController.js has functions to create, update and find user profiles in the database.
• ProjectsController.js has functions to create, update, search and delete user projects in the database.
• RedirectController.js has functions to redirect users to their profile, or the login page if they are not yet logged in.
• routes.js is the file forwards API requests to the appropriate controller methods. In the example below, a post request is made to create a new user in our database and is forwarded to the ProfileController.
  

app.post('/connect/create_profile', 
    upload.single('profile_picture'), ProfileController.register)

ConnectEd's database manager is Sequelize, which allows the functions in the controller classes to efficiently search, retrieve and delete data from the database. More information about ConnectEd's database manager can be found here.

If a user uploads a file, the server uses a library call multer to handle image upload. You can read more about multer here

Using weblogin

CONNECTeD uses the weblogin service provided by the University of Toronto to authenticate a user's credentials. A user can sign up only if they login through the weblogin system. Each time the user wants to either sign up or sign in, the sign-in page redirects the user to the weblogin page where the user needs to sign in using their utorid. After the authentication process is done, the authentication information is shared with the front end using Vue cookies. A detailed explanation of how to use cookies to obtain user information can be found here.