Angular 20 Enterprise CRM & Customer Management System

Portfolio Flagship Project | Code With Jamshed

A production-inspired Enterprise CRM System built with Angular 20 for managing customers, leads, sales pipelines, deals, tasks, meetings, teams and business analytics.

Built using Angular Signals, RxJS, Standalone Components, Reactive Forms and Angular CDK, the project demonstrates scalable enterprise frontend architecture with a responsive Light/Dark UI.

The CRM includes customer management, lead tracking, Kanban-based deal management, sales pipeline workflows, task management, meetings, reports and reusable enterprise UI components.

Demo Credentials

Email: admin@crm.dev
Password: password

Screenshots

Create this folder inside the repository:

docs/screenshots/

Then add your screenshots using the exact names below.

Dashboard

Customers

Leads

Deals

Tasks

Meetings

Reports

Team

Settings

Dark Mode

Project Overview

Angular Enterprise CRM is a realistic enterprise-style CRM frontend built to demonstrate how a modern Angular application can be structured for maintainability, scalability, accessibility, and future backend integration.

Instead of being a simple CRUD project, it includes multiple business workflows such as:

Customer management
Lead tracking
Lead conversion
Deal management
Kanban sales pipeline
Task management
Meeting scheduling
Team performance
Reports and analytics
Notifications
Profile management
Theme preferences
Authentication flows

The project can be used for:

GitHub portfolio
Frontend developer interviews
Angular architecture demonstrations
YouTube project walkthroughs
Freelance client showcases
Enterprise Angular learning

Tech Stack

Technology	Purpose
Angular 20	Frontend framework
TypeScript	Strongly typed application code
Standalone Components	Modern Angular component architecture
Angular Signals	Local and reactive state
RxJS	Async workflows and observable streams
Angular Router	Routing and lazy loading
Reactive Forms	Form handling and validation
Angular CDK	Drag-and-drop sales pipeline
Bootstrap 5.3	Responsive utilities
SCSS	Application styling
CSS Variables	Theme and design tokens
Font Awesome	Icons
ApexCharts / Chart Integration	Dashboard and reports
Mock Services	Frontend data layer
Local Storage	Demo persistence and preferences

Angular CRM Features

Authentication

Login
Register
Forgot Password
Reset Password
Verification / OTP UI
Session Expired page
Authentication guard
Current-user profile
Logout workflow

CRM Dashboard & Sales Analytics

Customer KPI
Lead KPI
Open deals
Revenue summary
Task overview
Meeting summary
Sales performance
Lead source overview
Pipeline summary
Recent activities
Upcoming tasks
Upcoming meetings
Quick actions

Angular CRM Customer Management

Customer list
Add customer
Edit customer
Delete customer
Customer details
Customer overview
Contacts
Notes
Activity timeline
Documents placeholder
Search
Filters
Sorting
Pagination
Confirmation dialogs

Lead Management & Lead Conversion

Lead list
Add lead
Edit lead
Lead details
Lead source
Lead status
Lead assignment
Lead score
Search and filtering
Lead conversion workflow
Convert Lead → Customer
Convert Lead → Deal

Sales Pipeline & Deal Management

Deal list
Add deal
Edit deal
Deal details
Deal owner
Deal amount
Probability
Expected closing date
Deal status
Kanban pipeline
Angular CDK drag-and-drop

Pipeline stages:

New
Qualified
Proposal
Negotiation
Won
Lost

Tasks

Task list
Add task
Edit task
Task details
Assignee
Due date
Status
Priority
Completion action
Filtering

Task statuses:

To Do
In Progress
Completed

Task priorities:

High
Medium
Low

Meetings

Meeting list
Schedule meeting
Edit meeting
Meeting details
Upcoming meetings
Completed meetings
Meeting notes
Customer association
Lead association
Deal association

Team

Team member list
Member profile summary
Roles
Sales metrics
Targets
Performance overview
Role and permission UI placeholder

CRM Reports & Analytics

Sales report
Revenue report
Customer report
Lead conversion report
Activity report
Date-range filtering
Owner filtering
Chart visualizations
Export-ready structure

Settings

Profile settings
Company settings
Appearance
Light/Dark theme
Notification preferences
Security settings
General preferences
Roles & Permissions UI

Notifications

Notification dropdown
Unread counter
Mark notification as read
Mark all as read
Empty state
Responsive dropdown

Current User Profile

User avatar
Name
Email
Role
Profile shortcut
Settings shortcut
Tasks shortcut
Logout

Angular Enterprise CRM Architecture

The project follows a feature-based Angular architecture.

