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.
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)
Configuration for material-ui theme provider
Top level .js files are the containers for each view within MERNKIT.
Components that makeup pages that are not reusable.
Layout wrappers "Main" and "Minimal" for routes as described above.
Authentication Context for managing authentication state throughout the app
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.
Reusable UI components like AlertBar, ErrorModal, and LoadingSpinner.