Documentation for the FrontEnd of Mathbotics

Project Structure:
The Mathbotics FrontEnd is a React based frontend and was created using CRA(CreateReactApp), therefore it has a familiar folder structure.
- public: Contains index.html which will serve up the page rendering a single element by the id of "root"
- src: Where the react code lives
    - components: React Components used within the Mathbotics application 
        - block: Components related to the blocks
        - course: Components related to the course/courses
        - dashboard: Components related to the dashboard
        - form: Where most of the form components are stored
        - hoc: Any Higher Order Components should go here ie. withSidebar hoc
        - icons: Contains icons related to Mathbotics
        - lessons: Components related to lessons/lesson
        - slides: Components related to slides/slide
        - students: Components related to students/student
    - graphql: Relay configuration and mutations
        - mutations: Mutations used by components
    - pages: Contains the entry point to all the page components served up by Mathbotics application
    - routes: Contains logic for specific routes ie. ProtectedRoute = logic for a protected route
    - types: Contains the types which arent defined by a library or the application
    - utils: Helper functions

Installation Guide / Enviornment Setup:
- Use the docker compose in /docker file to start up the frontend + other related services

User Manual Docs:
- Generating gql type: If you update or add to any graphql query or mutation on the frontend you will have to generate the types, run `yarn relay` at the root of the /frontend directory
- Stuck on loading screen: Sometimes when you restart the application using docker, the users will be removed but you will still have the session cookie on your browser. This will lead to an infinite loading screen. To fix, remove the cookie on the browser (CMD + SHFT + C -> Application -> cookies -> clear)

Deployment:
We were not able to get to deploy the application, however i have linked 1 way of going about deploying the frontend
-  Since this is a react application there are tons of guides on packaging and deploying: Ref https://blog.heroku.com/deploying-react-with-zero-configuration
- NOTE: docker-compose is only ment for developing locally, however you can deploy the application using the compose (https://www.docker.com/blog/how-to-deploy-on-remote-docker-hosts-with-docker-compose/). We recommend loosly coupling all the services. This means deploying frontend as static page and deploying backend using docker on herokus docker deployment (https://devcenter.heroku.com/categories/deploying-with-docker). Having Postgress hosted on heroku (https://www.heroku.com/postgres) and separate from where the backend/frontend are running. There is a deployment diagram you can check out that we included somewhere in all these files/folders

FrontEnd todos:
- Fix styling for the sidebar which edits a block
- Fix styling for viewing a lesson in lessonplan (for course)
- Add drag and drop functionality for adding a lesson to your lesson plan (for course)
- Add progress on courses page to show students how they are doing, same thing for the course page
- Adding a guardian to a student
- Getting all courses attached to a student and displaying those to the guardian
- Forgot Password screen
- Initial dashboard page, display progress, stats, current courses etc..


