React Project Structure for Modularity and Reusability
This note outlines a React folder structure with components, core, features, and shared modules for modularity and reuse.
Directory Structure
- components
- Contains simple and abstract common components.
- These components are used across the project and can be considered application-wide parts.
- core
- Holds the application-core functionality with application-wide utilities.
- Accessible from
featuresandsharedbut must not referencefeatures.
- features
- Each feature module resides here.
- These modules may reference
components,coreorsharedbut must remain isolated from the rest of the application to maintain modularity.
- shared
- Contains shared utilities and components.
- Accessible from
featuresbut must not reference them.
src/├── assets/├── components/│ ├── Elements/│ ├── Forms/│ ├── Layouts/│ ├── Modals/│ ├── Pages/│ │ ├── Errors/│ │ │ ├── AccessDeniedPage.tsx│ │ │ ├── NotAuthenticatedPage.tsx│ │ │ ├── SystemErrorPage.tsx│ │ │ ├── ...│ │ ├── ErrorBoundary.tsx├── core/│ ├── api/│ │ ├── interceptors/│ ├── config/│ ├── hooks/│ ├── loaders/│ ├── models/│ │ ├── api/│ ├── stores/│ ├── utils/├── features/│ ├── auth/│ ├── .../├── shared/Related posts
Sign in with Slack Using Cognito User Pools and OIDC
This note describes how to federate Cognito user pools with Slack using OIDC to implement "Sign in with Slack".
Deploying FastAPI on AWS Lambda with Lambda Web Adapter
This example guides you through the process of developing API backends with FastAPI using Lambda Web Adapter.
Testing ECMAScript Modules with Jest
This note describes how to test ECMAScript modules with Jest.
Angular Project Structure for Modularity and Reusability
This note outlines an Angular folder structure with core, features, and shared modules to keep the app modular and reusable.
Spying on Mock Object Properties in Jasmine
This note describes how to spy on mock object properties in Jasmine.
