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.
Last modified 1yr ago
Copy link