#36 Create reusable LoadingSpinnerComponent and standardize loading states

.github/workflows/frontend-ng-ci.yml

@@ -0,0 +1,127 @@
+name: Frontend Angular CI
+
+on:
+  push:
+    branches:
+      - main
+      - develop
+      - feature/**
+      - epic/**
+    paths:
+      - 'front-end-ng/**'
+      - '.github/workflows/frontend-ng-ci.yml'
+  pull_request:
+    branches:
+      - main
+      - develop
+    paths:
+      - 'front-end-ng/**'
+      - '.github/workflows/frontend-ng-ci.yml'
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    name: Test Angular Frontend
+
+    strategy:
+      matrix:
+        node-version: [20.x]
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'npm'
+          cache-dependency-path: 'front-end-ng/package-lock.json'
+
+      - name: Install system dependencies
+        run: sudo apt-get update && sudo apt-get install -y build-essential python3
+
+      - name: Install dependencies
+        working-directory: front-end-ng
+        run: npm ci
+
+      - name: Ensure all native bindings are installed
+        working-directory: front-end-ng
+        run: npm install @oxc-parser/binding-linux-x64-gnu @oxc-transform/binding-linux-x64-gnu @oxc-minify/binding-linux-x64-gnu @rollup/rollup-linux-x64-gnu --no-save 2>&1 || true
+
+      - name: Clean build cache
+        working-directory: front-end-ng
+        run: rm -rf .angular dist node_modules/.vite 2>/dev/null || true
+
+      - name: Run tests
+        working-directory: front-end-ng
+        run: npm test
+        env:
+          CI: true
+
+      - name: Generate coverage report
+        working-directory: front-end-ng
+        run: npm run test:coverage || true
+        env:
+          CI: true
+
+      - name: Build application
+        working-directory: front-end-ng
+        run: npm run build
+
+  code-quality:
+    runs-on: ubuntu-latest
+    name: Code Quality Check
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20.x
+          cache: 'npm'
+          cache-dependency-path: 'front-end-ng/package-lock.json'
+
+      - name: Install system dependencies
+        run: sudo apt-get update && sudo apt-get install -y build-essential python3
+
+      - name: Install dependencies
+        working-directory: front-end-ng
+        run: npm ci
+
+      - name: Ensure all native bindings are installed
+        working-directory: front-end-ng
+        run: npm install @oxc-parser/binding-linux-x64-gnu @oxc-transform/binding-linux-x64-gnu @oxc-minify/binding-linux-x64-gnu @rollup/rollup-linux-x64-gnu --no-save 2>&1 || true
+
+      - name: Clean build cache
+        working-directory: front-end-ng
+        run: rm -rf .angular dist node_modules/.vite 2>/dev/null || true
+
+      - name: Check for security vulnerabilities
+        working-directory: front-end-ng
+        run: npm audit --audit-level=high || true
+
+      - name: Verify no console errors in build
+        working-directory: front-end-ng
+        run: npm run build
+
+  test-summary:
+    runs-on: ubuntu-latest
+    name: Test Results Summary
+    if: always()
+    needs: [test, code-quality]
+
+    steps:
+      - name: Check test status
+        run: |
+          if [ "${{ needs.test.result }}" == "failure" ]; then
+            echo "❌ Angular frontend tests failed"
+            exit 1
+          fi
+          if [ "${{ needs.code-quality.result }}" == "failure" ]; then
+            echo "❌ Code quality checks failed"
+            exit 1
+          fi
+          echo "✅ All Angular frontend checks passed"

CLAUDE.md

@@ -6,21 +6,63 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 
 **Cryptobro** is a monorepo cryptocurrency price tracking application with:
 - **Backend**: Laravel 12 REST API that fetches cryptocurrency prices from the CoinGecko API
-- **Frontend**: Nuxt application (not yet implemented) that will communicate with the backend
+- **Frontend**: Two separate frontend implementations:
+  - **front-end/**: Nuxt 3 (Vue.js 3) - planned
+  - **front-end-ng/**: Angular 21 (current active frontend)
 
-Current branch: `feature/#5-setup-frontend` - setting up the Nuxt frontend.
+Current branch: `epic/angular-front-end` - developing the Angular frontend.
 
 ## Frontend Architecture
 
-### Technology Stack
+**Note**: This project has two frontend implementations. Choose based on the branch/directory you're working in.
+
+### Angular Frontend (front-end-ng/) - CURRENT
+
+#### Technology Stack
+- **Framework**: Angular 21 (Standalone Components)
+- **UI Components**: ZardUI with custom components
+- **Styling**: Tailwind CSS v4 with CSS variables for theming
+- **Component Library**: Class Variance Authority (CVA) for styled variants
+- **Build Tool**: Vite with Angular Compiler
+- **Type Safety**: TypeScript
+- **State Management**: RxJS Observables
+- **Routing**: Angular Router
+
+### Nuxt Frontend (front-end/) - PLANNED
+
+#### Technology Stack
 - **Framework**: Nuxt 3 (Vue.js 3)
 - **UI Components**: shadcn/vue with Radix Vue primitives
 - **Styling**: Tailwind CSS with CSS variables for theming
 - **Testing**: Vitest + Vue Test Utils
 - **Build Tool**: Vite
 - **Type Safety**: TypeScript
 
-### Directory Structure
+### Angular Frontend - Directory Structure (front-end-ng/)
+```
+src/
+├── app/
+│   ├── pages/              # Page components (routed)
+│   ├── shared/
+│   │   └── components/     # Shared UI components (table, card, breadcrumb, etc.)
+│   ├── services/           # Services (CoinGeckoService, etc.)
+│   ├── models/             # TypeScript interfaces and types
+│   └── app.component.ts    # Root component
+├── styles.css              # Global styles and Tailwind
+└── main.ts                 # Application entry point
+```
+
+### Angular Frontend - Common Development Commands
+```bash
+cd front-end-ng
+npm install              # Install dependencies
+npm start               # Start dev server (http://localhost:4200)
+npm run build           # Build for production
+npm run test            # Run tests
+npm run lint            # Run ESLint
+```
+
+### Nuxt Frontend - Directory Structure (front-end/)
 - `pages/` - Page components (auto-routed)
 - `components/ui/` - shadcn/vue components (Button, Card, etc.)
 - `app/composables/` - Vue 3 composables for API and logic reuse
@@ -29,23 +71,7 @@ Current branch: `feature/#5-setup-frontend` - setting up the Nuxt frontend.
 - `public/` - Static assets including favicons
 - `tests/` - Unit and component tests
 
-### Key Features
-- **Responsive Design**: Mobile-first approach with Tailwind breakpoints
-- **Component Library**: shadcn/vue provides accessible, themeable components
-- **API Integration**: `useCoinGecko` composable handles backend communication
-- **Tailwind CSS**: Utility-first CSS with custom color system via CSS variables
-- **Dark Mode Ready**: CSS variables support light/dark theme switching
-- **TypeScript**: Full type safety throughout the application
-- **Tests**: Unit tests for composables, component tests for pages
-- **CI/CD**: GitHub Actions workflow runs on frontend file changes
-
-### Environment Variables
-```
-# Backend API configuration
-NUXT_PUBLIC_API_BASE_URL=http://localhost:8000
-```
-
-### Common Development Commands
+### Nuxt Frontend - Common Development Commands
 ```bash
 cd front-end
 npm install              # Install dependencies
@@ -58,6 +84,61 @@ npm run type-check     # Check TypeScript types
 npm run lint           # Run ESLint
 ```
 
+### Angular Frontend - Environment Variables
+```
+# Backend API configuration (in src/main.ts or environment.ts)
+API_BASE_URL=http://localhost:8000
+```
+
+### Nuxt Frontend - Environment Variables
+```
+# Backend API configuration
+NUXT_PUBLIC_API_BASE_URL=http://localhost:8000
+```
+
+### Key Features (Angular Frontend)
+- **Standalone Components**: Modern Angular architecture without NgModules
+- **ZardUI Components**: Custom reusable UI components with CVA styling
+- **RxJS**: Reactive programming with Observables for state management and API calls
+- **Responsive Design**: Mobile-first approach with Tailwind breakpoints
+- **TypeScript**: Full type safety throughout the application
+- **Tailwind CSS v4**: Utility-first CSS with custom color system via CSS variables
+- **Dark Mode Ready**: CSS variables support light/dark theme switching
+
+### Key Features (Nuxt Frontend)
+- **Responsive Design**: Mobile-first approach with Tailwind breakpoints
+- **Component Library**: shadcn/vue provides accessible, themeable components
+- **API Integration**: `useCoinGecko` composable handles backend communication
+- **Tailwind CSS**: Utility-first CSS with custom color system via CSS variables
+- **Dark Mode Ready**: CSS variables support light/dark theme switching
+- **TypeScript**: Full type safety throughout the application
+- **Tests**: Unit tests for composables, component tests for pages
+- **CI/CD**: GitHub Actions workflow runs on frontend file changes
+
+### Development Server URLs
+
+**IMPORTANT**: Remember which frontend you're working on - they run on different ports:
+- **Angular frontend (front-end-ng/)**: http://localhost:4200
+- **Nuxt frontend (front-end/)**: http://localhost:3000
+
+Always verify you're testing on the correct port for the branch/directory you're in.
+
+### Styling and Component Development
+
+**IMPORTANT**: When modifying Tailwind CSS styles or component variants (CVA):
+1. Always take a screenshot of the rendered component after making style changes
+2. Verify that the changes render correctly in the browser at the correct dev server URL
+3. Check alignment, spacing, colors, and interactive states (hover effects)
+4. Do NOT assume changes are correct without visual verification
+
+This applies especially to:
+- Table layouts and cell alignment
+- Card padding and spacing
+- Component hover states and transitions
+- Responsive breakpoint changes
+
+Test changes on the appropriate dev server before committing.
+
 ### Component System (shadcn/vue)
 
 shadcn/vue components are built on: