Feature/part7 (#54)

* Add Firebase configuration files and Docker setup for Angular SSR application and LLMs files

* Upgrade Angular dependencies and update build configurations for improved performance

* Upgrade @ngrx and ngx-quill dependencies to latest versions for improved compatibility

* Add initial Angular application structure and configuration files

* Add code-samples-mfe project structure and initial configuration

* Add app description and project structure for angular.fun multi-project workspace

* Add CLAUDE.md for project guidance and architecture overview

* Add CLAUDE.md for project guidance and architecture overview

* Create folder structure for new projects

* Refactor component selectors and add ESLint configuration for multiple projects

* Enhance ESLint configuration with boundaries plugin and project-specific rules

* Refactor app component and configuration for shared services; update ESLint rules for boundaries enforcement

* Refactor app component and configuration for shared services; update ESLint rules for boundaries enforcement

* Refactor styles and configuration; integrate TailwindCSS and enhance button styles

* Refactor components and routes; rename selectors and update navigation logic

* Rename components and update selectors for consistency; change 'app-label' to 'web-label' and 'app-post-card' to 'web-post-card'

* Refactor project structure and components; rename files for clarity and consistency, add login component and styles, and update routing logic

* Refactor login and add-post components; enhance layout structure, update styles for consistency, and improve responsiveness

* Add tag multi-select component; implement styles and HTML structure for tag selection, search functionality, and dropdown menu

* Refactor component structure and update routing; rename files for clarity, adjust router links, and implement new layout component

* Enhance main layout and styling; implement gradient background, improve spacing, and update component structure for better layout consistency

* Refactor imports and update paths; streamline module imports for consistency and clarity across components

* Refactor imports and update paths; streamline shared module imports for consistency and clarity across components

* Add prerender parameters generator and update routing; implement route generation from Supabase posts and adjust Angular SSR configuration

* Refactor component structure and update selectors; rename login and register components for consistency, adjust template syntax, and improve import paths

* Refactor posts list component layout; simplify structure, enhance styling, and improve button positioning for better responsiveness

* Update ESLint configuration; add environment files pattern and enhance module allowance rules for improved structure and clarity

* Refactor import paths and component structure; streamline imports from shared module for consistency and clarity across components

* Refactor import paths and update module exports; streamline imports from shared module and enhance public API structure for improved clarity and maintainability

* Update ESLint configuration and improve tag multi-select component; enhance rules for clarity and safety, and utilize optional chaining for better null handling

* Refactor components to enhance memory management and type safety; implement DestroyRef cleanup for event listeners and MutationObserver, convert @input to signal inputs, and standardize error handling for improved clarity and maintainability

* Improve error handling in posts and tags stores; enhance error messages to provide more context and ensure type safety for error handling

* Refactor post component HTML for improved readability; streamline markup and enhance structure for better maintainability

* Refactor dynamic dialog service for improved readability; streamline component creation and enhance code structure for better maintainability

* Add ESLint configuration for shared projects; implement linting options and specify file patterns for improved code quality

* Fix path in environment file generation; update output location for environment.ts to ensure correct file structure in CI workflow

* Update Node.js version in CI configuration; change from 18 to 22 for compatibility with latest features

* Update GitHub Actions configuration; upgrade Node.js version to 20 and actions to v4 for improved performance and compatibility

* Add RouterTestingModule to AppComponent tests for improved routing functionality

* Add RouterTestingModule and Zoneless Change Detection to AppComponent tests for improved routing and performance

* Add Playwright tests for Admin application and update build configurations

* Update e2e test command to use 'e2e:web:local' for improved testing accuracy

* Update e2e test command to use 'e2e:web:local' for improved testing accuracy

Author: Lukecsharpwalker

.firebaserc

@@ -0,0 +1,17 @@
+{
+  "projects": {
+    "default": "your-firebase-project-id"
+  },
+  "targets": {
+    "your-firebase-project-id": {
+      "hosting": {
+        "admin": [
+          "admin-site-id"
+        ],
+        "samples": [
+          "samples-site-id"
+        ]
+      }
+    }
+  }
+}

.github/workflows/PR_Check.yml

@@ -2,8 +2,8 @@ name: PR Check
 
 on:
   pull_request:
-    branches: 
-      - main 
+    branches:
+      - main
 
 jobs:
   test:
@@ -16,12 +16,12 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: '18'
+          node-version: '22'
 
       - name: Generate environment.ts from secrets
         shell: bash
         run: |
-          cat > src/environments/environment.ts <<'EOF'
+          cat > environments/environment.ts <<'EOF'
           export const environment = {
             production: false,
             supabaseUrl: '${{ secrets.SUPABASE_URL }}',

.github/workflows/e2e-tests.yml

@@ -40,8 +40,15 @@ jobs:
       - run: |
           echo "SUPABASE_ANON_KEY=$(supabase status -o env | grep SUPABASE_ANON_KEY | cut -d= -f2)" >> $GITHUB_ENV
 
+      - name: Start Angular web app
+        run: npm run start:local &
+        env: { NODE_ENV: "test" }
+
+      - name: Wait for Angular web app (≤30 s)
+        run: npx --yes wait-on http://localhost:4200 --timeout 30000
+
       - run: npx playwright install --with-deps
-      - run: npm run e2e:local
+      - run: npm run e2e:web:local
         env: { CI: "true" }
 
       - uses: actions/upload-artifact@v4

.github/workflows/google-cloudrun-docker.yml

@@ -9,29 +9,31 @@ jobs:
   test:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
-          node-version: '18'
-          
+          node-version: '20'
+          cache: npm
+
       - run: npm ci
 
-      - run: npm run test -- --browsers=ChromeHeadless --watch=false --no-progress
+      - run: npm run test:all -- --browsers=ChromeHeadless --watch=false --no-progress
 
   deploy:
     runs-on: ubuntu-latest
     needs: test
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
-          node-version: '18'
+          node-version: '20'
+          cache: npm
 
       - run: npm ci
 
-      - run: npm run build --prod
+      - run: npm run build -- --configuration production
 
       - uses: google-github-actions/auth@v2
         with:

.gitignore

@@ -52,3 +52,7 @@ adminSdkConf.json
 /test-results/
 /playwright-report/
 /playwright/.cache/
+
+#llms
+/llms/private
+/llms/priv

.prettierrc

@@ -0,0 +1,32 @@
+{
+  "semi": true,
+  "trailingComma": "es5",
+  "singleQuote": true,
+  "printWidth": 100,
+  "tabWidth": 2,
+  "useTabs": false,
+  "endOfLine": "lf",
+  "bracketSpacing": true,
+  "bracketSameLine": false,
+  "arrowParens": "avoid",
+  "overrides": [
+    {
+      "files": "*.html",
+      "options": {
+        "parser": "angular"
+      }
+    },
+    {
+      "files": "*.scss",
+      "options": {
+        "singleQuote": false
+      }
+    },
+    {
+      "files": "*.md",
+      "options": {
+        "proseWrap": "preserve"
+      }
+    }
+  ]
+}

CLAUDE.md

@@ -0,0 +1,238 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## MOST IMPORTANT: Always read the LLM context files in `/llms/` before making any code changes or refactor proposals.
+
+## MOST IMPORTANT: NO WRITE COMMENTS in the codebase. Use PR comments instead.
+
+## Project Overview
+
+This is **angular.fun** - a modern Angular 20+ blog application with Supabase backend. The project is currently a monolithic structure in `/src` but is being refactored into a multi-project workspace with micro-frontends and shared libraries.
+
+### Current Architecture
+
+- **Main App**: `/src/app` - Monolithic structure containing both reader and admin functionality
+- **Reader**: `/src/app/reader` - Public blog with SSG/SSR capabilities
+- **Admin**: `/src/app/admin` - Admin panel with CSR for content management
+- **Shared**: `/src/app/shared` - Common components, services, models, and stores
+
+### Target Architecture (Multi-Project Workspace)
+
+- **projects/web**: Public blog with hybrid rendering (SSG for articles, SSR for home)
+- **projects/admin**: Pure CSR admin panel for Firebase Hosting
+- **projects/code-samples-mfe**: Micro-frontend for code samples via Native Federation
+- **projects/shared**: Shared library with UI components, patterns, data-access, and models
+
+## Common Development Commands
+
+### Development
+
+```bash
+npm start                    # Start main app (development mode)
+npm run start:local          # Start with local Supabase configuration
+npm run start:local:docker   # Open Docker for local development
+npm run start:local:backend  # Start local Supabase instance
+```
+
+### Building
+
+```bash
+npm run build                # Build for production
+npm run build:stats          # Build with bundle analysis stats
+npm run analyze              # Analyze bundle size with webpack-bundle-analyzer
+```
+
+### Testing
+
+```bash
+npm test                     # Run unit tests with Karma
+npm run e2e                  # Run E2E tests with Playwright
+npm run e2e:local            # Run E2E tests against local environment
+```
+
+### Supabase Management
+
+```bash
+npx supabase start           # Start local Supabase
+npx supabase stop            # Stop local Supabase
+npm run schema:pull          # Pull remote schema from cloud Supabase
+npm run db:createSeed        # Create database seed file
+npm run db:seed              # Initialize database with seed data
+```
+
+### Project-Specific Commands
+
+```bash
+ng serve admin               # Serve admin project (when refactored)
+ng serve web                 # Serve web project (when refactored)  
+ng build shared              # Build shared library
+ng serve code-samples-mfe    # Serve code samples micro-frontend
+```
+
+## Key Technologies & Stack
+
+- **Frontend**: Angular 20, NgRx Signals, Tailwind CSS, DaisyUI, Quill Editor, Highlight.js
+- **Backend**: Supabase (PostgreSQL, Authentication, Storage, Functions)
+- **Testing**: Playwright for E2E, Karma/Jasmine for unit tests
+- **Build**: Angular CLI with esbuild, SSR/SSG capabilities
+- **State Management**: NgRx SignalStore throughout all applications
+
+## Code Architecture Patterns
+
+### State Management
+
+- Use NgRx SignalStore for all state management
+- Feature-scoped stores in individual feature directories
+- Shared stores in `/src/app/shared/stores` -> refactor to `/projects/shared/src/data-access/stores` in new architecture
+
+### Component Structure
+
+- Standalone components using Angular's modern APIs
+- Feature-based organization with lazy-loaded routes
+- UI components are pure and stateless (inputs/outputs only)
+- Business logic encapsulated in services and stores
+
+### Data Access
+
+- **Public/Reader**: Uses PostgREST endpoints for SSG/SSR compatibility
+- **Admin**: Uses `@supabase/supabase-js` browser client
+- **Authentication**: Supabase Auth with role-based access control
+- **Storage**: Supabase Storage CDN for images and assets
+
+### Routing
+
+- Lazy-loaded feature modules
+- Route-level providers for feature isolation
+- Functional guards for authentication (`authAdminGuard`)
+
+## Development Guidelines
+
+### File Organization
+
+- The legacy monolith remains under `/src` until migration is complete — **do not modify** unless explicitly approved.
+- The target workspace lives under `/projects` and `/projects/shared`.
+
+**Apps**
+
+- `projects/web` — feature-first, standalone, lazy:
+  - `app/` (bootstrap, root routes)
+  - `features/<feature-name>/` (routes, components, stores, services)
+  - `layout/` (shell, navigation, footer)
+  - `core/` (app-level providers: http, interceptors, guards)
+- `projects/admin` — CSR-only, same structure as `web`.
+- `projects/code-samples-mfe` — remote MFE, only required features and mfe routing.
+
+**Shared library**
+
+- `projects/shared/`
+  - `ui/` (pure presentational components; no business logic)
+  - `pattern/` (composable building blocks, form controls, table abstractions)
+  - `data-access/` (clients, repositories, query functions; PostgREST for web SSR/SSG, supabase-js for admin)
+  - `models/` (types, DTOs, schema definitions)
+  - `utils/` (pure functions, pipes, directives)
+
+**General rules**
+
+- Standalone + lazy everywhere; **no cross-feature TS imports**.
+- Promote reusable logic “upwards” (from feature → pattern/ui/data-access).
+- Keep guards/interceptors/providers at route-level or in `core/` per app.
+- Tailwind/DaisyUI configuration shared where possible; design tokens in `shared`.
+
+See the [architecture.txt](llms/private/architecture.txt) document for authoritative rules and dependency boundaries.
+
+### Styling
+
+- Use Tailwind CSS with DaisyUI components
+- Custom color palette: primary (#12372A), secondary (#436850), tertiary (#ADBC9F), quaternary (#FBFADA)
+- Monitor CSS bundle size with budget limits in angular.json
+
+### Type Safety
+
+- Strict TypeScript configuration enabled
+- Supabase types generated in `/src/app/types/supabase/` -> refactor to `/projects/shared/src/models/supabase/`
+- Use proper interfaces for all data models
+
+### Environment Configuration
+
+- `environment.ts` - Production
+- `environment.development.ts` - Development
+- `environment.local.ts` - Local Supabase instance
+
+## Supabase Integration
+
+### Supabase Configuration
+
+- projects/web uses PostgREST for SSG/SSR compatibility
+- rest uses `@supabase/supabase-js` for browser client
+
+### Database Schema
+
+- Posts, Comments, Tags, PostTags, Profiles tables
+- Row Level Security (RLS) policies for data protection
+- Migrations managed in `/supabase/migrations/`
+
+### Authentication
+
+- Email/password authentication
+- Role-based access (admin, user roles)
+- Protected admin routes with functional guards
+
+### Local Development
+
+- Use Docker for local Supabase instance
+- Access Supabase Studio at http://localhost:54323
+- Seed data available via scripts in `/scripts/`
+
+## Testing Strategy
+
+### E2E Tests (Playwright)
+
+- Tests in `/e2e/` directory
+- Configured for multiple browsers (Chromium, Firefox, WebKit)
+- Helper utilities in `/e2e/helpers/`
+- Local and CI configurations available
+
+### Unit Tests
+
+- Colocated spec files with components/services
+- Karma + Jasmine test runner -> refactor to use Vitest in the future
+- Focus on business logic and component behavior
+
+## Build & Deployment
+
+### Bundle Optimization
+
+- Lazy loading for all features
+- Bundle analysis with webpack-bundle-analyzer
+- Performance budgets enforced in angular.json
+- Tree-shaking enabled for optimal bundle sizes
+
+### Target Deployments
+
+- **Web**: Google Cloud Run (SSG/SSR)
+- **Admin**: Firebase Hosting (CSR)
+- **Code Samples MFE**: Firebase Hosting (MFE)
+- **Assets**: Supabase Storage CDN
+
+## Migration Status
+
+The project is currently migrating from monolithic structure to multi-project workspace:
+
+- Current: Single app in `/src`
+- Target: Separate projects in `/projects/` with shared libraries
+- Architecture guidance available in `/llms/private/architecture.txt`
+
+## LLM Context Files
+
+Always read these files before making refactor proposals or code edits:
+
+- [llms/**/architecture.txt](llms/private/architecture.txt)
+- [llms/**/llm-full.txt](llms/private/llm-full.txt)
+- [llms/**/app-description.txt](llms/private/app-description.txt)
+
+These documents are authoritative for:
+
+- Workspace and folder structure
+- Angular 20 style and coding conventions
+- Target apps, rendering modes, and deployment