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 3yr ago