Skip to content

2. Architecture Overview

Jump to bottom
Max Geller edited this page Oct 5, 2024 · 4 revisions

Architecture Overview

Project Structure

The project is organized into several modules, each serving a specific purpose. Here's an overview of the main modules:

  • Core: Contains core services, models, and utilities.
  • Features: Houses feature-specific components, containers, and services.
  • Shared: Shared components, modules, and utilities.

Authentication

The authentication system is implemented using the AuthService and AuthGuard classes. The AuthService provides methods for user login, logout, and token management. The AuthGuard ensures that only authenticated users can access protected routes.

Authorization

The authorization system is implemented using the RoleGuard and PermissionGuard classes. These guards ensure that users can only access resources and perform actions that they are authorized to do.

Database

The database is implemented using the supabase-js library. The supabase-js library is a JavaScript library for interacting with the Supabase API. The SupabaseService provides methods for interacting with the database.

Core Utilities

Services

  • Auth Service: Provides methods for user authentication and authorization.
  • User Service: Provides methods for user management.
  • Role Service: Provides methods for role management.
  • Permission Service: Provides methods for permission management.
  • Setting Service: Provides methods for application setting management.
  • Tenant Service: Provides methods for tenant management.
  • Supabase Service: Provides methods for interacting with the Supabase API.
  • Supabase Wrapper Service: Provides methods for interacting with the Supabase API.

Guards

  • Auth Guard: Ensures that only authenticated users can access protected routes.
  • Role Guard: Ensures that users can only access resources and perform actions that they are authorized to do.
  • Permission Guard: Ensures that users can only access resources and perform actions that they are authorized to do.
  • Tenant Guard: Ensures that users can only access tenants that they are authorized to access.

Interceptors

  • Auth Interceptor: Intercepts HTTP requests and adds the authentication token to the request headers.
  • Error Interceptor: Intercepts HTTP errors and logs them to the console.
  • Logging Interceptor: Intercepts HTTP requests and logs them to the console.

Directives

  • Autofocus Directive: Automatically focuses on an input element when the page loads.
  • Dropdown Directive: Toggles a dropdown menu on click.
  • Tooltip Directive: Displays a tooltip on hover.
  • Copy Directive: Copies text to the clipboard on click.
  • Drag Directive: Adds drag and drop functionality to an element.
  • Resize Directive: Adds resize functionality to an element.

Modules

  • Admin Module: Provides methods for managing the application, tenants, users, roles, permissions, and settings.
  • Account Module: Provides methods for managing the user's account, profile, and settings.
  • Dashboard Module: Provides methods for managing the user dashboard.
  • Styles Module: Provides a sample module that displays the applications components, layouts, pages, styles, typography, and themed components
  • Templates Module: Provides a starter module that contains a collection of components, layouts, pages, styles, typography, and themed components

Folder and File Structure

The project is organized into several modules, each serving a specific purpose. Here's an overview of the main modules:

src
├── app
│   ├── core {Core Services, Guards, Interceptors, Directives, Pipes, and Utilities}
│   │   ├── guards (Route Guards)
│   │   ├── interceptors (HTTP Interceptors)
│   │   ├── services (Core Services)
│   │   └── utilities (Core Utilities)
│   ├── features (Feature Modules)
│   │   ├── admin (Admin Module)
│   │   ├── account (Account Module)
│   │   ├── dashboard (Dashboard Module)
│   │   ├── styles (Styles Module)
│   │   └── templates (Templates Module)
│   ├── shared (Shared Components, Modules, and Utilities)
│   │   ├── components (Shared Components)
│   │   ├── modules (Shared Modules)
│   │   ├── models (Shared Models)
│   │   ├── services (Shared Services)
│   │   └── utilities (Shared Utilities)
│   ├── assets (Static Assets)
│   │   ├── icons (Icon Assets)
│   │   ├── images
│   │   └── styles (Global Styles)
│   ├── environments (Environment Configuration)
│   │   ├── environment.ts (Development Environment)
│   │   ├── environment.prod.ts (Production Environment)
│   │   └── environment.staging.ts (Staging Environment)
│   ├── index.html (Root HTML File)
│   ├── main.ts (Root Application Module)
│   ├── styles.scss (Global Styles)
Clone this wiki locally