Skip to main content

Signals Dashboard - Project Overview

Project Description​

Build a modern analytics dashboard demonstrating all Angular 15-18 features in a realistic enterprise scenario.

Domain: Analytics & Monitoring Platform​

A dashboard for viewing application metrics, user analytics, and system health monitoring.

Core Features​

1. Dashboard Overview​

  • Real-time metric cards (users, revenue, conversion rate)
  • Interactive charts (line, bar, pie)
  • Trend indicators (up/down arrows, percentages)
  • Date range selector
  • Auto-refresh capability

2. Analytics Module​

  • Traffic analytics
  • User behavior tracking
  • Conversion funnels
  • Geographic distribution map
  • Device/browser breakdown

3. User Management​

  • User list with search/filter
  • User details modal
  • Role management
  • Activity logs
  • Bulk actions

4. Reports​

  • Customizable report builder
  • Export functionality (CSV, PDF)
  • Scheduled reports
  • Report templates

5. Settings​

  • User preferences
  • Notification settings
  • API configuration
  • Theme customization (light/dark)

Technical Architecture​

Standalone Components​

src/app/
├── core/
│   ├── guards/
│   │   └── auth.guard.ts
│   ├── services/
│   │   ├── analytics.service.ts
│   │   ├── user.service.ts
│   │   └── notification.service.ts
│   └── stores/
│       ├── dashboard.store.ts
│       └── user.store.ts
├── features/
│   ├── dashboard/
│   │   ├── dashboard.component.ts
│   │   ├── metric-card.component.ts
│   │   └── chart.component.ts
│   ├── analytics/
│   ├── users/
│   ├── reports/
│   └── settings/
├── shared/
│   ├── components/
│   │   ├── header.component.ts
│   │   ├── sidebar.component.ts
│   │   └── loading.component.ts
│   └── pipes/
│       └── number-format.pipe.ts
├── app.component.ts
└── app.routes.ts

State Management with Signals​

// dashboard.store.ts
import { Injectable, signal, computed } from '@angular/core';

export interface DashboardMetrics {
  users: number;
  revenue: number;
  conversionRate: number;
  pageViews: number;
}

@Injectable({ providedIn: 'root' })
export class DashboardStore {
  // State
  private metrics = signal<DashboardMetrics>({
    users: 0,
    revenue: 0,
    conversionRate: 0,
    pageViews: 0,
  });

  private dateRange = signal<{ start: Date; end: Date }>({
    start: new Date(),
    end: new Date(),
  });

  private isLoading = signal(false);

  // Selectors
  readonly metrics$ = this.metrics.asReadonly();
  readonly dateRange$ = this.dateRange.asReadonly();
  readonly isLoading$ = this.isLoading.asReadonly();

  // Computed
  readonly userGrowth = computed(() => {
    const current = this.metrics().users;
    // Calculate growth percentage
    return { value: current, growth: 12.5 };
  });

  // Actions
  updateMetrics(metrics: DashboardMetrics) {
    this.metrics.set(metrics);
  }

  setDateRange(start: Date, end: Date) {
    this.dateRange.set({ start, end });
  }

  setLoading(loading: boolean) {
    this.isLoading.set(loading);
  }
}

Routing Configuration​

// app.routes.ts
import { Routes } from '@angular/router';
import { authGuard } from './core/guards/auth.guard';

export const routes: Routes = [
  {
    path: '',
    redirectTo: '/dashboard',
    pathMatch: 'full',
  },
  {
    path: 'dashboard',
    loadComponent: () =>
      import('./features/dashboard/dashboard.component').then(
        m => m.DashboardComponent
      ),
    canActivate: [authGuard],
  },
  {
    path: 'analytics',
    loadComponent: () =>
      import('./features/analytics/analytics.component').then(
        m => m.AnalyticsComponent
      ),
    canActivate: [authGuard],
  },
  {
    path: 'users',
    loadChildren: () =>
      import('./features/users/users.routes').then(m => m.USER_ROUTES),
    canActivate: [authGuard],
  },
  {
    path: 'reports',
    loadComponent: () =>
      import('./features/reports/reports.component').then(
        m => m.ReportsComponent
      ),
    canActivate: [authGuard],
  },
  {
    path: 'settings',
    loadComponent: () =>
      import('./features/settings/settings.component').then(
        m => m.SettingsComponent
      ),
    canActivate: [authGuard],
  },
  {
    path: 'login',
    loadComponent: () =>
      import('./features/auth/login.component').then(m => m.LoginComponent),
  },
];

Performance Requirements​

Bundle Size​

  • Initial bundle: < 200KB (gzipped)
  • Lazy routes: < 50KB each
  • Total bundle: < 500KB

Core Web Vitals​

  • LCP: < 2.5s
  • FID: < 100ms
  • CLS: < 0.1

Rendering Performance​

  • Dashboard load: < 1s
  • Chart rendering: < 500ms
  • Filter updates: < 100ms

Design System​

Color Palette​

:root {
  --primary: #3b82f6;
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --gray-100: #f3f4f6;
  --gray-900: #111827;
}

Component Library​

Use Tailwind CSS or Angular Material (standalone components)

Data Source​

Mock data with realistic patterns:

  • JSON files in assets/data/
  • Service layer simulating API calls
  • RxJS observables for async operations
  • Signal stores for state management

Development Checklist​

Day 1-2: Foundation​

  • Project scaffolding
  • Routing setup
  • Core services
  • Layout components
  • Authentication guard
  • Signal stores

Day 3-4: Features​

  • Dashboard with metrics
  • Chart components with @defer
  • User list with signals
  • Filters and search
  • Forms with validation

Day 5-6: Optimization​

  • NgOptimizedImage for all images
  • Performance benchmarking
  • Bundle analysis
  • Lazy loading optimization

Day 7: Polish​

  • Error handling
  • Loading states
  • Responsive design
  • Documentation
  • Deployment

Success Metrics​

Your project demonstrates mastery when:

  1. 100% standalone - No NgModules used
  2. Signals everywhere - All state managed with signals
  3. New syntax - All templates use @if/@for/@defer
  4. Performant - Meets all Core Web Vitals
  5. Production-ready - Error handling, loading states, tests
  6. Well-documented - Clear README and code comments

Next Steps​

  • Start implementing the project based on the requirements above
  • Follow the acceptance criteria for each feature