🚀 GoGrab Space Applications

Complete documentation for all applications in the GoGrab Space ecosystem.

This section contains comprehensive guides, setup instructions, and reference documentation for each application built with our NX monorepo architecture.

📱 Available Applications

🌐 GoGrab Space ⭐ MAIN APPLICATION

The primary Angular application for the GoGrab Space platform.

Features:

• 🎨 Full-featured UI Builder with drag-and-drop
• 💾 Advanced storage system with persistence
• 🎭 Integrated theme system
• 🔄 Real-time reactive state with signals
• 🧪 Component testing and demos

Port: 4200

→ View Documentation

📚 Docs Angular

Modern documentation system built with Angular.

Features:

• 📖 Markdown and MDC (Markdown + Components) support
• 🔍 Dynamic documentation discovery
• 🎨 Interactive component examples
• 🌐 Multi-language support (English/Spanish)
• 🔐 Project-based access control

Port: 5010

→ View Documentation

👨‍💼 Space Admin

Administrative dashboard for GoGrab Space management.

Features:

• 📊 System monitoring and analytics
• ⚙️ Configuration management
• 👥 User administration
• 🔧 System tools and utilities

Port: (check docs)

→ View Documentation

🔌 Backend API

NestJS backend API server.

Features:

• 🔐 Authentication and authorization
• 🤖 AI integration endpoints
• 💾 Storage API
• 🌌 Singularity logic builder API
• 🎨 UI Builder backend

Port: 3000

→ View Documentation

🏗️ Application Architecture

All GoGrab Space applications follow consistent architectural patterns:

Technology Stack

Framework: Angular 20+ (Standalone Components)
Build System: NX Monorepo
State: Angular Signals + NGXS (legacy)
Storage: @widgets-editor/storage
Theme: @widgets-editor/theme-system
Persistence: @widgets-editor/flash-persistence

Shared Patterns

✅ Standalone Components - No NgModules, modern Angular architecture ✅ Signal-Based State - Reactive state with automatic change detection ✅ Type Safety - Full TypeScript with strict typing ✅ OnPush Detection - Optimized performance ✅ Theme Integration - Consistent styling across all apps ✅ Flash Persistence - Zero-config automatic state persistence

🚀 Quick Start

Running Applications

# GoGrab Space (main app)
npx nx serve gograb-space
# or: yarn nx serve gograb-space

# Docs Angular
npx nx serve docs-angular

# Space Admin
npx nx serve space-admin

# Backend API
npx nx serve backend-api

Building Applications

# Build specific app
npx nx build gograb-space

# Build all apps
npx nx run-many --target=build --all

# Production build
npx nx build gograb-space --configuration=production

Testing Applications

# Run tests
npx nx test gograb-space

# Run all tests
npx nx run-many --target=test --all

# E2E tests
npx nx e2e backend-api-e2e

📊 Application Ports

🔗 Cross-Application Integration

Shared Libraries

All applications leverage shared libraries:

// Core functionality
import { StorageService } from '@storage-system';
import { ThemeService } from '@theme-system';
import { LogService } from '@log-system';

// UI components
import { UxButtonComponent } from '@ux-ui-core';
import { UxPortalService } from '@libs-ux/ux-portal';
import { UxTabsComponent } from '@ux-ui-extended';

// State management
import { autoFlashState } from '@flash-persistence';

// Models and types
import type { SafeAny } from '@libs-foundational/core-models';

Communication Patterns

Apps can communicate through:

• Shared State Services - Global state management
• Event Bus - Cross-app event communication
• Storage System - Shared data persistence
• Route Integration - Deep linking between apps

🎯 Development Guidelines

Adding New Applications

When creating a new GoGrab Space application:

1. Use NX Generators

   npx nx generate @nx/angular:application my-app
   

2. Follow Naming Conventions

   • Use kebab-case for app names
   • Prefix with purpose (e.g., editor-, ux-, admin-)

3. Configure Port

   • Add to port list above
   • Update workspace configuration

4. Add Documentation

   • Create folder in /apps/
   • Include _folder.mdc overview
   • Add getting-started.md
   • Create comprehensive index file

5. Integrate Theme System

   import { ThemeService } from '@theme-system';
   

Best Practices

✅ Use Path Aliases - Import from @library-name (defined in tsconfig.base.json) ✅ Leverage Shared Libraries - Don't duplicate functionality ✅ Follow Angular 20 Patterns - Signals, standalone components ✅ Implement OnPush - Optimize change detection ✅ Add Flash Persistence - Auto-save user state with @flash-persistence ✅ Integrate Theme System - Consistent styling with @theme-system

📚 Additional Resources

Configuration & Setup

• App Configuration - TypeScript, build, and NX configuration
• Import Strategies - Path aliases, barrels, and static analysis
• Debugging - Common issues and solutions

Library Documentation

• Library Structure - NX library architecture and building
• Shared Libraries - Documentation for all shared libraries

System Architecture

• Storage System - Intelligent storage architecture
• Theme System - Design system integration
• Event System - Cross-app communication

🚀 All GoGrab Space applications are built with modern Angular patterns and share a consistent, high-quality architecture!

Choose an application above to explore its specific documentation, or dive into the shared systems to understand the foundation powering all our apps.