src/
├── app/
│   ├── core/
│   │   ├── constants/
│   │   ├── enums/
│   │   ├── guards/
│   │   ├── interceptors/
│   │   ├── models/
│   │   ├── services/
│   │   └── utils/
│   │
│   ├── shared/
│   │   ├── components/
│   │   ├── directives/
│   │   ├── pipes/
│   │   ├── ui/
│   │   └── validators/
│   │
│   ├── layout/
│   │   ├── auth-layout/
│   │   └── main-layout/
│   │
│   ├── features/
│   │   ├── auth/
│   │   ├── dashboard/
│   │   ├── customers/
│   │   ├── leads/
│   │   ├── deals/
│   │   ├── tasks/
│   │   ├── meetings/
│   │   ├── team/
│   │   ├── reports/
│   │   └── settings/
│   │
│   ├── app.component.ts
│   ├── app.config.ts
│   └── app.routes.ts
│
├── environments/
├── styles.scss
├── index.html
└── main.ts

Example Feature Structure

customers/
├── pages/
│   ├── customer-list/
│   ├── customer-details/
│   └── customer-form/
│
├── components/
│   ├── customer-table/
│   ├── customer-summary/
│   ├── customer-notes/
│   └── customer-timeline/
│
├── data-access/
│   └── customer.service.ts
│
├── models/
│   └── customer.model.ts
│
└── customer.routes.ts

Shared UI Components

The application includes reusable UI building blocks such as:

Button
Input
Select
Textarea
Card
Badge
Avatar
Modal
Confirmation dialog
Data table
Pagination
Search/filter bar
Breadcrumb
Loader
Skeleton
Empty state
Error state
Toast
Chart wrapper
Notification dropdown
User profile dropdown

Core Services

The project contains application-level services for:

Authentication
Theme
Notifications
Mock database
Storage and preferences
Customers
Leads
Deals
Tasks
Meetings
Reports
HTTP interception
Error handling

Angular Signals & State Management

The project primarily uses Angular Signals for local and application state.

Example:

readonly customers = signal<Customer[]>([]);
readonly selectedCustomer = signal<Customer | null>(null);

readonly activeCustomers = computed(() =>
  this.customers().filter(customer => customer.status === 'Active')
);

RxJS is used where asynchronous service workflows or stream-based logic are more appropriate.

Lazy Loading

Major features are lazy-loaded through Angular Router.

Example:

{
  path: 'customers',
  loadChildren: () =>
    import('./features/customers/customer.routes')
      .then(routes => routes.CUSTOMER_ROUTES)
}

This keeps the application modular and reduces the initial bundle size.

Responsive Angular CRM Design

The CRM is designed for:

Desktop
Laptop
Tablet
Mobile

Responsive behavior includes:

Collapsible sidebar
Mobile navigation
Responsive tables
Mobile-friendly forms
Adaptive dashboard cards
Responsive notification dropdown
Responsive profile dropdown
Responsive Kanban board

Angular CRM Light & Dark Theme

The application supports both themes using CSS variables.

:root {
  --app-bg: #f8fafc;
  --surface: #ffffff;
  --text: #0f172a;
}

html.dark {
  --app-bg: #0f172a;
  --surface: #111827;
  --text: #f8fafc;
}

Theme preference can be stored in local storage.

Mock Data Strategy

Version 1.0 uses typed frontend mock services.

Components do not depend directly on hard-coded data.

Component
   ↓
Feature Service
   ↓
Mock Database / API Contract

This allows the mock implementation to later be replaced by:

Spring Boot
Node.js / Express
Firebase
.NET
NestJS
Any REST API

without redesigning the UI components.

Backend Integration Strategy

A future backend version can introduce APIs such as:

POST   /api/auth/login
GET    /api/customers
POST   /api/customers
PUT    /api/customers/:id
DELETE /api/customers/:id

GET    /api/leads
POST   /api/leads
PUT    /api/leads/:id

GET    /api/deals
POST   /api/deals
PUT    /api/deals/:id

GET    /api/tasks
GET    /api/meetings
GET    /api/reports

The frontend service layer is designed so API integration can be introduced with minimal component changes.

Getting Started

Prerequisites

Install:

Node.js 20+
npm
Angular CLI 20

Check versions:

node -v
npm -v
ng version

Clone Repository

git clone https://github.com/Jamshed7664/angular-enterprise-crm.git

Navigate to the project:

cd angular-enterprise-crm

Install Dependencies

npm install

Start Development Server

npm start

or:

ng serve

Open:

http://localhost:4200

Production Build

npm run build

Production files will be generated inside the Angular dist/ directory.

Recommended Screenshot Setup

For the best GitHub presentation, capture screenshots at approximately:

Desktop: 1440 × 900

Recommended screenshots:

dashboard.png
customers.png
customer-details.png
leads.png
deals.png
pipeline.png
tasks.png
meetings.png
reports.png
team.png
settings.png
dark-mode.png

