Ferrari Platform - Correct Technology Stack

✅ CORRECTED: State Management Technology

IMPORTANT: The Ferrari Platform uses Flash Persistence from @storage-system exclusively, which completely replaces NGXS.

Technology Stack

Frontend

• Framework: Angular 20
  • Standalone Components
  • Signals (Angular's reactive primitives)
  • OnPush Change Detection Strategy
  • RxJS (no Promises)

State Management

• Primary: Flash Persistence (@storage-system)
  • ✅ Replaces NGXS completely
  • ✅ Zero-configuration setup
  • ✅ Automatic persistence
  • ✅ Signal-based reactive state
  • ✅ Multi-adapter storage (OPFS, IndexedDB, localStorage)
  • ✅ Firebase sync capability
  • ✅ AI optimization

Storage System

• Library: @storage-system
• Features:
  • Flash Persistence (NGXS replacement)
  • Unified intelligent storage
  • Multi-adapter support
  • Auto-migration between storage types
  • Firebase sync
  • AI-powered optimization

Backend

• Framework: NestJS
• Database: MongoDB + Firestore (planned)
• Authentication: JWT (planned)
• API: RESTful with global prefix /api

AI & Generation

• Library: GoGrab AI (@gograb-ai)
• Features:
  • One-line component generation
  • Natural language processing
  • Context-aware suggestions
  • Learning AI
  • 40+ widget types

UI & Theming

• Theme System: Cosmic UI with Theme System
• Styling: SCSS + Tailwind CSS
• Design: Space-themed, glass morphism
• Dark Mode: Built-in support

Build & Tooling

• Build System: Nx 21.4.1 Monorepo
• Package Manager: Yarn
• Testing: Vitest with Angular integration
• E2E: Playwright
• Linting: ESLint with Angular rules

Key Libraries by Pillar

1. 🌌 Space-Map (Organization)

• Library: @space-map-lib
• Database: Dexie.js (IndexedDB wrapper)
• State: Flash Persistence from @storage-system
• UI: Cosmic-themed components

2. 🎨 Editor-Web (Content)

• Library: @editor-web-lib
• State: Flash Persistence from @storage-system
• UI: Drag-drop canvas
• Theme: Theme System integration

3. ⚡ Singularity (Logic)

• Library: @singularity-lib
• State: Flash Persistence from @storage-system
• Execution: RxJS-based flow engine
• Export: Module action generation

4. 🧩 UI-Builder (Components)

• Library: @ux-test-lib
• State: Flash Persistence from @storage-system
• Theme: Theme System utilities
• Export: Code generation (TS, HTML, SCSS)

Integration Layer

• Library: @module-adapter
• Pattern: Adapter pattern for seamless integration
• Communication: Pillar Coordinator Service
• Lifecycle: Full module lifecycle management

Storage Architecture

Flash Persistence Usage

Component Integration:

import { autoFlashState } from '@storage-system';

@Component({
  selector: 'app-settings',
  standalone: true
})
export class SettingsComponent {
  // Automatic persistence with signals
  theme = autoFlashState('theme', { color: 'blue', mode: 'dark' });
  
  changeTheme() {
    this.theme.update(t => ({ ...t, color: 'red' }));
    // Automatically persists to storage!
  }
}

Service Integration:

import { FlashPersistenceService } from '@storage-system';

@Injectable({ providedIn: 'root' })
export class MyService {
  private flash = inject(FlashPersistenceService);
  
  async saveData(key: string, value: unknown) {
    await this.flash.set(key, value);
    // Automatically syncs across adapters
  }
}

Convenience Helpers:

import { 
  flashSignal, 
  flashComputed, 
  flashEffect 
} from '@storage-system';

// Signal with auto-persistence
const count = flashSignal('count', 0);

// Computed with auto-persistence
const doubled = flashComputed('doubled', () => count() * 2);

// Effect with auto-persistence
flashEffect('log-count', () => {
  console.log('Count:', count());
});

Why Flash Persistence Instead of NGXS?

Advantages

1. Zero Configuration: Works out of the box
2. Modern Signals: Built on Angular signals
3. Automatic Persistence: No manual sync needed
4. Multi-Adapter: Seamlessly switches between storage types
5. AI Optimization: Intelligent caching and performance
6. Simpler API: More intuitive than NGXS
7. Better Performance: Optimized for modern Angular
8. Firebase Sync: Built-in cloud synchronization

Migration Path

For existing NGXS code, Flash Persistence provides:

• NGXS-compatible decorators
• Action-based API (optional)
• State slicing similar to NGXS
• Selector-like computed signals

No NGXS References

The Ferrari Platform implementation contains ZERO NGXS dependencies or imports in the newly created code:

• ✅ @module-adapter - No NGXS
• ✅ ferrari-page.models.ts - No NGXS
• ✅ ferrari-unified-page-editor - No NGXS
• ✅ flow-attachment.service.ts - No NGXS
• ✅ flow-action-factory.ts - No NGXS
• ✅ singularity-widget-events.service.ts - No NGXS
• ✅ component-export.service.ts - No NGXS
• ✅ ui-builder-widget-loader.service.ts - No NGXS
• ✅ Backend controllers - No NGXS

All state management is handled through:

• Angular Signals
• Flash Persistence from @storage-system
• RxJS Observables

Documentation Corrections Made

1. ✅ Updated docs/english/public/ferrari-platform/index.md

   • Changed "NGXS" to "Flash Persistence (@storage-system)"
   • Corrected for both Space-Map and Editor-Web

2. ✅ Updated FERRARI_PLATFORM_IMPLEMENTATION.md

   • Clarified: "Flash Persistence (@storage-system) - Replaces NGXS completely"
   • Updated storage description

3. ✅ Created this tech stack document

   • Clear reference for correct technologies
   • Examples of Flash Persistence usage

Conclusion

The Ferrari Platform is built entirely on Flash Persistence from the @storage-system library. NGXS is mentioned only in historical context or in legacy code that exists elsewhere in the monorepo but is NOT used in any Ferrari Platform code.

Ferrari Platform - Powered by Flash Persistence
Modern state management for modern Angular