# Angular Clarity Boilerplate

This project is an Angular boilerplate application that uses the [Clarity Design System](https://clarity.design/) by VMware. It serves as a starter template for building modern, responsive, and feature-rich web applications.

This boilerplate is pre-configured with a standard project structure and includes essential modules and components to kickstart your development process.

---

## 🚀 Features

* **Angular:** The latest version of the Angular framework.
* **Clarity Design System:** A comprehensive set of UX guidelines, HTML/CSS components, and Angular components.
* **Responsive Layout:** A responsive navigation and layout structure.
* **Scalable Architecture:** A well-organized and scalable project structure.
* **Theming:** Easily customizable themes (light and dark).

---

## 🛠️ Getting Started

Follow these instructions to get a copy of the project up and running on your local machine for development and testing purposes.

### Prerequisites

Make sure you have [Node.js](https://nodejs.org/) and the [Angular CLI](https://angular.io/cli) installed on your system.

```bash
npm install -g @angular/cli

## Installation

Install the dependencies:
npm install

Running the Application
Run the following command to start the development server:
ng serve

The app will automatically reload if you change any of the source files.


## DEPENDENCIES

This project includes the following main dependencies:

@angular/animations: The Angular animations library.
@angular/common: Commonly needed services, pipes, and directives.
@angular/compiler: The Angular template compiler.
@angular/core: Core Angular framework.
@angular/forms: Angular's form validation and handling library.
@angular/platform-browser: Everything needed to run Angular in a web browser.
@angular/router: The Angular router for navigation.
@cds/core: Clarity Design System core components.
@clr/angular: Angular components for Clarity.
@clr/ui: HTML/CSS components for Clarity.
rxjs: Reactive extensions for JavaScript.
zone.js: A signaling mechanism for Angular that allows it to detect when to run change detection.


📂 Project Structure
/
├── .vscode/                 # VSCode settings
├── node_modules/            # Node.js modules
├── src/                     # Application source code
│   ├── app/                 # Application components and modules
│   │   ├── core/            # Core module (singleton services, guards, etc.)
│   │   ├── shared/          # Shared module (common components, pipes, etc.)
│   │   ├── app-routing.module.ts
│   │   ├── app.component.html
│   │   ├── app.component.scss
│   │   └── app.module.ts
│   ├── assets/              # Static assets (images, icons, etc.)
│   ├── environments/        # Environment-specific configuration
│   ├── index.html           # Main HTML file
│   ├── main.ts              # Main entry point
│   └── styles.scss          # Global styles
├── .editorconfig            # Editor configuration
├── .gitignore               # Git ignore file
├── angular.json             # Angular CLI configuration
├── package.json             # Project dependencies and scripts
├── README.md                # This README file
└── tsconfig.json            # TypeScript configuration