Task Tracker Demo App

This project is a demo Angular application that showcases a variety of modern Angular features and best practices. It implements a simple Task Tracker, allowing users to view, filter, and interact with a list of tasks. The app is designed for developers to explore Angular's capabilities in a real-world context.

Purpose

The Task Tracker demonstrates:

• Modern Angular standalone components and feature modules
• Angular Signals for state management
• Computed properties and effects
• Dependency injection and service usage
• Angular Material UI components
• Routing with lazy loading
• Server-side rendering (SSR) support
• HTTP client usage and local asset data

Project Structure

• src/app/
  • app.component.ts / .html: Root component and router outlet
  • app.routes.ts: Route definitions with lazy-loaded components
  • dashboard/: Dashboard page showing task stats
  • tasks/: Task list and card components
  • models/: Task data model
  • services/: API service for loading tasks
  • state/: Signal-based store for task state
  • app.config.ts / app.config.server.ts: Application and SSR configuration

Key Angular Features Used

• Standalone Components: All major components are defined as standalone, simplifying module management.
• Signals API: Uses Angular's signals for reactive state, including signal, computed, and effect.
• Dependency Injection: Services and stores are injected using Angular's DI system.
• Angular Material: UI built with Material components (cards, buttons, icons).
• Routing & Lazy Loading: Routes are defined for dashboard and task list, with lazy loading for performance.
• Server-Side Rendering (SSR): Configured for SSR using Angular's platform-server and hydration APIs.
• HTTP Client: Loads task data from a local JSON asset via Angular's HttpClient.

Getting Started

Prerequisites

• Node.js (v18+ recommended)
• Angular CLI (npm install -g @angular/cli)

Install Dependencies

npm install

Run the Development Server

npm start
# or
ng serve

Visit http://localhost:4200 in your browser.

Build for Production

ng build

Build output will be in the dist/ directory.

Run SSR (Server-Side Rendering)

npm run build
npm run serve:ssr:client

Demo Data

Task data is loaded from src/assets/tasks.json for demo purposes. You can modify this file to change the sample tasks.