# Client Application (Angular + Nx)

This is an Angular application built with Nx workspace, featuring multiple libraries and a modern development setup.

## Prerequisites

- Node.js (version 18 or higher)
- npm package manager
- Angular CLI (optional, Nx provides similar functionality)

## Quick Start

```bash
# Install dependencies
npm install

# Start development server
npm start
```

The application will be available at `http://localhost:4200`

## Available Scripts

- `npm start` - Start development server
- `npm run build` - Build for production
- `npm test` - Run tests

## Nx Commands

```bash
# Serve the application
nx serve org

# Build the application
nx build org

# Run tests
nx test org

# Lint the code
nx lint org

# Show project dependencies
nx graph
```

## Project Structure

```
src/
├── app/                    # Main application
├── index.html             # HTML template
├── main.ts               # Application bootstrap
└── styles.scss           # Global styles

libs/
├── shared/
│   ├── api/              # API services
│   ├── stores/           # State management
│   ├── i18n/            # Internationalization
│   └── toast/           # Toast notifications
└── web/
    ├── users/           # User management
    └── tasks/           # Task management
```

## Libraries Overview

### Shared Libraries

- **api**: HTTP services for backend communication
- **stores**: State management utilities
- **i18n**: Internationalization support
- **toast**: Toast notification service

### Web Libraries

- **users**: User management components and services
- **tasks**: Task management functionality

## Development Features

- **Angular 20**: Latest Angular features with signals
- **Angular Material**: UI component library with Azure Blue theme
- **Standalone Components**: Modern Angular architecture
- **TypeScript**: Strict type checking enabled
- **SCSS**: Styling with Sass preprocessing
- **Jest**: Testing framework
- **ESLint**: Code linting with Angular-specific rules

## Building and Deployment

### Development Build

```bash
nx build org --configuration=development
```

### Production Build

```bash
nx build org --configuration=production
```

Built files will be in `dist/org/`

## Testing

### Run All Tests

```bash
nx test
```

### Run Specific Library Tests

```bash
nx test api
nx test users
nx test tasks
```

### Test Configuration

- **Framework**: Jest with Angular preset
- **Setup**: `jest-preset-angular`
- **Coverage**: Available with `--coverage` flag

## Linting

```bash
# Lint all projects
nx lint

# Lint specific project
nx lint org
nx lint api
```

## Code Generation

### Generate Component

```bash
nx generate @nx/angular:component my-component --project=org
```

### Generate Service

```bash
nx generate @nx/angular:service my-service --project=org
```

### Generate Library

```bash
nx generate @nx/angular:library my-lib
```

## Environment Configuration

Development and production environments are configured in:

- `src/environments/environment.ts` (development)
- `src/environments/environment.prod.ts` (production)

## Styling

- **Theme**: Angular Material Azure Blue
- **Global Styles**: `src/styles.scss`
- **Component Styles**: Co-located with components
- **Fonts**: Roboto (Google Fonts)
- **Icons**: Material Icons

## State Management

The application uses Angular signals for state management:

- **Local State**: Component signals
- **Shared State**: Injectable services with signals
- **Derived State**: Computed signals

## API Integration

API services are located in `libs/shared/api/`:

- **Users Service**: User CRUD operations
- **Tasks Service**: Task management
- **Comments Service**: Comment functionality

Base API URL is configured to `http://localhost:3000`

## Browser Support

- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)

## Performance

- **Bundle Analysis**: Use `nx build org --analyze`
- **Lazy Loading**: Feature modules are lazy loaded
- **OnPush**: Change detection strategy optimized
- **Tree Shaking**: Unused code eliminated in production

## Troubleshooting

### Clear Nx Cache

```bash
nx reset
```

### Reinstall Dependencies

```bash
rm -rf node_modules package-lock.json
npm install
```

### Port Already in Use

Change the port in `project.json` serve configuration or use:

```bash
nx serve org --port=4201
```

### Build Errors

Check TypeScript configuration and ensure all dependencies are installed:

```bash
npm install
nx build org
```