Plastikspace

Modern Angular Experimentation Lab

A personal multi-repository to explore Nx, Angular 21, and cutting-edge web technologies

---

🚀 Tech Stack Highlights

• Framework: Angular 21 (Standalone Components, Signals, SSR, Hydration)
• Monorepo Tooling: Nx (Project Graph, Distributed Task Execution)
• Styling: Tailwind CSS 4
• State Management: NgRx Signal Store
• Backend Integrations:
  • Firebase: Real-time DB, Auth, and Cloud Functions (llecoop)
  • PocketBase: Lightweight Go backend (eco-store)
  • GraphQL: Apollo Client integration (plastikaweb)
• Quality Assurance: Vitest, Cypress, Pa11y (Accessibility), ESLint

---

🏗️ Architecture

This project follows a Domain-Driven Design (DDD) approach within an Nx workspace.

graph TD
    subgraph Applications
        Apps[Any Application]
    end

    subgraph Libraries
        direction TB
        AppSpecific[App Specific Libs]
        Shared[Shared Libs]
        Core[Core Libs]
    end

    Apps --> AppSpecific
    Apps --> Shared
    Apps --> Core

    AppSpecific --> Shared
    AppSpecific --> Core
    Shared --> Core

Loading

For more details, see the 🏛️ NX Architecture Guide.

---

📥 Getting Started

Prerequisites

• Node.js: v22 (see .nvmrc)
• Yarn: v4+
• rimraf: npm install -g rimraf (required for clean scripts)

Installation

1. Clone the repo

   git clone git@github.com:plastikaweb/plastikspace.git
   cd plastikspace

2. Full Environment Setup

   node tools/scripts/setup-local.js

   💡 Intelligent Setup: This command is the recommended way to start the repository. It performs a full workspace cleanup, installs dependencies, and checks for the PocketBase binary used in eco-store app.

---

🔧 Development Commands

Running Applications (Full Local Environment)

Some apps require a backend to be running. These commands start both:

Command	Description
yarn eco-store:local	Starts PocketBase + eco-store frontend
yarn llecoop:local	Starts Firebase Emulators + llecoop frontend
yarn nasa-images:serve	Starts the NASA image gallery
yarn plastikaweb:serve	Starts the personal website

Common Nx Tasks

• Test Everything: yarn test:all
• Lint Everything: yarn lint:all
• Visualize Workspace: yarn dep-graph
• Affected Changes: nx affected:test

---

📘 Documentation & Standards

Resource	Description
🎨 Code Style	ESLint, Prettier, and Angular best practices
📝 Commit Guide	Conventional Commits & Commitizen usage
♿ Accessibility	WCAG compliance and Pa11y testing
🌐 I18n Guide	ngx-translate and multi-language support
💅 CSS Styling	Tailwind 4 configuration and presets

---

📱 Applications Overview

Application	Stack	Description
eco-store	PocketBase, Signals	Modern e-commerce showcase.
llecoop	Firebase, NgRx	Collaborative shopping application.
nasa-images	Public API, Material	NASA imagery explorer.
plastikaweb	GraphQL, Apollo	Personal portfolio & blog.

---

📚 Libraries

🧩 Core

Foundation libraries used across applications.

API and Data Access

• api-base: Base interfaces and types for API services.
• api-http: Generic HTTP CRUD services.
• api-firebase: Generic Firebase CRUD services.
• api-pocketbase: Generic PocketBase CRUD services.

Utilities

• environments: Environment configuration helpers.
• assets: Asset management.
• cypress-commands: Custom Cypress commands.
• paginator: Material Paginator internationalization service.

UI and Layout

• cms-layout: CMS layout features.
• ng-entry-html: HTML entry utilities.
• styles-preset: Core styles and presets.
• styles-tailwind4: Global CSS variables for TailwindCSS v4.
• styles-material: Global CSS adjustments for Angular Material.

🔄 Shared

Reusable features and UI components.

Signal State (NgRx Signal Store)

• data-access-http: Signal Store features for HTTP.
• data-access-firebase: Signal Store features for Firebase.
• data-access-pocketbase: Signal Store features for PocketBase.

Auth

• auth-feature
• auth-entities
• auth-firebase
• auth-pocketbase
• login
• register
• request-password

UI Components

• button
• pwa
• table
• form
• address-card
• img-cropper
• notification
• notification-ui-hot-toast
• activity
• img-container
• mat-theme-toggle
• pagination-ui
• pagination-util
• sort-selector
• shared-chip
• shared-alert
• translation

Utilities

• storage
• testing
• util
• countdown
• view-transition
• highlight

---

☁️ Nx Cloud Configuration & CI Strategy

This monorepo uses a dual caching and testing strategy to optimize performance and quality.

• Caching: Leverages local disk cache for development and Nx Cloud for CI sharing.
• CI Strategy: Fast feedback on Pull Requests (affected only) and full validation on develop to maintain global quality metrics.

For detailed technical information, see the Git Flow and CI/CD Guide.

---

📬 Contact

Carlos Matheu Armengol

📧 info@plastikaweb.com 🌐 www.plastikaweb.com