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.