Front End Structure

Here is a brief introduction of the current ClassTranscribe front-end structure.

Structure

• App.js - Major routes are declared here

• src/components - General React Components are defined

• src/layout - The basic components for layouting a screen

• src/redux - Redux states, selectors, and dispatch functions are defined here

• src/azure-app-insights - Configurations for Azure Application Insights

• src/screens - The major web page screens

  Each screen usually has a components/ directory containing all the React components used by this screen, and a controllers/ directory containing scripts and controllers for this screen.

  • Admin - Screens for admins
  • Instructor - Screens for instructors
  • MediaSettings - Settings for videos
  • OfferingViewing - The homepage
  • Watch - Screen for watching videos

• src/utils

  • links - Pathes to different screens and window's location handlers.
  • env - Environment variable handlers
  • cthttp - HTTP requests and response handlers for backend API's
  • user - User/Account information and action handlers
  • search - Basic search functions
  • prompt - Prompt component creator and controller

Next Steps

Please follow this Contributing Guidelines to contribute the Front-End.