# Application Structure

MERNKIT was scaffolded using "create-react-app". The frontend is based on the free Material-UI theme Devias Kit and leverages Material-UI components for fast prototyping with a consistent design scheme. Lazy loading is implemented where it makes sense. Folders are in CAPS. 

* SRC
  * Index.js (entry point).
  * App.js (Main App). 
  * Routes.js (Routes for MERNKIT) 
    * Routes are wrapped in either the "Minimal" or "Main" layouts. 
    * "Minimal" is used for pages that don't require navigation like login, signup, password reset, etc. 
  * .env (Environmental Variables for Development)
  * .env.production (Environmental Variables for Production)
    * THEME
      * Configuration for material-ui theme provider
    *  PAGES
      * Top level .js files are the containers for each view within MERNKIT. 
        * COMPONENTS
          * PAGENAME
            * Components that makeup pages that are not reusable. 
    * LAYOUT
      * Layout wrappers "Main" and "Minimal" for routes as described above. 
    * COMMON
      * CONTEXT
        * Authentication Context for managing authentication state throughout the app
      * HOOKS
        * alertbar-hook.js - used for tracking state for in app notifications
        * auth-hook.js - used for tracking authentication state within the auth-context. 
        * confirmemail-hook.js - tracks state for confirmation emails
        * form-hook.js - hook for form state
        * http-hook.js - wrapper for fetch API. 
        * permission-hook.js - hook to manage permission state. 
      * UI
        * Reusable UI components like AlertBar, ErrorModal, and LoadingSpinner.