# Frontend Code Overview
[Youtube Video](https://www.youtube.com/watch?v=U4A7PIRXtjg&list=PLG3lylzOg8Fjf2oqcP2faN8edjOmwNyyF)

# Design
![architecture_reference](../documents/pictures/simple_class_diagram.png)

The upper section of the diagram above refers to the Frontend.  
As stated in the video linked above, the codebase is broken down into pages and sub-components that have unique responsibilities.
In the case of react, these are nested components that make up the overall page. The diagram above can be used as a map to see where each component fits into the page hierarchy.

In the Directory section below the components are sorted from root to sub-components. The root being `App.js` embedding -> `*[Home,View]` embedding -> `sub-components`


# What it does
The frontend provides a view for the data served up by the backend

# Base
The root of the frontend comes from the [Create React App](https://facebook.github.io/create-react-app/docs/getting-started) generator.

# Directories

## public
Contains favicon, root index.html, manifest.json (info for when webpage is "installed" on a device)

## src
`App.js` root application Component  

Components that are the root of pages  
`CourseHome.js` for `/courses`  
`CourseView.js` for `/courses/:courseId`  
`LectureHome.js` for `/courses/:courseId/lectures`  
`LectureView.js` for `/courses/:courseId/lectures/:lectureId`

Components used in pages  
`CourseCard.js` for Course Cards in Course Home (little course squares)  
`LectureItem.js` for Lecture Item in Course's lecture view (lecture rows)  
`Tooltip.js` for Tooltip on LectureView page (explanation in video)  
`VideoDataView.js` component for heatmap and Viewdata breakdown in LectureView page  
`ViewItem.js` component that houses VideoDataView (Each row item in the the LectureView page list)

Helper Classes  
`Client.js` is a helper that holds all of the functions to call to the backend. It's very simple and just calls `fetch` and parses out the response to be presented to the page logic.

## Special files in Root
`create_react_app_readme.md` auto-generated readme from [Create React App](https://facebook.github.io/create-react-app/docs/getting-started)