Store them inside:

docs/screenshots/

GitHub will automatically display them in this README.

Suggested Demo Flow

For a portfolio or YouTube walkthrough:

Login
Show responsive dashboard
Toggle dark mode
Open notifications
Open current-user profile
Open customer management
Add/edit a customer
Open customer details
Create a lead
Convert the lead
Open deals
Demonstrate Kanban drag-and-drop
Create a task
Schedule a meeting
Open team performance
Show reports
Open settings
Demonstrate responsive mobile layout

Development Roadmap

v1.0

v1.1

v2.0

Future Backend Stack

A future full-stack implementation may use:

Angular 20
      ↓
Spring Boot REST API
      ↓
Spring Security + JWT
      ↓
Spring Data JPA
      ↓
MySQL
      ↓
Docker
      ↓
Kubernetes / Cloud

Project Goals

This project demonstrates the ability to:

Translate business requirements into Angular architecture
Build reusable enterprise UI components
Design realistic CRM workflows
Use Standalone Components
Use Angular Signals
Work with Reactive Forms
Implement feature-based routing
Implement lazy loading
Build responsive SaaS layouts
Maintain typed data models
Prepare frontend code for future APIs
Build portfolio-quality Angular applications

Portfolio Value

This is not intended to be a basic tutorial CRUD application.

It is designed as a flagship Angular portfolio project showing experience with:

Enterprise architecture
Component design
State management
Complex business flows
Responsive UI
Reusable frontend patterns
Modern Angular APIs
Maintainable project organization

GitHub SEO & Repository Metadata

Recommended Repository Description

Enterprise CRM built with Angular 20, Signals and RxJS featuring customer management, leads, sales pipeline, Kanban deals, tasks, meetings and analytics.

Repository

angular-enterprise-crm

Release

Tag: v1.0.0
Title: Angular Enterprise CRM v1.0.0

First stable portfolio release featuring customer management, lead tracking and conversion, Kanban-based deal management, sales pipeline workflows, tasks, meetings, reports, Angular Signals, and responsive Light/Dark themes.

Project Version

v1.0.0

Author

Jamshed Ahmad

Software Engineer | Frontend Developer

Technical Skills

Angular
TypeScript
JavaScript
HTML
CSS
SCSS
Bootstrap
React
Next.js

Brand

Code With Jamshed

Connect

Add your profile links here:

GitHub:   https://github.com/Jamshed7664
LinkedIn: www.linkedin.com/in/jamshed-ahmad7664
YouTube:  https://www.youtube.com/@CodeWithJamshed

Support

If you find this project useful:

Star the repository
Fork the project
Share it with other developers
Follow Code With Jamshed
Subscribe for more Angular and full-stack projects

License

This project is intended for learning, portfolio presentation, demonstrations, and personal development.

You may add an MIT License if you want the repository to be publicly reusable.

Built with Angular 20 ❤️ by Code With Jamshed

Enterprise Angular • CRM • Signals • Standalone Components • Responsive UI

Name		Name	Last commit message	Last commit date
docs/screenshots		docs/screenshots
public		public
src		src
.gitignore		.gitignore
README.md		README.md
angular.json		angular.json
package-lock.json		package-lock.json
package.json		package.json
tsconfig.app.json		tsconfig.app.json
tsconfig.json		tsconfig.json

Latest commit

History

Folders and files

Repository files navigation

Angular 20 Enterprise CRM & Customer Management System

Demo Credentials

Screenshots

Dashboard

Customers

Leads

Deals

Tasks

Meetings

Reports

Team

Settings

Dark Mode

Project Overview

Tech Stack

Angular CRM Features

Authentication

CRM Dashboard & Sales Analytics

Angular CRM Customer Management

Lead Management & Lead Conversion

Sales Pipeline & Deal Management

Tasks

Meetings

Team

CRM Reports & Analytics

Settings

Notifications

Current User Profile

Angular Enterprise CRM Architecture

Example Feature Structure

Shared UI Components

Core Services

Angular Signals & State Management

Lazy Loading

Responsive Angular CRM Design

Angular CRM Light & Dark Theme

Mock Data Strategy

Backend Integration Strategy

Getting Started

Prerequisites

Clone Repository

Install Dependencies

Start Development Server

Production Build

Recommended Screenshot Setup

Suggested Demo Flow

Development Roadmap

v1.0

v1.1

v2.0

Future Backend Stack

Project Goals

Portfolio Value

GitHub SEO & Repository Metadata

Recommended Repository Description

Recommended GitHub Topics

Repository

Release

Project Version

Author

Technical Skills

Brand

Connect

Support

License

About

Topics

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages