Frontend Explanation

a. Structure

The frontend of LATE is entirely handled by the VueJS framework as it is a single page application. This differs from traditional websites in that instead of different pages of the site being just different HTML files or HTML served by the backend server depending on the route, the page loads an empty HTML page and Vue once and then Vue takes over everything from routing to interacting with the server to send/receive data. This means the page never refreshes or loads everything again when a link is clicked or the user is redirected to a new page. Vue only updates the DOM when necessary and therefore everything is faster and smoother.

Everything is separated into Vue components as much as possible, for example the Sidebar is separated into a holder Sidebar.vue, and then child components for each tab of the sidebar. Vue components have their own template (HTML), script (JS code for interactivity and actions), and style (CSS).

The frontend communicates with the server back and forth to receive data (user data, courses, coursework, todos, etc.) and keeps it stored using Vuex. When the user interacts with the site, e.g. adding an assignment, the frontend sends the data to the server which actually creates/updates/removes things in the database and then replies with info the frontend needs.

The frontend files can be found in the /src folder and is organized into subfolders.

• /src
  • /assets
    • /style.scss Defines the global website styling. Any styles defined in the module files will overwrite these.
    • /img Images used in LATE.
  • /mixins
    • [/mixin.js] Computed properties, methods, etc. that all Vue components share
  • /store
    • /modules
      • [/module name.js] Vuex module that stores and updates state from the backend server
    • /index.js Initializes Vuex and all state modules
  • /views
    • [/page name] Main Vue components for each of the individual pages
      • /components Vue components for the page
    • /components General page components (Header, Footer, etc.)
    • [/component.vue] Vue modules used globally
  • /api.js Sets up frontend access to the backend server API.
  • /App.vue The Vue component that holds the entire application
  • /main.js Initializes Vue and all other tools we use on the frontend
  • /router.js Defines all the page routes and how navigation is handled