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.