# Overview
This documents purpose is to show the overall solution at a higher level.

## Design
![architecture_diagram](pictures/simple_architecture_diagram.png)

The overall solution is comprised of 3 parts and follows a simple flow between them. The frontend receives requests for the webpage and serves up the React application that executes in the client's browser. The backend serves to decouple the database and to provide application logic for processing the data. Mongodb serves as the datastore for project with 4 collections under the `asmt` database `course, lecture, user, view`

## Deployment
![deployment_diagram](pictures/deployment_diagram.png)

The deployment is built around docker. Containers are used for the mongo-db backend (as well as mongo-express to browse it) and if desired for the frontend and backend applications (though this hampers easy debugging and iteration)

## Data Model
![data-model](pictures/model_relationship_diagram.png)

The data model for the project has been kept simple and normalized to avoid complexity at this stage. A shortcoming is that on a few Frontend pages multiple levels of data needs to be queried to present the full page. The course is the "highest" object in the chain, it contains references to lectures and users. Below this the lecture object contains a view object per-user that is a wrapper for the viewData (collected analytics on viewing.)

## Code Hiearchy
![class_diagram](pictures/simple_class_diagram.png)

This diagram presents a breakdown for the Frontend and Backend.  
The frontend is a standard React single page application that utilizes a composition of components to make up the page. The Frontend readme and youtube video explain this topic deeper, but at a high level the App is the page root which embeds the Router component which embed the Page component and so on to create the full page.  
The backend breaks the request/response flow into a series of layers. Each layer is used to segregate responsiblities and give the ability to customize or add in new logic at an appropriate layer. The response simply hits the `listen()` registration in the root `index.js` and proceeds layer by layer until reaching the database.