Define Frontend Application

[makampos]

The initial conceptual idea for front-end development looks like this; ↙

app/
├── core/                # Core services and singletons
│   ├── services/        # Shared services
│   └── guards/          # Route guards
├── features/            # Feature modules
│   ├── feature1/        # Module for Feature 1
│   │   ├── feature1.module.ts
│   │   ├── feature1.component.ts
│   │   └── ...
│   ├── feature2/        # Module for Feature 2
│   │   ├── feature2.module.ts
│   │   ├── feature2.component.ts
│   │   └── ...
├── shared/              # Shared components, directives, and pipes
│   ├── components/
│   ├── directives/
│   └── pipes/
├── assets/              # Static assets like images and styles
├── environments/        # Environment-specific configurations
└── app-routing.module.ts # Main routing module

While you're working on FE, keep in mind the following general guidance;

1. Modular Structure: Organize the application into modules based on features. Each module should encapsulate related components, services, and routing configurations, which enhances maintainability and reusability.
2. Lazy Loading: Implement lazy loading for feature modules to improve initial load times by loading modules only when needed.
3. Single Responsibility Principle: Ensure that each component, service, or module has a single responsibility to simplify testing and maintenance.
4. Consistent Naming Conventions: Adopt clear and consistent naming conventions for files and folders to improve readability and maintainability across the codebase.
5. Reusable Components: Build reusable components to avoid duplication of code. This practice helps us in maintaining a clean codebase.
6. Overusing Services: Avoid putting too much business logic in services; keep them as simple connectors between the API and components.
7. Duplicating Code: Avoid code duplication by extracting common functionalities into shared services or components.