Home

LTI Media Resources wiki

App Architecture

File structure:

• 📁 .github
  • GitHub actions and Dependabot config are found here
• 📁 migrations
  • MongoDB migration scripts for setting up necessary db collections
• 📁 public
  • Contains all static files that the server will serve, such as images
• 📁 src
  • 📁 client
    • 📁 components
      • Includes folders for frontend React components
      • Code reused between different views should be separated into reusable components
      • Each folder name is the component name, with the main file in each folder being index.js, which can be imported by other components
        • Supporting component .js files used only by the enclosing component should also be placed within the folder
      • Top-level components that use a top-level folder: Reusable components and the 4 main tabs
    • 📁 services
      • Includes functions that are used among components, such as getting ltik token
    • 📄 index.js
      • This file is generated by React that creates an entry point to the app
  • 📁 server
    • 📁 api
      • Defines backend routes used by the frontend to retrieve and send data
    • 📁 jobs
      • Contains Node.js scripts for server jobs, such as those for updating the databases for Bruincast, Video Reserves, and Music Reserves records
    • 📁 models
      • Defines functions for querying, aggregating, or updating data directly with the database
    • 📁 services
      • Processes and formats data received from /models before passing it to /api routes
    • 📄 index.js
      • Ltijs and express setup
• 📄 constants.js
  • Defines constants for better organization and readability of parameters and variables such as mediaType, tab indices, and collection names
• 📄 .env.dist
  • When setting up the app locally, copy .env.dist to a new .env file, and fill in the values
  • Environmental variables, such as API URLs, logins, and tokens, should be included here, but left blank
  • Secrets and sensitive info should be prefixed with SECRET_ so that git-secrets will prevent the details from being committed
• 📄 README.md
  • Lays out important setup instructions

Adding new features

Creating a new backend route

1. Create a function in 📁/src/server/models/mediaqueries.js to get raw data from the database or update data into the database
2. In the appropriate service in 📁/src/server/services, call the query function and modify/format data as needed
3. Create the backend route in 📁/src/server/api/ that calls the service and returns what's returned from the service
4. On the frontend, use Axios HTTP request to the route

Adding a new component

• If the component may be reused across different views or in other components, create a new folder for the component in 📁/src/client/components, and within that folder create 📄index.js
  • e.g. Comment, MediaView, Analytics
• If this new component will only be used as part of another component, create a js file for that component within the parent component's folder
  • e.g. MediaPlayer.js, AdminListingsToggle.js