Frontend Architecture and Reusable Components

Our SaaS boilerplate comes with a robust and scalable frontend architecture, built with Angular, that includes a variety of reusable components. This design allows for rapid development and easy customization, making it adaptable to a wide range of SaaS applications.

Scalable Architecture

The frontend is structured to be highly scalable and easily adaptable to various project requirements:

1. Modular Design: The application is divided into feature modules, making it easy to add, remove, or modify functionality.

2. State Management: Utilizes NGXS for efficient state management across the application.

3. Lazy Loading: Implements lazy loading of modules for improved performance in large applications.

4. Responsive Layout: Built with responsive design principles to ensure compatibility across devices.

Reusable Components

The boilerplate includes a set of pre-built, reusable components that accelerate development:

1. Modal System:

   • Customizable modal components for various use cases (confirmations, forms, etc.).

   • Easy to invoke from any part of the application.

2. Splash Screen:

   • A configurable splash screen for initial loading or between major navigation events.

3. Toast Notifications:

   • A system for displaying non-intrusive notifications to users.

   • Customizable for different types of messages (success, error, warning, etc.).

4. Data Tables:

   • Reusable table components with sorting, filtering, and pagination capabilities.

   • Easy to integrate with backend API endpoints.

5. Translation System:

   • Built-in internationalization support.

   • Easily extendable to support multiple languages.

Using Reusable Components

Here's a quick overview of how to use some of these components:

1. Modals:

@if(showConfirmationModal()) {
<app-confirmation-modal [config]="confirmationModalConfig()" (confirm)="onConfirmAction()"
  (cancel)="closeConfirmationModal()"></app-confirmation-modal>
}


public deleteProduct(id: string) {
  this.openConfirmationModal(
    {
      title: this.t('PRODUCTS.DELETE.TITLE'),
      message: this.t('PRODUCTS.DELETE.CONFIRMATION'),
      confirmText: this.t('COMMON.CONFIRM'),
      cancelText: this.t('COMMON.CANCEL'),
      icon: 'delete'
    },
    () => {
      this.stripeService.deleteProduct(id)
        .pipe(takeUntil(this.destroy$))
        .subscribe({
          next: () => {
            this.loadProducts();
            this.toastService.show(this.t('PRODUCTS.DELETE.SUCCESS'), ToastType.Success);
          },
          error: (error) => {
            console.error('Error deleting product:', error);
            this.toastService.show(this.t('PRODUCTS.DELETE.ERROR'), ToastType.Error);
          }
        });
    }
  );
}

1. Toast Notifications:

   this.toastService.show(this.t('PRODUCTS.CREATE.SUCCESS'), ToastType.Success);

2. Translations:

   <th class="p-2 border">{{ t('PRODUCTS.LIST.NAME') }}</th>

Customizing and Extending

While these components provide a solid foundation, they are designed to be easily customizable:

1. Styling: Use CSS variables and theming to adjust the look and feel of components.

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    --primary-color: #495867;
    --secondary-color: #e5e7eb;
    --white-color: #fffdfe;
    --danger-color: #b94040;
    --success-color: #2a9d8f;
    --green: #84a98c;
    --dark-green: #52796f;
    --background-color: #1f2937;
}

1. Behavior: Extend component classes to add or modify functionality.

@Component({
  selector: 'app-stripe-products',
  standalone: true,
  imports: [
    CommonModule,
    ModalComponent,
    MatIconModule,
    ReactiveFormsModule,
    SharedStylesModule,
    ConfirmationModalComponent
  ],
  templateUrl: './stripe-products.component.html',
  styleUrls: ['./stripe-products.component.css']
})
export class StripeProductsComponent extends BaseComponent implements OnInit {}

Best Practices

1. Consistency: Use the provided components consistently throughout your application for a uniform user experience.

2. Documentation: When creating new shared components, document their usage and any required props.

By utilizing these reusable components and the scalable architecture, you can rapidly develop robust SaaS applications tailored to your specific needs. The modular and flexible nature of the frontend allows for easy customization and extension, making it suitable for a wide range of projects.